Real-Time 3D Graphics With WebGL 2 by Ghayour, Farhad -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

Real-Time 3D Graphics with WebGL 2 Second Edition

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

← Prev
Back
Next →

← Prev
Back
Next →