Real-Time 3D Graphics with WebGL 2
Farhad Ghayour Diego Cantor更新时间：2021-06-10 19:44:05
最新章节：Leave a Review - Let Other Readers Know What You Thinkcoverpage
Title Page
Dedication
Packt Upsell
Why Subscribe?
Packt.com
Foreword
Contributors
About the Authors
About the Authors
About the Reviewers
Packt Is Searching for Authors like You
Preface
Who This Book Is For
What This Book Covers
To Get the Most out of This Book
Download the Example Code Files
Running Examples Locally
Download the Color Images
Conventions Used
Sections
Time for Action
Have a Go
Get in Touch
Reviews
Getting Started
System Requirements
WebGL Rendering
Software and Hardware Based Rendering
Server and Client Based Rendering
Retained and Immediate Mode Rendering
Retained-Mode Rendering
Immediate-Mode Rendering
Retained Versus Immediate Mode Rendering
Elements in a WebGL Application
Time for Action: Creating an HTML5 Canvas Element
Defining a CSS Style
Understanding Canvas Attributes
What If Canvas Is Not Supported?
Time for Action: Accessing the WebGL Context
State Machine
Time for Action: Setting up WebGL Context Attributes
Using the Context to Access the WebGL API
Loading a 3D Scene
Virtual Car Showroom
Time for Action: Visualizing a 3D Showroom
Architecture Updates
Summary
Rendering
WebGL Rendering Pipeline
Vertex Buffer Objects (VBOs)
Index Buffer Objects (IBOs)
Vertex Shader
Fragment Shader
Framebuffer
Attributes
Uniforms
Textures
Varyings
Rendering in WebGL
Vertices
Indices
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
Unbinding a VBO
Rendering
Drawing Functions
Using drawArrays
Using drawElements
Putting Everything Together
Time for Action: Rendering a Square
Have a Go: Changing the Square Color
Have a Go: Rendering Using drawArrays
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
Have a Go: Add One Validation
Advanced Geometry-Loading Techniques
Introduction to JavaScript Object Notation (JSON)
Defining JSON-Based 3D Models
Time for Action: Encoding and Decoding JSON
Asynchronous Loading with AJAX
Setting up a Web Server
Working Around the Web Server Requirement
Time for Action: Loading a Cone with AJAX
Have a Go: Loading a Nissan GTR
Architecture Updates
Summary
Lights
Lights Normals and Materials
Positional Versus Directional 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
Goraud Versus Phong Shading
Light-Reflection Models
The Lambertian Reflection Model
Phong Reflection Model
Ambient
Diffuse
Specular
OpenGL ES Shading Language (ESSL)
Storage Qualifier
Types
Vector Components
Operators and Functions
Vertex Attributes
Uniforms
Varyings
The in and out variables
Changing attribute to in
Changing varying to in / out
Vertex Shader
Fragment Shader
Writing ESSL Programs
Goraud Shading with Lambertian Reflections
Time for Action: Updating Uniforms in Real Time
Have a Go: Moving Light
Goraud Shading with Phong Reflections
Time for Action: Goraud Shading
Phong Shading
Time for Action: Phong Shading with Phong Lighting
Back to WebGL
Creating a Program
Initializing Attributes and Uniforms
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
Virtual Showroom Example
Architecture Updates
Summary
Cameras
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: Translations in World Space vs Camera Space
Camera Rotation
Time for Action: Rotations in World Space vs Camera Space
Have a Go: Combining Rotations and Translations
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
The Camera Model
Time for Action: Exploring the Showroom
Have a Go: Updating Light Positions
The Projection matrix
Field of View
Perspective or Orthogonal Projection
Time for Action: Orthographic and Perspective Projections
Have a Go: Integrating the Model-View and the Projective Transform
Structure of the WebGL Examples
Supporting Objects
Life Cycle Functions
The configure Function
The load Function
The draw Function
Matrix-Handling Functions
initTransforms
updateTransforms
setMatrixUniforms
Summary
Animations
WebGL Matrix Naming Conventions
Matrix Stacks
Animating a 3D scene
The requestAnimationFrame Function
JavaScript Timers
Timing Strategies
Animation Strategy
Simulation Strategy
Combined Approach: Animation and Simulation
Web Workers: Multithreading in JavaScript
Architectural Updates
App Review
Adding Support for Matrix Stacks
Connecting Matrix Stacks and JavaScript Timers
Time for Action: Simple Animation
Have a Go: Simulating Dropped and Frozen Frames
Parametric Curves
Initialization Steps
Setting up the Animation Timer
Running the Animation
Drawing Each Ball in Its Current Position
Time for Action: Bouncing Ball
Optimization Strategies
Optimizing Batch Performance
Performing Translations in the Vertex Shader
Interpolation
Linear Interpolation
Polynomial Interpolation
B-Splines
Time for Action: Interpolation
Summary
Colors Depth Testing and Alpha Blending
Using Colors in WebGL
Use of Color in Objects
Constant Coloring
Per-Vertex Coloring
Per-Fragment Coloring
Time for Action: Coloring the Cube
Use of Color in Lights
Scalability Problem
How Many Uniforms Can We Use?
Simplifying the Problem
Architectural Updates
Adding Support for Light Objects
Improving How We Pass Uniforms to the Program
Time for Action: Adding a Blue Light to a Scene
Have a Go: Adding Interactivity
Using Uniform Arrays to Handle Multiple Lights
Uniform Array Declaration
JavaScript Array Mapping
Time for Action: Adding a White Light to a Scene
Time for Action: Directional Point Lights
Use of Color in the Scene
Transparency
Updated Rendering Pipeline
Depth Testing
Depth Function
Alpha Blending
The Blending Function
Separate Blending Functions
The Blend Equation
The Blend Color
WebGL Alpha-Blending API
Alpha Blending Modes
The Blending Function
Subtractive Blending
Multiplicative Blending
Interpolative 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?
Creating and Uploading a Texture
Using Texture Coordinates
Using Textures in a Shader
Time for Action: Texturing the Cube
Have a Go: Try a Different Texture
Texture Filter Modes
Time for Action: Trying Different Filter Modes
NEAREST
LINEAR
Mipmapping
NEAREST_MIPMAP_NEAREST
LINEAR_MIPMAP_NEAREST
NEAREST_MIPMAP_LINEAR
LINEAR_MIPMAP_LINEAR
Generating Mipmaps
Texture Wrapping
Time for Action: Trying Different Wrap Modes
CLAMP_TO_EDGE
REPEAT
MIRRORED_REPEAT
Using Multiple Textures
Time for Action: Using Multi-Texturing
Have a Go: Moving Beyond Multiply
Have a Go: Using Multi-Dimensional Textures
Cube Maps
Time for Action: Trying out Cube Maps
Have a Go: Shiny Logo
Summary
Picking
Picking
Setting up an Offscreen Framebuffer
Creating a Texture to Store Colors
Creating a Renderbuffer to Store Depth Information
Creating a Framebuffer for Offscreen Rendering
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
Picker Architecture
Implementing Unique Object Labels
Time for Action: Unique Object Labels
Have a Go: Clearing the Scene
Have a Go: Using Alternative Identifiers for Picking
Have a Go: Decoupling WebGL Components
Summary
Putting It All Together
Creating a WebGL Application
Architectural Review
Time for Action: 3D Virtual Car Showroom
Complexity of the Models
Shader Quality
Network Delays and Bandwidth Consumption
Designing Our GUI
Adding canvas Support
Adding Shader Scripts
Adding WebGL Support
Implementing the Shaders
Setting up the Scene
Configuring WebGL Properties
Setting up the Camera
Creating the Camera Controls
Scene Transforms
Creating the Lights
Mapping Program Attributes and Uniforms
Uniform Initialization
Loading the Cars
Exporting the Blender Models
Understanding the OBJ Format
Vertex
Vertex/Texture Coordinate
Vertex/Texture Coordinate/Normal
Vertex//Normal
Parsing the OBJ Files
Loading Cars into Our WebGL Scene
Rendering
Have a Go: Interactive Controls
Bonus
Summary
Advanced Techniques
Post-Processing
Creating the Framebuffer
Creating the Geometry
Setting up the Shader
Architectural Updates
Time for Action: Post-Process Effects
Have a Go: Funhouse Mirror Effect
Point Sprites
Time for Action: Fountain of Sparks
Have a Go: Bubbles!
Normal Mapping
Time for Action: Normal Mapping in Action
Ray Tracing in Fragment Shaders
Time for Action: Examining the Ray Traced Scene
Have a Go: Multiple Spheres
Summary
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
Attaining context
Extensions
Shader Updates
Shader Definitions
Attribute Definitions
Varying Definitions
No More gl_FragColor
Automatic Texture Type Detection
Non-Power of 2 Texture Support
Floating Point Framebuffer Attachments
Vertex Array Objects
Summary
Journey Ahead
WebGL Libraries
Small Libraries
TWGL
Regl
StackGL
Feature-Rich Libraries
Three.js
Babylon.js
A-Frame
Game Engines
Unity
PlayCanvas
Testing WebGL 2 Applications
Visual Regression Testing
Application Introspection Testing
3D Reconstruction
Physically-Based Rendering
Communities
Summary
Other Books You May Enjoy
Leave a Review - Let Other Readers Know What You Think
更新时间：2021-06-10 19:44:05