Sign In Start Free Trial

Real-Time 3D Graphics with WebGL 2

By : Farhad Ghayour, Diego Cantor

4.8 (12)

Real-Time 3D Graphics with WebGL 2

4.8 (12)

By: Farhad Ghayour, Diego Cantor

Overview of this book

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.

Preface

Preface

Who This Book Is For

What This Book Covers

To Get the Most out of This Book

Sections

Time for Action

Get in Touch

Free Chapter

Getting Started

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

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

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

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

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

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

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

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

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

Advanced Techniques

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

WebGL 2 Highlights

WebGL 2 Highlights

What's New in WebGL 2?

Migrating to WebGL 2

Summary

Journey Ahead

Journey Ahead

WebGL Libraries

Testing WebGL 2 Applications

3D Reconstruction

Physically-Based Rendering

Communities

Summary

Other Books You May Enjoy

Other Books You May Enjoy

Leave a Review - Let Other Readers Know What You Think

Customer Reviews

4.8 (12)

5 star

83.3%

4 star

8.3%

3 star

8.3%

2 star

0

1 star

0

Reading Pixels from the Offscreen Framebuffer

We can now go to the offscreen buffer and read the color from the appropriate coordinates:

WebGL allows us to read back from a framebuffer using the readPixels function. As usual, having gl as the WebGL context variable within our context:

Function

Description

gl.readPixels(x, y, width, height, format, type, pixels)

x and y: Starting coordinates.
width and height: The extent of pixels to read from the framebuffer. In our example, we are just reading one pixel (where the user clicks), so this will be 1, 1.
format: Supports the gl.RGBA format.
type:: Supports the gl.UNSIGNED_BYTE type.
pixels: A typed array that will contain the results of querying the framebuffer. It needs to have sufficient space to store the results depending on the extent of the query (x, y, width, height). It supports the Uint8Array type.

Remember that...

Search

Your notes and bookmarks