Muhammad Bilal Khan

Embark on an immersive scroll journey through my portfolio website, where a dynamic scroll guides users through a meticulously crafted room representing my work and identity. With expertise in 3D web development, the site showcases various facets of my skills and experiences. For an enhanced experience, it offers VR mode, inviting users with VR headsets to explore the room in stunning detail.

Kaariku Sports Center is an exciting project in my portfolio showcasing my web development and 3D design skills. Using Three.js, I have created an immersive 3D experience where users can freely explore every part of the sports center. From indoor sports halls to outdoor fields and a swimming pool, the website allows visitors to navigate the entire facility, getting a realistic feel for the layout and atmosphere. This project demonstrates my ability to create interactive and visually engaging experiences, making it an impressive addition to my portfolio.

A 360-degree experience-based website that demonstrates different home solutions offered by the company in an immersive way. Users can explore the home with all integrated technologies. It has different sections through which users can navigate, including hotspots, a 3D map, a sidebar, and a filtering tool. Each tool is represented by an info spot that provides further details about the product. An admin portal was also created to track user activity on the website.

This project features a fully-fledged 3D multiplayer game with real-time communication and physics. It contains different maps, game modes, types of guns, and player avatars. This game allows users to create a room that other users can join. Real-time communication is performed by the Geckos.io library, which is an excellent alternative to Socket.IO due to faster data communication. Three.js is used to render the game. It features low-poly assets for faster loading times, allowing it to run smoothly on mid- and low-end devices. A JavaScript port of the Bullet physics engine is used to implement physics in the game.

This website showcases different NFT gems that Crypto Gem Alliance offers. It has an interactive 3D experience that can be run on desktops, mobile phones, and some smartwatches. Users can view different types of diamonds and check out the experience with various colors. The experience is powered by a robust tool that allows changing 20 different attributes that affect the diamond's appearance and background effects.

A web application that allowed users to try different sets of frames in a real-time AR environment. TensorFlow face mesh was used to detect the 3D landmarks on the face, which were converted into scale, rotation, and positions and then applied to the 3D model of the glasses.

A 3D experience that takes the user through ten steps of creating a customized fragrance and a bottle. With each step taken, the appearance of the bottle in the 3D scene changes. The final customized product is presented to users in the 3D scene, which can be ordered directly from the website.

This game was for playable web ads. It featured a pleasant 3D environment and real-time physics simulation using a JavaScript port of the Bullet physics engine. With all the assets, 3D models, code, and libraries, the game was very well optimized. The total size is just 1.9 MB, which enabled it to load faster and run smoothly on mobile devices.

An immersive WebGL-based image cluster experience for an event presentation. This experience represents the capability of artificial intelligence to organize images into different categories. In the beginning, the experience shows all the images in the database. Users can explore it by looking around and scrolling. The images fade in when they are at a certain distance from the user and fade out when they are very close. From the categories menu, the images of each category can be individually seen through the same experience. All images are low in size, which helps in faster loading.

A game where two players compete against each other. A different colored 3D ball represents each player. They are inside a sphere, so if players move forward, they end up at the same point. The goal is to score points by collecting an item and passing through other players' bases. In this game, the user's hands control the ball's movement, which is detected through the webcam. MediaPipe hands library is used to detect hand landmarks. The direction is defined by the area in which the hand is present. The screen is divided into nine parts, and the hand works as a joystick. For better performance, web workers are used to running the game in an off-screen canvas. It allows good frame rates even when a machine-learning model runs in the background.

A 2D canvas-based web application for designing industrial parts. There are different features such as drawing basic shapes, adding text, moving and scaling shapes, changing color and opacity, zooming in, and zooming out. All the above features are designed with custom code and without a drawing library. In the end, the user can also export the canvas in a PDF format.

This tool was for industrial use, allowing users to design a shoe sole with accurate real-life measurements and angles. After designing the sole, an STL file was exported directly from the web application and used for 3D printing.