WebGL: Up and Running

Tony Parisi

O'REILLY' Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo

Table of Contents

Foreword vii Preface ix

1. An Introduction to WebGL 1 WebGL—A Technical Definition 2 3D Graphics—A Primer 4

3D Coordinate Systems 4 Meshes, Polygons, and Vertices 4 Materials, Textures, and Lights 5 Transforms and Matrices 6 Cameras, Perspective, Viewports, and Projections 7 Shaders 7

The WebGL API 9 The Anatomy of a WebGL Application 10 The Canvas and Drawing Context 10 The Viewport 11 Buffers, ArrayBuffer, and Typed Arrays 11 Matrices 12 TheShader 13 Drawing Primitives 14

Chapter Summary 15

2. Your First WebGL Program 17 Three.js—A JavaScript 3D Engine 17 Setting Up Three.j s 19 A Simple Three.js Page 20 A Real Example 22

Shading the Scene 26 Adding a Texture Map 27 Rotating the Object 28

iii

The Run Loop and requestAnimationFrame() 28 Bringing the Page to Life 29

Chapter Summary 30

3. Graphics 31 Sim.js—A Simple Simulation Framework for WebGL 32 Creating Meshes 33 Using Materials, Textures, and Lights 38

Types of Lights 38 Creating Serious Realism with Multiple Textures 41 Textures and Transparency 46

Building a Transform Hierarchy 46 Creating Custom Geometry 50 Rendering Points and Lines 54

Point Rendering with Particle Systems 54 Line Rendering 56

Writing a Shader 57 WebGL Shader Basics 57 Shaders in Three.js 59

Chapter Summary 64

4. Animation 67 Animation Basics 67

Frame-Based Animation 67 Time-Based Animation 68 Interpolation and Tweening 69 Keyframes 70 Articulated Animation 70 Skinned Animation 71 Morphs 71

Creating Tweens Using the Tween.js Library 72 Creating a Basic Tween 73 Tweens with Easing 76

Animating an Articulated Model with Keyframes 79 Loading the Model 79 Animating the Model 81

Animating Materials and Lights 84 Animating Textures 86 Animating Skinned Meshes and Morphs 89 Chapter Summary 89

5. Interaction 91

iv Table of Contents

Hit Detection, Picking, and Projection 91 Hit Detection in Three.js 92

Implementing Rollovers and Clicks 95 Implementing Dragging 98

Using Tweens with Dragging 102 Using Hit Point and Normal Information 102 Camera-Based Interaction 103

Implementing a Model Viewer with Camera Interaction 104 Navigating Within a Scene 106

Chapter Summary 108

6. Integrating 2D and 3D 109 Combining Dynamic HTML and WebGL 110

Creating Pop Ups with DIV Elements 110 Using 2D Screen Positions to Annotate 3D Objects 114 Adding a Background Image to the 3D Scene 116

Overlaying 3D Visuals on 2D Pages 116 Creating Dynamic Textures with a Canvas 2D 119 Using Video As a Texture 127 Rendering Dynamically Generated 3D Text 132 WebGL for Ultimate Mashups 134 Chapter Summary 136

7. WebGL in Production 137 Choosing a Runtime Framework 138 Loading 3D Content 139

COLLADA: The Digital Asset Exchange Format 140 The Three.js JSON Model Format 145 The Three.js Binary Model Format 148 3D Model Compression 150 The Three.js JSON Scene Format 150

Creating 3D Content 151 Exporting Art from Blender 152 Converting OBJ Files to Three.js JSON Format 154 Converting OBJ Files to Three.js Binary Format 154 Converting from Other Tools and Formats 154

Browser Realities 155 Detecting WebGL Support in Your Browser 156 Turning WebGL On in Safari 157

Handling Context Lost Events 159 WebGL and Security 162

Table of Contents v

Chapter Summary 164

8. Your First WebGL Game 165 Building the Pieces 167

Camera, Character, and Control 167 Art Direction 174 The Model Previewer 177 Creating a Particle System 179 Adding Sound 182

Putting It All Together 184 Chapter Summary 196

Afterword cxcvii

A. WebGL Resources 199

Index 203

vi Table of Contents