Finally, we need to activate the vertex shader attribute. Following our example, we just need to add gl.enableVertexAttribArray(positionAttributeLocation);.
The following diagram summarizes the mapping procedure:
Enabling the Attribute
by Diego Cantor, Farhad Ghayour
Real-Time 3D Graphics with WebGL 2 - Second Edition
- 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
Enabling the Attribute
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.