Linked e-resources
Details
Table of Contents
Intro
Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Getting Started
WebGL
The Browser
The Render Engine
Buffers
The Graphics Processing Unit
The Present Future
Tooling Up
A Code Editor
Hardware
Platforms
Additional Windows Requirements
Additional Linux requirements
Local Web Server for Development
Live Server VS Extension by Ritwick Dey
NodeJS http-server Package from NPM
Python HTTP server module
Servez- A Simple Web Server for Local Web Development
A Web Browser Compatible with the WebXR API
XR Device
WebXR Emulator
Summary
Chapter 2: Up and Running with WebGL
The Form and Function of HTML
The Canvas
Exercise 1: Your First WebGL Application
A Reference to a Canvas
The WebGL Context
Drawing on the WebGL Context
Resizing the Canvas
Shaders
Source
Compiling
Linking
Buffers
Setting Vertex Positions
Connecting Shaders with Buffers
Drawing
Resolution
Modes of Drawing
Summary
Chapter 3: Toward the Third Dimension in WebGL
The ABCs of XYZ
Exercise 2, Part 1: Painting in the Third Dimension
The WebGL Pipeline
Setup
A Separation of Concerns
An Array of Possibilities
Literally Speaking
Move the Pointer
Calling the Drawing Mode
Exercise 2, Part 2: Squares Squared
Z-Town
A Second Color
Exercise 2, Part 3: Three Sides for Three Dimensions
More Shapes, More Vertices, More Coordinates
Math Magic
Summary
Chapter 4: Matrices, Transformations, and Perspective in WebGL
A Box of Maps
What You May Have Missed in Algebra 2
Translation
Scaling
Rotation
Sine, Cosine, Tangent
Homogeneous Coordinates and Quaternions
From Many into One
GPUs and Matrices Sitting In a Tree . . .
Exercise 3, Part 1: Matrix Revolution
Import GLMatrix.js
Uniforms in Shaders
The Order of Floperations
Making Memories of Matrices
Order in the Import
Who Am I?
Making Moves with Matrices
Animation
I Think There for Loop
Reaching Rotation with Real Radical Radians
Callback, Maybe
Animation Loop
Scope in JavaScript
DeltaTime
Part 1 Recap
Orthographic and Perspective Matrix Projections
The View Frustum
Exercise 3, Part 2: A Change in Perspective
Update the Shader Source
Gaining Perspective
Storing the Matrix
Culling and the Model Transform
Part 2 Recap
Summary
Chapter 5: Diving into Three.js
What Is Three.js?
A Synthesizer for Shapes
WebGL but Simpler
Exercise 4, Part 1: Remix the Matrix
Download the Three.js Source Code
A Detour into ES Modules
Importing a Module
Making a Context
Making a Camera
Making a Scene
Geometry
Box Geometry
Material
Phong Material
Anonymous Objects in JavaScript
Meshes
Rendering Animation
Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Getting Started
WebGL
The Browser
The Render Engine
Buffers
The Graphics Processing Unit
The Present Future
Tooling Up
A Code Editor
Hardware
Platforms
Additional Windows Requirements
Additional Linux requirements
Local Web Server for Development
Live Server VS Extension by Ritwick Dey
NodeJS http-server Package from NPM
Python HTTP server module
Servez- A Simple Web Server for Local Web Development
A Web Browser Compatible with the WebXR API
XR Device
WebXR Emulator
Summary
Chapter 2: Up and Running with WebGL
The Form and Function of HTML
The Canvas
Exercise 1: Your First WebGL Application
A Reference to a Canvas
The WebGL Context
Drawing on the WebGL Context
Resizing the Canvas
Shaders
Source
Compiling
Linking
Buffers
Setting Vertex Positions
Connecting Shaders with Buffers
Drawing
Resolution
Modes of Drawing
Summary
Chapter 3: Toward the Third Dimension in WebGL
The ABCs of XYZ
Exercise 2, Part 1: Painting in the Third Dimension
The WebGL Pipeline
Setup
A Separation of Concerns
An Array of Possibilities
Literally Speaking
Move the Pointer
Calling the Drawing Mode
Exercise 2, Part 2: Squares Squared
Z-Town
A Second Color
Exercise 2, Part 3: Three Sides for Three Dimensions
More Shapes, More Vertices, More Coordinates
Math Magic
Summary
Chapter 4: Matrices, Transformations, and Perspective in WebGL
A Box of Maps
What You May Have Missed in Algebra 2
Translation
Scaling
Rotation
Sine, Cosine, Tangent
Homogeneous Coordinates and Quaternions
From Many into One
GPUs and Matrices Sitting In a Tree . . .
Exercise 3, Part 1: Matrix Revolution
Import GLMatrix.js
Uniforms in Shaders
The Order of Floperations
Making Memories of Matrices
Order in the Import
Who Am I?
Making Moves with Matrices
Animation
I Think There for Loop
Reaching Rotation with Real Radical Radians
Callback, Maybe
Animation Loop
Scope in JavaScript
DeltaTime
Part 1 Recap
Orthographic and Perspective Matrix Projections
The View Frustum
Exercise 3, Part 2: A Change in Perspective
Update the Shader Source
Gaining Perspective
Storing the Matrix
Culling and the Model Transform
Part 2 Recap
Summary
Chapter 5: Diving into Three.js
What Is Three.js?
A Synthesizer for Shapes
WebGL but Simpler
Exercise 4, Part 1: Remix the Matrix
Download the Three.js Source Code
A Detour into ES Modules
Importing a Module
Making a Context
Making a Camera
Making a Scene
Geometry
Box Geometry
Material
Phong Material
Anonymous Objects in JavaScript
Meshes
Rendering Animation