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

To Get the Most out of This Book

You need a browser that implements WebGL 2. WebGL 2 is supported by all major browser vendors with the exception of Microsoft Internet Explorer:

  • Firefox 51 or above
  • Google Chrome 56 or above
  • Chrome for Android 64 or above

An updated list of WebGL-enabled browsers can be found here: http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation.

You also need a source code editor that recognizes and highlights JavaScript syntax.

And you need a web server, such as Apache, Lighttpd, or Python, to load remote assets.

Download the Example Code Files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at www.packt.com.
  2. Select the Support tab.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR/7-Zip for Windows
  • Zipeg/iZip/UnRarX for Mac
  • 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Real-Time-3D-Graphics-with-WebGL-2. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Running Examples Locally

Download the Color Images

Conventions Used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and so forth. Here is an example: "Open the ch01_01_demo.html file in your editor."

A block of code is set as follows:

<html>
<head>
 <title>Real-Time 3D Graphics with WebGL 2</title>

 <style type="text/css">
 canvas {
 border: 5px dotted blue;
 }
 </style>
</head>
<body>

 <canvas id="webgl-canvas" width="800" height="600">
 Your browser does not support the HTML5 canvas element.
 </canvas>

</body>
</html>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<canvas id="webgl-canvas" width="800" height="600">
  Your browser does not support the HTML5 canvas element.
</canvas>

Any command-line input or output is written as follows:

$ mkdir webgl-demo
$ cd webgl-demo

Bold: Indicates a new term, an important word, or words that you see on screen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."



Warnings or important notes appear like this.


Tips and tricks appear like this.
Previous Section
Next Section