Once we have defined our VBOs and we have mapped them to the corresponding vertex shader attributes, we are ready to render! To do this, we can use one of the two API functions: drawArrays or drawElements.
- Title Page
- Copyright and Credits
- Dedication
- Packt Upsell
- Foreword
- Contributors
- Preface
- Getting Started
- System Requirements
- WebGL Rendering
- Elements in a WebGL Application
- Time for Action: Creating an HTML5 Canvas Element
- Time for Action: Accessing the WebGL Context
- State Machine
- Time for Action: Setting up WebGL Context Attributes
- Loading a 3D Scene
- Time for Action: Visualizing a 3D Showroom
- Architecture Updates
- Summary
- Rendering
- WebGL Rendering Pipeline
- Rendering in WebGL
- Time for Action: Rendering a Square
- Vertex Array Objects
- Time for Action: Rendering a Square Using a VAO
- Time for Action: Rendering Modes
- WebGL as a State Machine: Buffer Manipulation
- Time for Action: Querying the State of Buffers
- Advanced Geometry-Loading Techniques
- Time for Action: Encoding and Decoding JSON
- Time for Action: Loading a Cone with AJAX
- Architecture Updates
- Summary
- Lights
- Lights, Normals, and Materials
- Using Lights, Normals, and Materials in the Pipeline
- Shading Methods and Light-Reflection Models
- OpenGL ES Shading Language (ESSL)
- 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
- Architecture Updates
- Summary
- Cameras
- WebGL Does Not Have Cameras
- Vertex Transformations
- Normal Transformations
- WebGL Implementation
- The Model-View Matrix
- The Camera Matrix
- Time for Action: Translations in World Space vs Camera Space
- Time for Action: Rotations in World Space vs Camera Space
- Basic Camera Types
- Time for Action: Exploring the Showroom
- The Projection matrix
- Time for Action: Orthographic and Perspective Projections
- Structure of the WebGL Examples
- Summary
- Animations
- WebGL Matrix Naming Conventions
- 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
- 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?
- Using Texture Coordinates
- Using Textures in a Shader
- Time for Action: Texturing the Cube
- Time for Action: Trying Different Filter Modes
- Texture Wrapping
- Time for Action: Trying Different Wrap Modes
- Using Multiple Textures
- Time for Action: Using Multi-Texturing
- Cube Maps
- Time for Action: Trying out Cube Maps
- Summary
- 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
- Putting It All Together
- Advanced Techniques
- WebGL 2 Highlights
- What's New in WebGL 2?
- Vertex Array Objects
- Wider Range of Texture Formats
- 3D Textures
- Texture Arrays
- Instanced Rendering
- Non-Power of 2 Texture Support
- Fragment Depth
- Texture Size in Shaders
- Sync Objects
- Direct Texel Lookup
- Flexible Shader Loops
- Shader Matrix Functions
- Common Compressed Textures
- Uniform Buffer Objects
- Integer Textures and Attributes
- Transform Feedback
- Sampler Objects
- Depth Textures
- Standard Derivatives
- UNSIGNED_INT Indices
- Blend Equation MIN / MAX
- Multiple Render Targets (MRT)
- Texture Access in Vertex Shaders
- Multi-Sampled Renderbuffers
- Query Objects
- Texture LOD
- Shader Texture LOD
- Floating Point Textures Always Available
- Migrating to WebGL 2
- Summary
- What's New in WebGL 2?
- Journey Ahead
- Other Books You May Enjoy
Rendering
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.