The virtual car dealer
Take me to the prototype
The virtual car dealer (or VAH for short due to its German title 'Das virtuelle Autohaus') is my master-thesis' subject. It's about developing a 3D web-application which enables users to inform themselves about a car while at the same time configuring it – all in all they should be able to experience every aspect of it.
The challenges are not only of technical nature. Customers' demands have to be determined and met as well, moreover the user-interface has to blend in with the three-dimensionality of the main-application. Stick with plain text in boxes is not always the way to go, instead as much content as possible should be presented through means the virtual car offers.
I am using the following techniques resp. programs in this project:
- Blender – Modelling the car and the showroom environment
- Browser – Testing the application
- GLSL ES – Shader-language in WebGL-applications, esp. important for realistic surfaces
- Notepad++ – Coding
- Paint Shop Pro – Textures
- WebGL – graphics API included in modern browsers, usable without any plug-ins
The preparation of the project on a rather theoretical level (like evaluation of statistics concerning what people demand from a new car) is virtually finished by now. Another step was the creation of the exhibit which is a Volkswagen Golf of the current seventh generation – more on it on its own page. The prototype of the VAH itself is as complete now as I intended it to be for my thesis.
Here you can find the VAH prototype.
Contents of the prototype
All following aspects are part of the linked prototype. Uncompressed it weighs in at ca. 4,5 MB, however this server provides compressed data transfer. Either way no conventional configurator is even remotely able to visualize a modified setup as quickly as the VAH. The delay amounts to milliseconds independent of the connection speed. The downside is the restriction to modern browsers and a sufficiently powerful consumer hardware.
- the 3D view can be freely rotated and zoomed, it shows a 5 door VW Golf VII, trim levels Trendline and Highline
- separate configuration of both trim levels including:
- exterior paint
- interior color (Highline only)
- headlights (Trendline only)
- window tint
- trunk lid lettering
- automatic calculation of the total price
- resetting the current configuration
- displaying the current restore code
- restoring of a configuration via numerical code
- displaying a summary of the current configuration incl. measures in 3D
- displaying information about the trunk's capacity incl. exemplary load
- displaying information on fuel consumption as well as efficiency of the current configuration
- doors may be opened, the user can get in virtually thorugh open doors
- the interior is not more than a shallow placeholder due to limited temporal ressources
- still, this functionality proves the VAH's high flexibility
- like this portfolio, the VAH is completely available in English and German, implemented using PHP and JS
- 3D display via WebGL and GLSL ES
- in addition to my studies (OpenGL and GLSL were part of my semester abroad), an important factor in learning these techniques was the Learning WebGL blog
- A blog post by Sergiu Craitoiu came in very handy when I had to deal with transparencies
- like many other WebGL applications, the VAH utilizes the JS library glMatrix
- for a browser-independent and efficient screen refresh, the JS library webgl-utils is being used
- for loading and parsing models saved as Wavefront OBJ files, the VAH uses the webgl-obj-loader
- realtime shadows using exponential shadow mapping
- to store depth information, a widespread packing/unpacking method whose author is not clear is being used
- the shadow textures are being blurred using a method posted by xissburg (separated and hardware-accelerated Gaussian filtering)
- The AJAX based loading of required ressources checks browser and hardware compatibility in multiple steps. If a test fails, initialization stops and the user is presented with a message describing the problem and possible solutions.
- to increase the performance and because the visual differences are neglibible, the reflections are implemented using a static cubemap
- metallic paints use the snoise() function which is part of the JS library webgl-noise
- Animations were realized using the JS library jQuery. jQuery is used to animate a numerical value representing an angle like that of a door. This angle is read each frame and used to display the object accordingly.
- the interaction with 3D objects follows the idea of picking
- die 3D display implements
- For the icosahedron: Lambert shading and quick Gouraud interpolation in conjunction with a uniform grey
- For the floor and the rotating hatches: Lambert shading combined with the more precise Phong interpolation and the same shade of grey
- For the VAH logo as well as the measures: Lambert shading, Phong-Interpolation and a simple diffuse texture
- For all other objects: Phong shading, Phong interpolation and simple, separate diffuse, alpha, speculariy and reflectivity maps