Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

By : Farhad Ghayour, Diego Cantor
5 (1)
Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

5 (1)
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.

Related Content you might be interested in

Current Title:

Small book image
Real-Time 3D Graphics with WebGL 2 - Second Edition
Farhad Ghayour | Diego Cantor
Oct, 2018 | 500 pages
Small book image
OpenGL 4 Shading Language Cookbook
David Wolff
Sep, 2018 | 472 pages
Small book image
Mathematics for Game Programming and Computer Graphics
Penny de Byl
Nov, 2022 | 444 pages
Small book image
3D Graphics Rendering Cookbook
Viktor Latypov | Sergey Kosarevsky
Aug, 2021 | 670 pages
Table of Contents (14 chapters)
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
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
WebGL 2 Highlights
WebGL 2 Highlights
What's New in WebGL 2?
Migrating to WebGL 2
Summary
12
Journey Ahead
Journey Ahead
WebGL Libraries
Testing WebGL 2 Applications
3D Reconstruction
Physically-Based Rendering
Communities
Summary
13
Other Books You May Enjoy
Other Books You May Enjoy
Leave a Review - Let Other Readers Know What You Think

Time for Action: Creating a Transparent Wall

Let's cover an example of how we'd make an object transparent:

  1. Open ch06_11_transparency-initial.html in your browser. We have two completely opaque objects: a cone behind a wall. Click and drag the canvas to move the camera behind the wall and see the cone, as shown in the following screenshot:
  1. Change the wall alpha value by using the provided slider.
  2. As you can see, modifying the alpha value does not produce any transparency. The reason for this is that alpha blending is not enabled. Let's edit the source code to include alpha blending. Open the ch06_11_transparency-initial.html file in your source code editor. Scroll to the configure function and find these lines:
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);
  1. Below them, append the following lines:
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA...
Previous Section
End of Section 16
Next Section