O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

WebGL: Up and Running

Book Description

Get a quick introduction to WebGL, the new standard for 3D rendering on the Web and a member of HTML5’s family of technologies. With this hands-on guide, you’ll learn essential WebGL development and production concepts, using the JavaScript 3D engine Three.js. At the end of the book, you’ll put everything together and build a full 3D application with WebGL.

Table of Contents

  1. WebGL: Up and Running
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. Foreword
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. Afterword
  14. 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
  15. Index
  16. About the Author
  17. Colophon
  18. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  19. Copyright