Porsche Concept
.jpeg)
About the Project
An interactive 3D concept showroom showcasing next-generation Porsche electric models. Built to replicate the physical luxury of a vehicle showroom, the platform allows users to open doors, trigger charging animation timelines, inspect wheels, and rotate models inside a WebGL sandbox. The app represents a benchmark in combining web-based 3D assets with responsive, high-end web design elements.
The Challenge
Simulating realistic metallic car paint reflections, glass refractions, and carbon fiber weaves requires heavy GPU shader calculations. Standard Three.js PBR materials looked flat and failed to capture the signature Porsche metallic luster. However, adding complex custom shaders and high-resolution cube maps caused mobile GPUs to throttle, dropping the frame rate to single digits.
The Solution
I authored custom GLSL vertex and fragment shaders to simulate real-time specular highlights and fresnel paint shading with minimal texture memory overhead. I baked ambient occlusion maps from high-poly models onto mobile-optimized Three.js meshes, reducing load sizes by 80%. Furthermore, I implemented an adaptive quality controller that monitors frame times and scales down shadow resolutions dynamically on weaker devices to ensure smooth interactions.
Technologies Used
