As highly interactive applications have become an increasingly important part of the user experience, WebGL is a unique and cutting-edge technology that brings hardware-accelerated 3D graphics to the web.
Packed with 80+ examples, this book guides readers through the landscape of real-time computer graphics using WebGL 2. Each chapter covers foundational concepts in 3D graphics programming with various implementations. Topics are always associated with exercises for a hands-on approach to learning.
This book presents a clear roadmap to learning real-time 3D computer graphics with WebGL 2. Each chapter starts with a summary of the learning goals for the chapter, followed by a detailed description of each topic. The book offers example-rich, up-to-date introductions to a wide range of essential 3D computer graphics topics, including rendering, colors, textures, transformations, framebuffers, lights, surfaces, blending, geometry construction, advanced techniques, and more. With each chapter, you will "level up" your 3D graphics programming skills. This book will become your trustworthy companion in developing highly interactive 3D web applications with WebGL and JavaScript.
Author(s): Farhad Ghayour, Diego Cantor
Edition: 2
Publisher: Packt Publishing
Year: 2018
Language: English
Pages: 500
City: Birmingham
Tags: Programming;WebGL;OpenGL;OpenGL ES;JavaScript;3D Web programming;Web programming;Web development;Computer graphics;Rendering (Computer graphics);3D applications
1: 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
2: 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
3: 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
4: 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
5: 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
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
7: 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
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
9: Putting It All Together
Creating a WebGL Application
Architectural Review
Time for Action: 3D Virtual Car Showroom
Designing Our GUI
Implementing the Shaders
Setting up the Scene
Loading the Cars
Bonus
Summary
10: Advanced Techniques
Post-Processing
Architectural Updates
Time for Action: Post-Process Effects
Point Sprites
Time for Action: 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
11: WebGL 2 Highlights
What's New in WebGL 2?
Migrating to WebGL 2
Summary
12: Journey Ahead
WebGL Libraries
Testing WebGL 2 Applications
3D Reconstruction
Physically-Based Rendering
Communities
Summary
