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

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

by Farhad Ghayour, Diego Cantor
Released October 2018
Publisher(s): Packt Publishing
ISBN: 9781788629690

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

A comprehensive guide with 80+ examples on 3D programming in WebGL 2, covering computer graphics topics such as rendering, 3D math, camera, and more

Key Features

  • Create visually stunning, high-performance 3D applications for the web with WebGL 2
  • A complete course on 3D computer graphics: rendering, 3D math, lighting, cameras, and more
  • Unlock a variety of new and advanced features offered in WebGL 2

Book Description

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.

What you will learn

  • Understand the rendering pipeline provided in WebGL
  • Build and render 3D objects with WebGL
  • Develop lights using shaders, 3D math, and the physics of light reflection
  • Create a camera and use it to navigate a 3D scene
  • Use texturing, lighting, and shading techniques to render realistic 3D scenes
  • Implement object selection and interaction in a 3D scene
  • Cover advanced techniques for creating immersive and compelling scenes
  • Learn new and advanced features offered in WebGL 2

Who this book is for

This book is intended for developers who are interested in building highly interactive 3D applications for the web. A basic understanding of JavaScript is necessary; no prior computer graphics or WebGL knowledge is required.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Real-Time 3D Graphics with WebGL 2 Second Edition
  3. Dedication
  4. Packt Upsell
    1. Why Subscribe?
    2. Packt.com
  5. Foreword
  6. Contributors
    1. About the Authors
    2. About the Authors
    3. About the Reviewers
    4. Packt Is Searching for Authors like You
  7. Preface
    1. Who This Book Is For
    2. What This Book Covers
    3. To Get the Most out of This Book
      1. Download the Example Code Files
        1. Running Examples Locally
      2. Download the Color Images
      3. Conventions Used
    4. Sections
    5. Time for Action
      1. Have a Go
    6. Get in Touch
      1. Reviews
  8. Getting Started
    1. System Requirements
    2. WebGL Rendering
      1. Software and Hardware Based Rendering
      2. Server and Client Based Rendering
      3. Retained and Immediate Mode Rendering
        1. Retained-Mode Rendering
        2. Immediate-Mode Rendering
        3. Retained Versus Immediate Mode Rendering
    3. Elements in a WebGL Application
    4. Time for Action: Creating an HTML5 Canvas Element
      1. Defining a CSS Style
      2. Understanding Canvas Attributes
      3. What If Canvas Is Not Supported?
    5. Time for Action: Accessing the WebGL Context
    6. State Machine
    7. Time for Action: Setting up WebGL Context Attributes
      1. Using the Context to Access the WebGL API
    8. Loading a 3D Scene
      1. Virtual Car Showroom
    9. Time for Action: Visualizing a 3D Showroom
    10. Architecture Updates
    11. Summary
  9. Rendering
    1. WebGL Rendering Pipeline
      1. Vertex Buffer Objects (VBOs)
      2. Index Buffer Objects (IBOs)
      3. Vertex Shader
      4. Fragment Shader
      5. Framebuffer
      6. Attributes
      7. Uniforms
      8. Textures
      9. Varyings
    2. Rendering in WebGL
      1. Vertices
      2. Indices
      3. Defining a Geometry Using JavaScript Arrays
      4. Creating WebGL Buffers
        1. Operations to Manipulate WebGL Buffers
      5. Associating Attributes to VBOs
        1. Binding a VBO
        2. Pointing an Attribute to the Currently-Bound VBO
        3. Enabling the Attribute
        4. Unbinding a VBO
      6. Rendering
        1. Drawing Functions
          1. Using drawArrays
          2. Using drawElements
      7. Putting Everything Together
    3. Time for Action: Rendering a Square
      1. Have a Go: Changing the Square Color
      2. Have a Go: Rendering Using drawArrays
    4. Vertex Array Objects
    5. Time for Action: Rendering a Square Using a VAO
    6. Time for Action: Rendering Modes
    7. WebGL as a State Machine: Buffer Manipulation
    8. Time for Action: Querying the State of Buffers
      1. Have a Go: Add One Validation
    9. Advanced Geometry-Loading Techniques
      1. Introduction to JavaScript Object Notation (JSON)
      2. Defining JSON-Based 3D Models
    10. Time for Action: Encoding and Decoding JSON
      1. Asynchronous Loading with AJAX
        1. Setting up a Web Server
        2. Working Around the Web Server Requirement
    11. Time for Action: Loading a Cone with AJAX
      1. Have a Go: Loading a Nissan GTR
    12. Architecture Updates
    13. Summary
  10. Lights
    1. Lights, Normals, and Materials
      1. Positional Versus Directional Lights
      2. Normals
      3. Materials
    2. Using Lights, Normals, and Materials in the Pipeline
      1. Parallelism and the Difference Between Attributes and Uniforms
    3. Shading Methods and Light-Reflection Models
      1. Shading/Interpolation Methods
        1. Goraud Interpolation
        2. Phong Interpolation
        3. Goraud Versus Phong Shading
      2. Light-Reflection Models
        1. The Lambertian Reflection Model
        2. Phong Reflection Model
      3. Ambient
      4. Diffuse
      5. Specular
    4. OpenGL ES Shading Language (ESSL)
      1. Storage Qualifier
      2. Types
      3. Vector Components
      4. Operators and Functions
      5. Vertex Attributes
      6. Uniforms
      7. Varyings
        1. The in and out variables
          1. Changing attribute to in
          2. Changing varying to in / out
      8. Vertex Shader
      9. Fragment Shader
    5. Writing ESSL Programs
      1. Goraud Shading with Lambertian Reflections
    6. Time for Action: Updating Uniforms in Real Time
      1. Have a Go: Moving Light
      2. Goraud Shading with Phong Reflections
    7. Time for Action: Goraud Shading
      1. Phong Shading
    8. Time for Action: Phong Shading with Phong Lighting
    9. Back to WebGL
      1. Creating a Program
      2. Initializing Attributes and Uniforms
    10. Bridging the Gap Between WebGL and ESSL
    11. Time for Action: Working on the Wall
    12. More on Lights: Positional Lights
    13. Time for Action: Positional Lights in Action
      1. Virtual Showroom Example
    14. Architecture Updates
    15. Summary
  11. Cameras
    1. WebGL Does Not Have Cameras
    2. Vertex Transformations
      1. Homogeneous Coordinates
      2. Model Transform
      3. View Transform
      4. Projection Transform
      5. Perspective Division
      6. Viewport Transform
    3. Normal Transformations
      1. Calculating the Normal Matrix
    4. WebGL Implementation
      1. JavaScript Matrices
      2. Mapping JavaScript Matrices to ESSL Uniforms
      3. Working with Matrices in ESSL
    5. The Model-View Matrix
      1. Spatial Encoding of the World
        1. Rotation Matrix
        2. Translation Vector
        3. The Mysterious Fourth Row
    6. The Camera Matrix
      1. Camera Translation
    7. Time for Action: Translations in World Space vs Camera Space
      1. Camera Rotation
    8. Time for Action: Rotations in World Space vs Camera Space
      1. Have a Go: Combining Rotations and Translations
      2. Camera Matrix Is the Inverse of the Model-View Matrix
      3. Thinking About Matrix Multiplications in WebGL
    9. Basic Camera Types
      1. Orbiting Camera
      2. Tracking Camera
        1. Rotating the Camera Around Its Location
        2. Translating the Camera in the Line of Sight
        3. The Camera Model
    10. Time for Action: Exploring the Showroom
      1. Have a Go: Updating Light Positions
    11. The Projection matrix
      1. Field of View
      2. Perspective or Orthogonal Projection
    12. Time for Action: Orthographic and Perspective Projections
      1. Have a Go: Integrating the Model-View and the Projective Transform
    13. Structure of the WebGL Examples
      1. Supporting Objects
      2. Life Cycle Functions
        1. The configure Function
        2. The load Function
        3. The draw Function
      3. Matrix-Handling Functions
        1. initTransforms
        2. updateTransforms
        3. setMatrixUniforms
    14. Summary
  12. Animations
    1. WebGL Matrix Naming Conventions
    2. Matrix Stacks
    3. Animating a 3D scene
      1. The requestAnimationFrame Function
      2. JavaScript Timers
    4. Timing Strategies
      1. Animation Strategy
      2. Simulation Strategy
      3. Combined Approach: Animation and Simulation
      4. Web Workers: Multithreading in JavaScript
    5. Architectural Updates
      1. App Review
      2. Adding Support for Matrix Stacks
    6. Connecting Matrix Stacks and JavaScript Timers
    7. Time for Action: Simple Animation
      1. Have a Go: Simulating Dropped and Frozen Frames
    8. Parametric Curves
      1. Initialization Steps
      2. Setting up the Animation Timer
      3. Running the Animation
      4. Drawing Each Ball in Its Current Position
    9. Time for Action: Bouncing Ball
    10. Optimization Strategies
      1. Optimizing Batch Performance
      2. Performing Translations in the Vertex Shader
    11. Interpolation
      1. Linear Interpolation
      2. Polynomial Interpolation
      3. B-Splines
    12. Time for Action: Interpolation
    13. Summary
  13. Colors, Depth Testing, and Alpha Blending
    1. Using Colors in WebGL
    2. Use of Color in Objects
      1. Constant Coloring
      2. Per-Vertex Coloring
      3. Per-Fragment Coloring
    3. Time for Action: Coloring the Cube
    4. Use of Color in Lights
      1. Scalability Problem
        1. How Many Uniforms Can We Use?
        2. Simplifying the Problem
    5. Architectural Updates
      1. Adding Support for Light Objects
        1. Improving How We Pass Uniforms to the Program
    6. Time for Action: Adding a Blue Light to a Scene
      1. Have a Go: Adding Interactivity
      2. Using Uniform Arrays to Handle Multiple Lights
      3. Uniform Array Declaration
        1. JavaScript Array Mapping
    7. Time for Action: Adding a White Light to a Scene
    8. Time for Action: Directional Point Lights
    9. Use of Color in the Scene
      1. Transparency
      2. Updated Rendering Pipeline
    10. Depth Testing
      1. Depth Function
    11. Alpha Blending
      1. The Blending Function
      2. Separate Blending Functions
      3. The Blend Equation
      4. The Blend Color
        1. WebGL Alpha-Blending API
      5. Alpha Blending Modes
        1. The Blending Function
        2. Subtractive Blending
        3. Multiplicative Blending
        4. Interpolative Blending
    12. Time for Action: Blending Workbench
    13. Creating Transparent Objects
    14. Time for Action: Culling
    15. Time for Action: Creating a Transparent Wall
    16. Summary
  14. Textures
    1. What Is Texture Mapping?
      1. Creating and Uploading a Texture
    2. Using Texture Coordinates
    3. Using Textures in a Shader
    4. Time for Action: Texturing the Cube
      1. Have a Go: Try a Different Texture
      2. Texture Filter Modes
    5. Time for Action: Trying Different Filter Modes
      1. NEAREST
      2. LINEAR
      3. Mipmapping
        1. NEAREST_MIPMAP_NEAREST
        2. LINEAR_MIPMAP_NEAREST
        3. NEAREST_MIPMAP_LINEAR
        4. LINEAR_MIPMAP_LINEAR
      4. Generating Mipmaps
    6. Texture Wrapping
    7. Time for Action: Trying Different Wrap Modes
      1. CLAMP_TO_EDGE
      2. REPEAT
      3. MIRRORED_REPEAT
    8. Using Multiple Textures
    9. Time for Action: Using Multi-Texturing
      1. Have a Go: Moving Beyond Multiply
      2. Have a Go: Using Multi-Dimensional Textures
    10. Cube Maps
    11. Time for Action: Trying out Cube Maps
      1. Have a Go: Shiny Logo
    12. Summary
  15. Picking
    1. Picking
    2. Setting up an Offscreen Framebuffer
      1. Creating a Texture to Store Colors
      2. Creating a Renderbuffer to Store Depth Information
      3. Creating a Framebuffer for Offscreen Rendering
    3. Assigning One Color per Object in the Scene
    4. Rendering to an Offscreen Framebuffer
    5. Clicking on the Canvas
    6. Reading Pixels from the Offscreen Framebuffer
    7. Looking for Hits
    8. Processing Hits
    9. Architectural Updates
    10. Time for Action: Picking
      1. Picker Architecture
    11. Implementing Unique Object Labels
    12. Time for Action: Unique Object Labels
      1. Have a Go: Clearing the Scene
      2. Have a Go: Using Alternative Identifiers for Picking
      3. Have a Go: Decoupling WebGL Components
    13. Summary
  16. Putting It All Together
    1. Creating a WebGL Application
    2. Architectural Review
    3. Time for Action: 3D Virtual Car Showroom
      1. Complexity of the Models
      2. Shader Quality
      3. Network Delays and Bandwidth Consumption
    4. Designing Our GUI
      1. Adding canvas Support
      2. Adding Shader Scripts
      3. Adding WebGL Support
    5. Implementing the Shaders
    6. Setting up the Scene
      1. Configuring WebGL Properties
      2. Setting up the Camera
      3. Creating the Camera Controls
      4. Scene Transforms
      5. Creating the Lights
      6. Mapping Program Attributes and Uniforms
      7. Uniform Initialization
    7. Loading the Cars
      1. Exporting the Blender Models
      2. Understanding the OBJ Format
        1. Vertex
        2. Vertex/Texture Coordinate
        3. Vertex/Texture Coordinate/Normal
        4. Vertex//Normal
      3. Parsing the OBJ Files
      4. Loading Cars into Our WebGL Scene
      5. Rendering
      6. Have a Go: Interactive Controls
    8. Bonus
    9. Summary
  17. Advanced Techniques
    1. Post-Processing
      1. Creating the Framebuffer
      2. Creating the Geometry
      3. Setting up the Shader
    2. Architectural Updates
    3. Time for Action: Post-Process Effects
      1. Have a Go: Funhouse Mirror Effect
    4. Point Sprites
    5. Time for Action: Fountain of Sparks
      1. Have a Go: Bubbles!
    6. Normal Mapping
    7. Time for Action: Normal Mapping in Action
    8. Ray Tracing in Fragment Shaders
    9. Time for Action: Examining the Ray Traced Scene
      1. Have a Go: Multiple Spheres
    10. Summary
  18. WebGL 2 Highlights
    1. What's New in WebGL 2?
      1. Vertex Array Objects
      2. Wider Range of Texture Formats
      3. 3D Textures
      4. Texture Arrays
      5. Instanced Rendering
      6. Non-Power of 2 Texture Support
      7. Fragment Depth
      8. Texture Size in Shaders
      9. Sync Objects
      10. Direct Texel Lookup
      11. Flexible Shader Loops
      12. Shader Matrix Functions
      13. Common Compressed Textures
      14. Uniform Buffer Objects
      15. Integer Textures and Attributes
      16. Transform Feedback
      17. Sampler Objects
      18. Depth Textures
      19. Standard Derivatives
      20. UNSIGNED_INT Indices
      21. Blend Equation MIN / MAX
      22. Multiple Render Targets (MRT)
      23. Texture Access in Vertex Shaders
      24. Multi-Sampled Renderbuffers
      25. Query Objects
      26. Texture LOD
      27. Shader Texture LOD
      28. Floating Point Textures Always Available
    2. Migrating to WebGL 2
      1. Attaining context
      2. Extensions
      3. Shader Updates
        1. Shader Definitions
        2. Attribute Definitions
        3. Varying Definitions
        4. No More gl_FragColor
        5. Automatic Texture Type Detection
      4. Non-Power of 2 Texture Support
      5. Floating Point Framebuffer Attachments
      6. Vertex Array Objects
    3. Summary
  19. Journey Ahead
    1. WebGL Libraries
      1. Small Libraries
        1. TWGL
        2. Regl
        3. StackGL
      2. Feature-Rich Libraries
        1. Three.js
        2. Babylon.js
        3. A-Frame
      3. Game Engines
        1. Unity
        2. PlayCanvas
    2. Testing WebGL 2 Applications
      1. Visual Regression Testing
      2. Application Introspection Testing
    3. 3D Reconstruction
    4. Physically-Based Rendering
    5. Communities
    6. Summary
  20. Other Books You May Enjoy
    1. Leave a Review - Let Other Readers Know What You Think

Product information

  • Title: Real-Time 3D Graphics with WebGL 2 - Second Edition
  • Author(s): Farhad Ghayour, Diego Cantor
  • Release date: October 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788629690