Project created during my Master's Degree in Computer Science for the Interactive 3D Graphics class.
Live preview: https://alexprut.github.io/threejs-auto-show-bugatti
Develop a web page based on 3D graphics, using the three.js library, that showcases a product using realistic materials and illumination.
Composed by a garage, 4 lights, a car and a stand where the car is placed. All the components are created using three.js primitive geometries except the car model.
The scene is composed by 4 directional lights respectively placed in:
- First light:
new THREE.Vector3(0, 200, -140) - Second light:
new THREE.Vector3(0, 200, 140) - Third light:
new THREE.Vector3(180, 200, 0) - Fourth light:
new THREE.Vector3(-180, 200, 0)
Light source is a Standard Fluorescent light
expressed in rgb values as 244, 255, 250.
The product use realistic materials based on diffuse plus micro-facet BRDFs, and normal mapping. For the above purpose, custom fragment and vertex shader were created. Other objects in the scene, use primitive three.js materials.
In the custom vertex and fragment shader the following shading equation was implemented:
Beta equation:
Lambertian BRDF equation:
Micro-facet BRDF equation:
Fresnel effect using the Schlick Approximation equation:
D(h) using Trowbridge-Reitz equation:
G(l,v, h) - Geometry Factor using an easier approximation of Cook-Torrance equation:
The user is able to inspect the object using appropriate camera control mechanism (orbit around the product, zoom). It can also interact with the showcase product by changing the car back, top and front torso color.
The product in the showcase is a Bugatti Veyron car. The 3d model used was originally created by Troyano and taken from an official three.js example.
Vignetting post-processing effect was used for reduction of the image brightness and saturation at the periphery. For the above purpose a custom fragment shader was created.
Color icon: Freepik
Bugatti Veyron model: by Troyano
Bugatti logo and favicon: from the official Bugatti website