Web GL Beginner's Guide
User Manual:
Open the PDF directly: View PDF
Page Count: 377 [warning: Documents this large are best viewed by clicking the View PDF Link!]
- Cover
- Copyright
- Credits
- About the Authors
- Acknowledgement
- About the Reviewers
- www.PacktPub.com
- 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
- 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
- Chapter 2: 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
- Chapter 3: 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
- Chapter 4: 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
- Summary
- Chapter 5: Action
- Chapter 6: 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
- 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
- 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
- Chapter 8: Picking
- 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
- Chapter 9: Putting It All Together
- Chapter 10: 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
- Index