Webgl: up and Running

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 .

Load more