Chapter 1, Getting Started with WebGL, introduces the HTML5 canvas element and describes how to obtain a WebGL context for it. After that, it discusses the basic structure of a WebGL application. The virtual car showroom application is presented as a demo of the capabilities of WebGL. This application also showcases the different components of a WebGL application.

Chapter 2, Rendering Geometry, presents the WebGL API to define, process, and render objects. Also, this chapter shows how to perform asynchronous geometry loading using AJAX and JSON.

Chapter 3, Lights!, introduces ESSL the shading language for WebGL. This chapter shows how to implement a lighting strategy for the WebGL scene using ESSL shaders. The theory behind shading and reflective lighting models is covered and it is put into practice through several examples.

Chapter 4, Camera, illustrates the use of matrix algebra to create and operate cameras in WebGL. The Perspective and Normal matrices that are used in a WebGL scene are also described here. The chapter also shows how to pass these matrices to ESSL shaders so they can be applied to every vertex. The chapter contains several examples that show how to set up a camera in WebGL.

Chapter 5, Action, extends the use of matrices to perform geometrical transformations (move, rotate, scale) on scene elements. In this chapter the concept of matrix stacks is discussed. It is shown how to maintain isolated transformations for every object in the scene using matrix stacks. Also, the chapter describes several animation techniques using matrix stacks and JavaScript timers. Each technique is exemplified through a practical demo.

Chapter 6, Colors, Depth Testing, and Alpha Blending, goes in depth about the use of colors in ESSL shaders. This chapter shows how to define and operate with more than one light source in a WebGL scene. It also explains the concepts of Depth Testing and Alpha Blending, and it shows how these features can be used to create translucent objects. The chapter contains several practical exercises that put into practice these concepts.

Chapter 7, Textures, shows how to create, manage, and map textures in a WebGL scene. The concepts of texture coordinates and texture mapping are presented here. This chapter discusses different mapping techniques that are presented through practical examples. The chapter also shows how to use multiple textures and cube maps.

Chapter 8, Picking, describes a simple implementation of picking which is the technical term that describes the selection and interaction of the user with objects in the scene. The method described in this chapter calculates mouse-click coordinates and determines if the user is clicking on any of the objects being rendered in the canvas. The architecture of the solution is presented with several callback hooks that can be used to implement logic-specific application. A couple of examples of picking are given.

Chapter 9, Putting It All Together, ties in the concepts discussed throughout the book. In this chapter the architecture of the demos is reviewed and the virtual car showroom application outlined in Chapter 1, Getting Started with WebGL, is revisited and expanded. Using the virtual car showroom as the case study, this chapter shows how to import Blender models into WebGL scenes and how to create ESSL shaders that support the materials used in Blender.

Chapter 10, Advanced Techniques, shows a sample of some advanced techniques such as post-processing effects, point sprites, normal mapping, and ray tracing. Each technique is provided with a practical example. After reading this WebGL Beginner's Guide you will be able to take on more advanced techniques on your own.

This book is written for JavaScript developers who are interested in 3D web development. A basic understanding of the DOM object model, the JQuery library, AJAX, and JSON is ideal but not required. No prior WebGL knowledge is expected.

A basic understanding of linear algebra operations is assumed.

In this book, you will find several headings appearing frequently.

To give clear instructions of how to complete a procedure or task, we use:

Instructions often need some extra explanation so that they make sense, so they are followed with:

<!DOCTYPE html>
<html>
<head>
   <title> WebGL Beginner's Guide - Setting up the canvas </title>
   <style type="text/css">
   canvas {border: 2px dotted blue;}
   </style>
</head>
<body>
<canvas id="canvas-element-id" width="800" height="600">
Your browser does not support HTML5
</canvas>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <title> WebGL Beginner's Guide - Setting up the canvas </title>
   <style type="text/css">
   canvas {border: 2px dotted blue;}
   </style>
</head>
<body>
<canvas id="canvas-element-id" width="800" height="600">
Your browser does not support HTML5
</canvas>
</body>
</html>

--allow-file-access-from-files

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.