Muhammad Bilal Khan

Three.js Grassworks is a procedural grass rendering system I developed for Three.js using WebGPU and TSL. It enables developers to render dense, realistic grass efficiently across diverse 3D environments.

I engineered the system with a focus on real-time performance, scalability, and flexibility. Key features include advanced wind simulation, tile-based rendering, level of detail (LOD), distance and frustum culling, per-blade culling, terrain adaptation, and terrain painting with save/load support. It also includes billboard-based grass rendering and configurable parameters for controlling density, appearance, wind response, and rendering distance.

The project combines advanced real-time graphics programming, GPU optimization, and procedural generation into a reusable tool for building immersive browser-based 3D environments.

The Tech Redux website is a cutting-edge, immersive 3D web experience designed to embody our studio’s identity and innovation. I led the creative and technical development of the site from concept to deployment. The homepage features a glassmorphised Tech Redux logo emerging from animated, interactive water—crafted with custom shaders and rendered in WebGL. This striking visual is the entry point to a scroll-driven journey built with GSAP and Three.js, guiding users through distinct themed sections that showcase our projects, services, team ethos, and testimonials. Every interaction was designed to feel fluid and alive. My focus was on delivering a visually stunning experience while maintaining exceptional performance across devices. The result is not just a portfolio site, but a live demonstration of the immersive web experiences we specialize in.

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.

This is a highly advanced web-based application designed to help builders and fabrication professionals customize metal sheet designs with precision. I led the full front-end development using React, Three.js, and Fabric.js, creating a smooth and intuitive interface that allows users to draw sheet outlines in 2D, add bends at custom angles, and define multiple holes of varying shapes and sizes. A built-in 3D viewer renders the final configuration in real time, offering an accurate preview of the final product. The application features intelligent constraints—such as validating hole placements based on material properties and machine capabilities—and allows advanced customizations, including the ability to group holes to create complex shapes. It also supports exporting the full design in XML format, ready for direct use with metal cutter machines. Modular in structure and highly user-centric, the app also displays precise dimensions, angles, and bend lines to assist both technical developers and on-site builders. The result is a powerful, scalable solution that bridges design flexibility with manufacturing precision.

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.