In this chapter, we will apply the concepts and use the infrastructure code that we have previously developed to build a Virtual Car Showroom. During the development of this demo application, we will use models, lights, cameras, animation, colors, and textures. We will also see how we can integrate these elements with a simple yet powerful graphical user interface.
This chapter talks about:
- The architecture that we have developed throughout the book
- Creating a virtual car showroom application using our architecture
- Importing car models from Blender into a WebGL scene
- Setting up several light sources
- Creating robust shaders to handle multiple materials
- The OBJ and MTL file formats
- Programming the camera to fly through the scene
At this point, we have covered the basic topics that you need to be familiar with in order to create a WebGL application. These topics have been implemented in the infrastructure code that we have iteratively built up throughout the book. Let's see what we have learned so far.
In Chapter 3, Lights!, we introduced WebGL and learned how to enable it in our browser. We also learned that WebGL behaves as a state machine and that we can query the different variables that determine the current state using gl. getParameter.
After that, we studied in Chapter 2, Rendering Geometry, that the objects of a WebGL scene are defined by vertices. We said that usually we use indices to label those vertices so we can quickly tell WebGL how to 'connect the dots' to render the object. We studied the functions that manipulate buffers and the two main functions to render geometry drawArrays (no indices) and drawElements (with indices). We also learned about the JSON format to represent geometry and how we can download models from a web server using AJAX.
In Chapter 3, Lights!, we studied about lights. We learned about normal vectors and the physics of light reflection. We saw how to implement different lighting models using shaders in ESSL.
We learned in Chapter 4, Camera, that WebGL does not have cameras and that we need to define our own cameras. We studied the Camera matrix and we showed that the Camera matrix is the inverse of the Model-View matrix. In other words, rotation, translation, and scaling in the world space produce the inverse operations in camera space.
The basics of animation were covered in Chapter 5, Action. We discussed the matrix stack with its push and pop operations to represent local object transformations. We also analyzed how to set up an animation cycle that is independent from the rendering cycle. We also studied different types of interpolation and saw examples of how interpolation is used to create animations.
In Chapter 6, Colors, Depth Testing, and Alpha Blending, we discussed a bit deeper about color representation and how we can use colors in objects, in lights, and in the scene. We also studied blending and the use of transparencies.
Chapter 7, Textures, covered textures and we saw an implementation for picking in Chapter 8, Picking.
In this chapter, we will use our knowledge to create a simple application. Fortunately, we are going to use all the infrastructure code that we have developed so far. Let's review it.