PacktLib: WebGL Beginner's Guide

WebGL Beginner's Guide


About the Authors


About the Reviewers


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

Accessing a WebGL context

Time for action – accessing the WebGL context

WebGL is a state machine

Time for action – setting up WebGL context attributes

Loading a 3D scene

Time for action – visualizing a finished scene


Rendering Geometry

Vertices and Indices

Overview of WebGL's rendering pipeline

Rendering geometry in WebGL

Putting everything together

Time for action – rendering a square

Rendering modes

Time for action – rendering modes

WebGL as a state machine: buffer manipulation

Time for action – enquiring on the state of buffers

Advanced geometry loading techniques: JavaScript Object Notation (JSON) and AJAX

Time for action – JSON encoding and decoding

Time for action – loading a cone with AJAX + JSON



Lights, normals, and materials

Using lights, normals, and materials in the pipeline

Shading methods and light reflection models

ESSL—OpenGL ES Shading Language

Writing ESSL programs

Time for action – updating uniforms in real time

Time for action – Goraud shading

Time for action – Phong shading with Phong lighting

Back to WebGL

Bridging the gap between WebGL and ESSL

Time for action – working on the wall

More on lights: positional lights

Time for action – positional lights in action



WebGL does not have cameras

Vertex transformations

Normal transformations

WebGL implementation

The Model-View matrix

The Camera matrix

Time for action – exploring translations: world space versus camera space

Time for action – exploring rotations: world space versus camera space

Basic camera types

Time for action – exploring the Nissan GTX

The Perspective matrix

Time for action – orthographic and perspective projections

Structure of the WebGL examples



Matrix stacks

Animating a 3D scene

Timing strategies

Architectural updates

Connecting matrix stacks and JavaScript timers

Time for action – simple animation

Parametric curves

Time for action – bouncing ball

Optimization strategies


Time for action – interpolation


Colors, Depth Testing, and Alpha Blending

Using colors in WebGL

Use of color in objects

Time for action – coloring the cube

Use of color in lights

Architectural updates

Time for action – adding a blue light to a scene

Time for action – adding a white light to a scene

Time for action – directional point lights

Use of color in the scene

Depth testing

Alpha blending

Time for action – blending workbench

Creating transparent objects

Time for action – culling

Time for action – creating a transparent wall



What is texture mapping?

Creating and uploading a texture

Using texture coordinates

Using textures in a shader

Time for action – texturing the cube

Texture filter modes

Time for action – trying different filter modes

Texture wrapping

Time for action – trying different wrap modes

Using multiple textures

Time for action – using multitexturing

Cube maps

Time for action – trying out cube maps




Setting up an offscreen framebuffer

Assigning one color per object in the scene

Rendering to an offscreen framebuffer

Clicking on the canvas

Reading pixels from the offscreen framebuffer

Looking for hits

Processing hits

Architectural updates

Time for action – picking

Implementing unique object labels

Time for action – unique object labels


Putting It All Together

Creating a WebGL application

Architectural review

Virtual Car Showroom application

Defining what the GUI will look like

Implementing the shaders

Setting up the scene

Configuring some WebGL properties

Loading the cars


Time for action – customizing the application


Advanced Techniques


Architectural updates

Time for action – testing some post-process effects

Point sprites

Time for action – using point sprites to create a fountain of sparks

Normal mapping

Time for action – normal mapping in action

Ray tracing in fragment shaders

Time for action – examining the ray traced scene