![]()
![]()
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
Struc...
