WebGL Programming Guide: Interactive 3D Graphics With Guide
webgl_programming_guide
webgl_programming_guide
User Manual:
Open the PDF directly: View PDF
Page Count: 544 [warning: Documents this large are best viewed by clicking the View PDF Link!]
- Contents
- Preface
- 1. Overview of WebGL
- 2. Your First Step with WebGL
- 3. Drawing and Transforming Triangles
- Drawing Multiple Points
- Sample Program (MultiPoint.js)
- Using Buffer Objects
- Create a Buffer Object (gl.createBuffer())
- Bind a Buffer Object to a Target (gl.bindBuffer())
- Write Data into a Buffer Object (gl.bufferData())
- Typed Arrays
- Assign the Buffer Object to an Attribute Variable (gl.vertexAttribPointer())
- Enable the Assignment to an Attribute Variable (gl.enableVertexAttribArray())
- The Second and Third Parameters of gl.drawArrays()
- Experimenting with the Sample Program
- Hello Triangle
- Moving, Rotating, and Scaling
- Summary
- Drawing Multiple Points
- 4. More Transformations and Basic Animation
- 5. Using Colors and Texture Images
- Passing Other Types of Information to Vertex Shaders
- Color Triangle (ColoredTriangle.js)
- Pasting an Image onto a Rectangle
- Texture Coordinates
- Pasting Texture Images onto the Geometric Shape
- Sample Program (TexturedQuad.js)
- Using Texture Coordinates (initVertexBuffers())
- Setting Up and Loading Images (initTextures())
- Make the Texture Ready to Use in the WebGL System (loadTexture())
- Flip an Image’s Y-Axis
- Making a Texture Unit Active (gl.activeTexture())
- Binding a Texture Object to a Target (gl.bindTexture())
- Set the Texture Parameters of a Texture Object (gl.texParameteri())
- Assigning a Texture Image to a Texture Object (gl.texImage2D())
- Pass the Texture Unit to the Fragment Shader (gl.uniform1i())
- Passing Texture Coordinates from the Vertex Shader to the Fragment Shader
- Retrieve the Texel Color in a Fragment Shader (texture2D())
- Experimenting with the Sample Program
- Pasting Multiple Textures to a Shape
- Summary
- 6. The OpenGL ES Shading Language (GLSL ES)
- Recap of Basic Shader Programs
- Overview of GLSL ES
- Hello Shader!
- Data (Numerical and Boolean Values)
- Variables
- GLSL ES Is a Type Sensitive Language
- Basic Types
- Vector Types and Matrix Types
- Structures
- Arrays
- Samplers
- Precedence of Operators
- Conditional Control Flow and Iteration
- Functions
- Built-In Functions
- Global Variables and Local Variables
- Storage Qualifiers
- Precision Qualifiers
- Preprocessor Directives
- Summary
- 7. Toward the 3D World
- What’s Good for Triangles Is Good for Cubes
- Specifying the Viewing Direction
- Eye Point, Look-At Point, and Up Direction
- Sample Program (LookAtTriangles.js)
- Comparing LookAtTriangles.js with RotatedTriangle_Matrix4.js
- Looking at Rotated Triangles from a Specified Position
- Sample Program (LookAtRotatedTriangles.js)
- Experimenting with the Sample Program
- Changing the Eye Point Using the Keyboard
- Sample Program (LookAtTrianglesWithKeys.js)
- Missing Parts
- Specifying the Visible Range (Box Type)
- Specify the Viewing Volume
- Defining a Box-Shaped Viewing Volume
- Sample Program (OrthoView.html)
- Sample Program (OrthoView.js)
- Modifying an HTML Element Using JavaScript
- The Processing Flow of the Vertex Shader
- Changing Near or Far
- Restoring the Clipped Parts of the Triangles (LookAtTrianglesWithKeys_ViewVolume.js)
- Experimenting with the Sample Program
- Specifying the Visible Range Using a Quadrangular Pyramid
- Correctly Handling Foreground and Background Objects
- Hello Cube
- Summary
- 8. Lighting Objects
- Lighting 3D Objects
- Types of Light Source
- Types of Reflected Light
- Shading Due to Directional Light and Its Diffuse Reflection
- Calculating Diffuse Reflection Using the Light Direction and the Orientation of a Surface
- The Orientation of a Surface: What Is the Normal?
- Sample Program (LightedCube.js)
- Add Shading Due to Ambient Light
- Sample Program (LightedCube_ambient.js)
- Lighting the Translated-Rotated Object
- Using a Point Light Object
- Summary
- Lighting 3D Objects
- 9. Hierarchical Objects
- Drawing and Manipulating Objects Composed of Other Objects
- Shader and Program Objects: The Role of initShaders()
- Create Shader Objects (gl.createShader())
- Store the Shader Source Code in the Shader Objects (g.shaderSource())
- Compile Shader Objects (gl.compileShader())
- Create a Program Object (gl.createProgram())
- Attach the Shader Objects to the Program Object (gl.attachShader())
- Link the Program Object (gl.linkProgram())
- Tell the WebGL System Which Program Object to Use (gl.useProgram())
- The Program Flow of initShaders()
- Summary
- 10. Advanced Techniques
- Rotate an Object with the Mouse
- Select an Object
- HUD (Head Up Display)
- Fog (Atmospheric Effect)
- Make a Rounded Point
- Alpha Blending
- Switching Shaders
- Use What You’ve Drawn as a Texture Image
- Framebuffer Object and Renderbuffer Object
- How to Implement Using a Drawn Object as a Texture
- Sample Program (FramebufferObjectj.js)
- Create Frame Buffer Object (gl.createFramebuffer())
- Create Texture Object and Set Its Size and Parameters
- Create Renderbuffer Object (gl.createRenderbuffer())
- Bind Renderbuffer Object to Target and Set Size (gl.bindRenderbuffer(), gl.renderbufferStorage())
- Set Texture Object to Framebuffer Object (gl.bindFramebuffer(), gl.framebufferTexture2D())
- Set Renderbuffer Object to Framebuffer Object (gl.framebufferRenderbuffer())
- Check Configuration of Framebuffer Object (gl.checkFramebufferStatus())
- Draw Using the Framebuffer Object
- Display Shadows
- Load and Display 3D Models
- Handling Lost Context
- Summary
- A. No Need to Swap Buffers in WebGL
- B. Built-in Functions of GLSL ES 1.0
- C. Projection Matrices
- D. WebGL/OpenGL: Left or Right Handed?
- E. The Inverse Transpose Matrix
- F. Load Shader Programs from Files
- G. World Coordinate System Versus Local Coordinate System
- H. Web Browser Settings for WebGL
- Glossary
- References
- Index