WebGL Beginner's Guide

Table of Contents

• Preface

• Chapter 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
• 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
• WebGL is a state machine
• Time for action – setting up WebGL context attributes
• Using the context to access the WebGL API
• Loading a 3D scene
• Virtual car showroom
• Time for action – visualizing a finished scene
• Summary

• Chapter 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
• 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
• Introduction to JSON – JavaScript Object Notation
• Defining JSON-based 3D models
• JSON encoding and decoding
• Time for action – JSON encoding and decoding
• Asynchronous loading with AJAX
• Setting up a web server
• Working around the web server requirement
• Time for action – loading a cone with AJAX + JSON
• Summary

• Chapter 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
• Goraud shading with Phong reflections

• Time for action – Goraud shading
• Phong shading

• Time for action – Phong shading with Phong lighting
• Back to WebGL
• Creating a program
• Initializing attributes and uniforms

• 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
• Nissan GTS example

• Summary

• Chapter 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
• Camera rotation
• Time for action – exploring rotations: world space versus camera space
• 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
• The Perspective matrix
• Field of view
• Perspective or orthogonal projection
• Time for action – orthographic and perspective projections
• Structure of the WebGL examples
• WebGLApp
• Supporting objects
• Life-cycle functions
• Configure
• Load
• Draw
• Matrix handling functions
• initTransforms
• updateTransforms
• setMatrixUniforms
• Summary

• Chapter 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
• Parametric curves
• Initialization steps
• Setting up the animation timer
• Running the animation
• Drawing each ball in its current position
• Time for action – bouncing ball
• Optimization strategies
• Optimizing batch performance
• Performing translations in the vertex shader
• Interpolation
• Linear interpolation
• Polynomial interpolation
• B-Splines
• Time for action – interpolation
• Summary

• Chapter 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
• 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
• 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
• 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
• Creating transparent objects
• Time for action – culling
• Time for action – creating a transparent wall
• Summary

• Chapter 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
• Texture filter modes
• Time for action – trying different filter modes
• 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
• CLAMP_TO_EDGE
• REPEAT
• MIRRORED_REPEAT

• Using multiple textures
• Time for action – using multitexturing
• Cube maps
• Time for action – trying out cube maps
• Summary

• Chapter 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
• 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
• Picker architecture
• Implementing unique object labels
• Time for action – unique object labels
• Summary

• Chapter 9: Putting It All Together
• Creating a WebGL application
• Architectural review
• Virtual Car Showroom application
• Complexity of the models
• Shader quality
• Network delays and bandwidth consumption
• Defining what the GUI will look like
• Adding WebGL support
• Implementing the shaders
• Setting up the scene
• Configuring some WebGL properties
• Setting up the camera
• Creating the Camera Interactor
• The SceneTransforms object
• Creating the lights
• Mapping the Program attributes and uniforms
• Uniform initialization
• Loading the cars
• Exporting the Blender models
• Understanding the OBJ format
• Parsing the OBJ files
• Load cars into our WebGL scene
• Rendering
• Time for action – customizing the application
• Summary

• Chapter 10: Advanced Techniques
• Post-processing
• Creating the framebuffer
• Creating the geometry
• Setting up the shader
• 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
• Summary

• Index