PacktLib: WebGL Beginner's Guide

WebGL Beginner's Guide

Credits

About the Authors

Acknowledgement

About the Reviewers

www.PacktPub.com

Preface

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

Summary

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

Summary

Lights!

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

Summary

Camera

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

Architectural updates

Connecting matrix stacks and JavaScript timers

Time for action — simple animation

Parametric curves

Time for action — bouncing ball

Optimization strategies

Interpolation

Time for action — interpolation

Summary

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

Summary

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

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

Summary

Picking

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

Summary

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

Rendering

Time for action — customizing the application

Summary

Advanced Techniques

Post-processing

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