WebGL Beginner's Guide -- Table of Contents -- WebGL Beginner's Guide -- Credits -- About the Authors -- Acknowledgement -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers, and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Time for action - heading -- What just happened? -- Have a go hero - heading -- Reader feedback -- Customer support -- Downloading the example code -- Downloading the color images of this book -- Errata -- Piracy -- Questions -- 1. Getting Started with WebGL -- System requirements -- What kind of rendering does WebGL offer? -- Structure of a WebGL application -- Creating an HTML5 canvas -- Time for action - creating an HTML5 canvas -- What just happened? -- Defining a CSS style for the border -- Understanding canvas attributes -- What if the canvas is not supported? -- Accessing a WebGL context -- Time for action - accessing the WebGL context -- What just happened? -- WebGL is a state machine -- Time for action - setting up WebGL context attributes -- What just happened? -- Using the context to access the WebGL API -- Loading a 3D scene -- Virtual car showroom -- Time for action - visualizing a finished scene -- What just happened? -- Summary -- 2. Rendering Geometry -- Vertices and Indices -- Overview of WebGL's rendering pipeline -- Vertex Buffer Objects (VBOs) -- Vertex shader -- Fragment shader -- Framebuffer -- Attributes, uniforms, and varyings -- Rendering geometry in WebGL -- Defining a geometry using JavaScript arrays -- Creating WebGL buffers -- Operations to manipulate WebGL buffers -- Associating attributes to VBOs -- Binding a VBO -- Pointing an attribute to the currently bound VBO -- Enabling the attribute -- Rendering.

The drawArrays and drawElements functions -- Using drawArrays -- Using drawElements -- Putting everything together -- Time for action - rendering a square -- What just happened? -- Have a go hero - changing the square color -- Rendering modes -- Time for action - rendering modes -- What just happened? -- WebGL as a state machine: buffer manipulation -- Time for action - enquiring on the state of buffers -- What just happened? -- Have a go hero - add one validation -- Advanced geometry loading techniques: JavaScript Object Notation (JSON) and AJAX -- Introduction to JSON - JavaScript Object Notation -- Defining JSON-based 3D models -- JSON encoding and decoding -- Time for action - JSON encoding and decoding -- What just happened? -- Asynchronous loading with AJAX -- Setting up a web server -- Working around the web server requirement -- Time for action - loading a cone with AJAX + JSON -- What just happened? -- Have a go hero - loading a Nissan GTX -- Summary -- 3. Lights! -- Lights, normals, and materials -- Lights -- Normals -- Materials -- Using lights, normals, and materials in the pipeline -- Parallelism and the difference between attributes and uniforms -- Shading methods and light reflection models -- Shading/interpolation methods -- Goraud interpolation -- Phong interpolation -- Light reflection models -- Lambertian reflection model -- Phong reflection model -- ESSL-OpenGL ES Shading Language -- Storage qualifier -- Types -- Vector components -- Operators and functions -- Vertex attributes -- Uniforms -- Varyings -- Vertex shader -- Fragment shader -- Writing ESSL programs -- Goraud shading with Lambertian reflections -- Time for action - updating uniforms in real time -- What just happened? -- Have a go hero - moving light -- Goraud shading with Phong reflections -- Time for action - Goraud shading -- What just happened? -- Phong shading.

Time for action - Phong shading with Phong lighting -- What just happened? -- Back to WebGL -- Creating a program -- Initializing attributes and uniforms -- Bridging the gap between WebGL and ESSL -- Time for action - working on the wall -- What just happened? -- More on lights: positional lights -- Time for action - positional lights in action -- What just happened? -- Nissan GTS example -- Summary -- 4. Camera -- WebGL does not have cameras -- Vertex transformations -- Homogeneous coordinates -- Model transform -- View transform -- Projection transform -- Perspective division -- Viewport transform -- Normal transformations -- Calculating the Normal matrix -- WebGL implementation -- JavaScript matrices -- Mapping JavaScript matrices to ESSL uniforms -- Working with matrices in ESSL -- The Model-View matrix -- Spatial encoding of the world -- Rotation matrix -- Translation vector -- The mysterious fourth row -- The Camera matrix -- Camera translation -- Time for action - exploring translations: world space versus camera space -- What just happened? -- Camera rotation -- Time for action - exploring rotations: world space versus camera space -- What just happened? -- Have a go hero - combining rotations and translations -- The Camera matrix is the inverse of the Model-View matrix -- Thinking about matrix multiplications in WebGL -- Basic camera types -- Orbiting camera -- Tracking camera -- Rotating the camera around its location -- Translating the camera in the line of sight -- Camera model -- Time for action - exploring the Nissan GTX -- What just happened? -- Have a go hero - updating light positions -- The Perspective matrix -- Field of view -- Perspective or orthogonal projection -- Time for action - orthographic and perspective projections -- What just happened? -- Have a go hero - integrating the Model-view and the projective transform.

Structure of the WebGL examples -- WebGLApp -- Supporting objects -- Life-cycle functions -- Configure -- Load -- Draw -- Matrix handling functions -- initTransforms -- updateTransforms -- setMatrixUniforms -- Summary -- 5. Action -- Matrix stacks -- Animating a 3D scene -- requestAnimFrame function -- JavaScript timers -- Timing strategies -- Animation strategy -- Simulation strategy -- Combined approach: animation and simulation -- Web Workers: Real multithreading in JavaScript -- Architectural updates -- WebGLApp review -- Adding support for matrix stacks -- Configuring the rendering rate -- Creating an animation timer -- Connecting matrix stacks and JavaScript timers -- Time for action - simple animation -- What just happened? -- Have a go hero - simulating dropped and frozen frames -- Parametric curves -- Initialization steps -- Setting up the animation timer -- Running the animation -- Drawing each ball in its current position -- Time for action - bouncing ball -- What just happened? -- Optimization strategies -- Optimizing batch performance -- Performing translations in the vertex shader -- Interpolation -- Linear interpolation -- Polynomial interpolation -- B-Splines -- Time for action - interpolation -- What just happened? -- Summary -- 6. Colors, Depth Testing, and Alpha Blending -- Using colors in WebGL -- Use of color in objects -- Constant coloring -- Per-vertex coloring -- Per-fragment coloring -- Time for action - coloring the cube -- What just happened? -- Use of color in lights -- Using multiple lights and the scalability problem -- How many uniforms can we use? -- Simplifying the problem -- Architectural updates -- Adding support for light objects -- Improving how we pass uniforms to the program -- Time for action - adding a blue light to a scene -- What just happened? -- Have a go hero - adding interactivity with JQuery UI.

Using uniform arrays to handle multiple lights -- Uniform array declaration -- JavaScript array mapping -- Time for action - adding a white light to a scene -- Time for action - directional point lights -- What just happened? -- Use of color in the scene -- Transparency -- Updated rendering pipeline -- Depth testing -- Depth function -- Alpha blending -- Blending function -- Separate blending functions -- Blend equation -- Blend color -- WebGL alpha blending API -- Alpha blending modes -- Additive blending -- Subtractive blending -- Multiplicative blending -- Interpolative blending -- Time for action - blending workbench -- What just happened? -- Creating transparent objects -- Time for action - culling -- What just happened? -- Time for action - creating a transparent wall -- What just happened? -- Summary -- 7. Textures -- What is texture mapping? -- Creating and uploading a texture -- Using texture coordinates -- Using textures in a shader -- Time for action - texturing the cube -- What just happened? -- Have a go hero - try a different texture -- Texture filter modes -- Time for action - trying different filter modes -- What just happened? -- NEAREST -- LINEAR -- Mipmapping -- NEAREST_MIPMAP_NEAREST -- LINEAR_MIPMAP_NEAREST -- NEAREST_MIPMAP_LINEAR -- LINEAR_MIPMAP_LINEAR -- Generating mipmaps -- Texture wrapping -- Time for action - trying different wrap modes -- What just happened? -- CLAMP_TO_EDGE -- REPEAT -- MIRRORED_REPEAT -- Using multiple textures -- Time for action - using multitexturing -- What just happened? -- Have a go hero - moving beyond multiply -- Cube maps -- Time for action - trying out cube maps -- What just happened? -- Have a go hero - shiny logo -- Summary -- 8. Picking -- Picking -- Setting up an offscreen framebuffer -- Creating a texture to store colors -- Creating a Renderbuffer to store depth information.

Creating a framebuffer for offscreen rendering.