Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
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