WebGL: Up and Running

Table of contents

1. WebGL: Up and Running
2. Foreword
3. Preface
   1. Audience
   2. How This Book Is Organized
   3. Conventions Used in This Book
   4. This Book’s Example Files
   5. Using Code Examples
   6. Safari® Books Online
   7. How to Contact Us
   8. Acknowledgments
4. 1. An Introduction to WebGL
   1. WebGL—A Technical Definition
   2. 3D Graphics—A Primer
      1. 3D Coordinate Systems
      2. Meshes, Polygons, and Vertices
      3. Materials, Textures, and Lights
      4. Transforms and Matrices
      5. Cameras, Perspective, Viewports, and Projections
      6. Shaders
   3. The WebGL API
      1. The Anatomy of a WebGL Application
      2. The Canvas and Drawing Context
      3. The Viewport
      4. Buffers, ArrayBuffer, and Typed Arrays
      5. Matrices
      6. The Shader
      7. Drawing Primitives
   4. Chapter Summary
5. 2. Your First WebGL Program
   1. Three.js—A JavaScript 3D Engine
   2. Setting Up Three.js
   3. A Simple Three.js Page
   4. A Real Example
      1. Shading the Scene
      2. Adding a Texture Map
      3. Rotating the Object
      4. The Run Loop and requestAnimationFrame()
      5. Bringing the Page to Life
   5. Chapter Summary
6. 3. Graphics
   1. Sim.js—A Simple Simulation Framework for WebGL
   2. Creating Meshes
   3. Using Materials, Textures, and Lights
      1. Types of Lights
      2. Creating Serious Realism with Multiple Textures
      3. Textures and Transparency
   4. Building a Transform Hierarchy
   5. Creating Custom Geometry
   6. Rendering Points and Lines
      1. Point Rendering with Particle Systems
      2. Line Rendering
   7. Writing a Shader
      1. WebGL Shader Basics
      2. Shaders in Three.js
   8. Chapter Summary
7. 4. Animation
   1. Animation Basics
      1. Frame-Based Animation
      2. Time-Based Animation
      3. Interpolation and Tweening
      4. Keyframes
      5. Articulated Animation
      6. Skinned Animation
      7. Morphs
   2. Creating Tweens Using the Tween.js Library
      1. Creating a Basic Tween
      2. Tweens with Easing
   3. Animating an Articulated Model with Keyframes
      1. Loading the Model
      2. Animating the Model
   4. Animating Materials and Lights
   5. Animating Textures
   6. Animating Skinned Meshes and Morphs
   7. Chapter Summary
8. 5. Interaction
   1. Hit Detection, Picking, and Projection
      1. Hit Detection in Three.js
   2. Implementing Rollovers and Clicks
   3. Implementing Dragging
      1. Using Tweens with Dragging
   4. Using Hit Point and Normal Information
   5. Camera-Based Interaction
      1. Implementing a Model Viewer with Camera Interaction
      2. Navigating Within a Scene
   6. Chapter Summary
9. 6. Integrating 2D and 3D
   1. Combining Dynamic HTML and WebGL
      1. Creating Pop Ups with DIV Elements
      2. Using 2D Screen Positions to Annotate 3D Objects
      3. Adding a Background Image to the 3D Scene
   2. Overlaying 3D Visuals on 2D Pages
   3. Creating Dynamic Textures with a Canvas 2D
   4. Using Video As a Texture
   5. Rendering Dynamically Generated 3D Text
   6. WebGL for Ultimate Mashups
   7. Chapter Summary
10. 7. WebGL in Production
    1. Choosing a Runtime Framework
    2. Loading 3D Content
       1. COLLADA: The Digital Asset Exchange Format
       2. The Three.js JSON Model Format
       3. The Three.js Binary Model Format
       4. 3D Model Compression
       5. The Three.js JSON Scene Format
    3. Creating 3D Content
       1. Exporting Art from Blender
       2. Converting OBJ Files to Three.js JSON Format
       3. Converting OBJ Files to Three.js Binary Format
       4. Converting from Other Tools and Formats
    4. Browser Realities
       1. Detecting WebGL Support in Your Browser
       2. Turning WebGL On in Safari
    5. Handling Context Lost Events
    6. WebGL and Security
    7. Chapter Summary
11. 8. Your First WebGL Game
    1. Building the Pieces
       1. Camera, Character, and Control
          1. The keyboard controls
          2. The camera
          3. Keyframe animations
          4. Texture animation
          5. Collision detection
       2. Art Direction
          1. The sky background
          2. The heads-up display
          3. Changing textures on the fly
       3. The Model Previewer
       4. Creating a Particle System
       5. Adding Sound
    2. Putting It All Together
    3. Chapter Summary
12. Afterword
13. A. WebGL Resources
    1. The WebGL Specification
    2. Official Mailing Lists and Forums
    3. Tools and Toolkits
    4. Blogs and Demo Sites
    5. Community Sites
14. Index
15. About the Author
16. Colophon
17. Copyright