Creating a WebGL Application

At this point, we've covered the basic topics required to create a WebGL application. These topics have been implemented in the framework that we've iteratively built throughout this book.

In Chapter 1, Getting Started, we introduced WebGL and learned how to use it in our browser. We learned that the WebGL context behaves as a state machine. As a result, we can query the different state variables using gl.getParameter.

Then, we studied how objects in a WebGL scene are defined by vertices. We saw how we can use indices to label vertices so that the WebGL rendering pipeline can quickly rasterize to render an object. We studied the functions that manipulate buffers and the two main functions to render primitives: drawArrays (no indices) and drawElements (with indices). We learned about using JSON to represent geometries and how we can download models from a web server.

Next, we studied how to illuminate our 3D scene. We learned about normal vectors, the physics of light reflection, and the 3D math required to implement illumination. We also learned how to implement different lighting models using shaders in ESSL.

Thenwe implemented our own custom cameras since WebGL does not have cameras. We studied the Camera matrix and demonstrated how it's actually the inverse of the Model-View matrix. In other words, rotation, translation, and scaling in world space produces the inverse operations in camera space.

Following cameras and matrices, we covered the basics of animation. We discussed useful techniques for animations, such as the matrix stack with push and pop operations to represent local and global transformations, and we analyzed how to establish an animation cycle that is independent of the rendering cycle. Our animations covered different types of interpolation techniques, with examples showcasing various animation styles.

Then, we investigated color representation with WebGL and how we can use colors in objects, lights, and the overall scene. In doing so, we also studied blending and the creation of translucent and transparent effects. After colors and blending, we covered textures for adding more detail to our scene. Then, we saw how users can interact with our 3D application with picking.

In this chapter, we will leverage all of these concepts to create an impressive 3D application. Reasonably enough, we will use all of the components we have developed so far. Let's quickly review them.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.2.15