Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages

Create high-performance, visually stunning 3D applications for the Web, using HTML5 and related technologies such as CSS3 and WebGL{u2014}the emerging web graphics standard. With this book, you{u2019}ll learn how to use the tools, frameworks, and libraries for building 3D models and animations, mind-blowing visual effects, and advanced user interaction in both desktop and mobile browsers. In two parts{u2014}Foundations and Application Development Techniques{u2014}author Tony Parisi provides a thorough grounding in theory and practice for designing everything from a simple 3D product viewer to immersive games and interactive training systems. Ideal for developers with Javascript and HTML experience. Explore HTML5 APIs and related technologies for creating 3D web graphics, including WebGL, Canvas, and CSS Work with the popular JavaScript 3D rendering and animation libraries Three.js and Tween.js Delve into the 3D content creation pipeline, and the modeling and animation tools for creating killer 3D content Look into several game engines and frameworks for building 3D applications, including the author{u2019}s Vizi framework Create 3D environments with multiple objects and complex interaction, using examples and supporting code Examine the issues involved in building WebGL-based 3D applications for mobile browsers Copyright 4 Table of Contents 5 Preface 11 Audience 12 How This Book Is Organized 12 Conventions Used in This Book 13 This Book’s Example Files 14 Using Code Examples 14 Safari® Books Online 15 How to Contact Us 15 Acknowledgments 16 Part I. Foundations 19 Chapter 1. Introduction 21 HTML5: A New Visual Medium 23 The Browser as Platform 24 Browser Realities 25 3D Graphics Basics 26 What Is 3D? 26 3D Coordinate Systems 27 Meshes, Polygons, and Vertices 28 Materials, Textures, and Lights 29 Transforms and Matrices 30 Cameras, Perspective, Viewports, and Projections 31 Shaders 32 Chapter 2. WebGL: Real-Time 3D Rendering 35 WebGL Basics 36 The WebGL API 38 The Anatomy of a WebGL Application 38 A Simple WebGL Example 39 The Canvas Element and WebGL Drawing Context 40 The Viewport 41 Buffers, ArrayBuffer, and Typed Arrays 41 Matrices 42 The Shader 43 Drawing Primitives 45 Creating 3D Geometry 47 Adding Animation 51 Using Texture Maps 52 Chapter Summary 59 Chapter 3. Three.js—A JavaScript 3D Engine 61 Three.js Flagship Projects 61 An Overview of Three.js 64 Setting Up Three.js 66 Three.js Project Structure 66 A Simple Three.js Program 68 Creating the Renderer 70 Creating the Scene 70 Implementing the Run Loop 72 Lighting the Scene 73 Chapter Summary 75 Chapter 4. Graphics and Rendering in Three.js 77 Geometry and Meshes 77 Prebuilt Geometry Types 77 Paths, Shapes, and Extrusions 78 The Geometry Base Class 80 BufferGeometry for Optimized Mesh Rendering 83 Importing Meshes from Modeling Packages 84 The Scene Graph and Transform Hierarchy 85 Using Scene Graphs to Manage Scene Complexity 85 Scene Graphs in Three.js 86 Representing Translation, Rotation, and Scale 90 Materials 90 Standard Mesh Materials 91 Adding Realism with Multiple Textures 92 Lights 97 Shadows 99 Shaders 104 The ShaderMaterial Class: Roll Your Own 105 Using GLSL Shader Code with Three.js 107 Rendering 110 Post-Processing and Multipass Rendering 111 Deferred Rendering 112 Chapter Summary 113 Chapter 5. 3D Animation 115 Driving Animation with requestAnimationFrame() 117 Using requestAnimationFrame() in Your Application 118 requestAnimationFrame() and Performance 119 Frame-Based Versus Time-Based Animation 120 Animating by Programmatically Updating Properties 120 Animating Transitions Using Tweens 123 Interpolation 123 The Tween.js Library 124 Easing 126 Using Key Frames for Complex Animations 128 Keyframe.js—A Simple Key Frame Animation Utility 128 Articulated Animation with Key Frames 131 Using Curves and Path Following to Create Smooth, Natural Motion 134 Using Morph Targets for Character and Facial Animation 137 Animating Characters with Skinning 139 Animating Using Shaders 143 Chapter Summary 148 Chapter 6. CSS3: Advanced Page Effects 149 CSS Transforms 151 Using 3D Transforms 152 Applying Perspective 155 Creating a Transform Hierarchy 157 Controlling Backface Rendering 160 A Summary of CSS Transform Properties 163 CSS Transitions 164 CSS Animations 169 Pushing the Envelope of CSS 173 Rendering 3D Objects 173 Rendering 3D Environments 175 Using CSS Custom Filters for Advanced Shader Effects 177 Rendering CSS 3D Using Three.js 178 Chapter Summary 178 Chapter 7. Canvas: Universal 2D Drawing 181 Canvas Basics 182 The Canvas Element and 2D Drawing Context 182 Canvas API Features 184 Rendering 3D with the Canvas API 190 Canvas-Based 3D Libraries 192 K3D 193 The Three.js Canvas Renderer 194 Chapter Summary 201 Part II. Application Development Techniques 203 Chapter 8. The 3D Content Pipeline 205 The 3D Creation Process 205 Modeling 206 Texture Mapping 207 Animation 207 Technical Art 208 3D Modeling and Animation Tools 209 Traditional 3D Software Packages 210 Browser-Based Integrated Environments 214 3D Repositories and Stock Art 218 3D File Formats 219 Model Formats 219 Animation Formats 222 Full-Featured Scene Formats 223 Loading Content into WebGL Applications 232 The Three.js JSON Format 232 The Three.js Binary Format 239 Loading a COLLADA Scene with Three.js 240 Loading a glTF Scene with Three.js 243 Chapter Summary 244 Chapter 9. 3D Engines and Frameworks 247 3D Framework Concepts 248 What Is a Framework? 248 WebGL Framework Requirements 249 A Survey of WebGL Frameworks 252 Game Engines 252 Presentation Frameworks 254 Vizi: A Component-Based Framework for Visual Web Applications 258 Background and Design Philosophy 258 The Vizi Architecture 259 Getting Started with Vizi 261 A Simple Vizi Application 262 Chapter Summary 269 Chapter 10. Developing a Simple 3D Application 271 Designing the Application 273 Creating the 3D Content 274 Exporting the Maya Scene to COLLADA 275 Converting the COLLADA File to glTF 277 Previewing and Testing the 3D Content 277 A Vizi-Based Previewer Tool 278 The Vizi Viewer Class 279 The Vizi Loader Class 281 Integrating the 3D into the Application 285 Developing 3D Behaviors and Interactions 288 Vizi Scene Graph API Methods: findNode() and map() 288 Animating Transparency with Vizi.FadeBehavior 290 Auto-Rotating the Content with Vizi.RotateBehavior 292 Implementing Rollovers Using Vizi.Picker 292 Controlling Animations from the User Interface 294 Changing Colors Using the Color Picker 295 Chapter Summary 298 Chapter 11. Developing a 3D Environment 299 Creating the Environment Art 301 Previewing and Testing the Environment 301 Previewing the Scene in First-Person Mode 303 Inspecting the Scene Graph 304 Inspecting Object Properties 308 Displaying Bounding Boxes 310 Previewing Multiple Objects 312 Using the Previewer to Find Other Scene Issues 314 Creating a 3D Background Using a Skybox 315 3D Skyboxes 316 The Vizi Skybox Object 316 Integrating the 3D Content into the Application 319 Loading and Initializing the Environment 319 Loading and Initializing the Car Model 322 Implementing First-Person Navigation 325 Camera Controllers 326 First-Person Controller: The Math 326 Mouse Look 328 Simple Collision Detection 329 Working with Multiple Cameras 331 Creating Timed and Animated Transitions 332 Scripting Object Behaviors 335 Implementing Custom Components Based on Vizi.Script 335 A Controller Script to Drive the Car 335 Adding Sound to the Environment 342 Rendering Dynamic Textures 344 Chapter Summary 349 Chapter 12. Developing Mobile 3D Applications 351 Mobile 3D Platforms 352 Developing for Mobile Browsers 353 Adding Touch Support 354 Debugging Mobile Functionality in Desktop Chrome 359 Creating Web Apps 362 Web App Development and Testing Tools 362 Packaging Web Apps for Distribution 362 Developing Native/HTML5 “Hybrid” Applications 364 CocoonJS: A Technology to Make HTML Games and Applications for Mobile Devices 366 Assembling an Application with CocoonJS 368 Hybrid WebGL Development: The Bottom Line 375 Mobile 3D Performance 375 Chapter Summary 378 Appendix A. Resources 379 WebGL Resources 379 The WebGL Specification 379 WebGL Mailing Lists and Forums 379 WebGL Blogs and Demo Sites 380 WebGL Community Sites 380 CSS3 Resources 381 CSS3 Specifications 381 CSS3 Blogs and Demo Sites 381 Canvas Resources 381 Canvas 2D Context Specification 381 Canvas 2D Tutorials 382 Frameworks, Libraries, and Tools 382 3D Development Libraries 382 3D Game Engines 383 3D Presentation Frameworks 384 3D Authoring Tools 385 Animation Frameworks 386 Debugging and Profiling WebGL Applications 386 Mobile 3D Development Resources 387 3D File Format Specifications 387 Model Formats 388 Animation Formats 388 Full-Scene Formats 388 Related Technologies 388 Pointer Lock API 388 Page Visibility API 388 WebSockets and WebRTC 389 Web Workers 389 IndexedDB and Filesystem APIs 389 Index 391 About the Author 403 Create high-performance, visually stunning 3D applications for the Web, using HTML5 and related technologies such as CSS3 and WebGL—the emerging web graphics standard. With this book, you’ll learn how to use the tools, frameworks, and libraries for building 3D models and animations, mind-blowing visual effects, and advanced user interaction in both desktop and mobile browsers.In two parts—Foundations and Application Development Techniques—author Tony Parisi provides a thorough grounding in theory and practice for designing everything from a simple 3D product viewer to immersive games and interactive training systems. Ideal for developers with Javascript and HTML experience.Explore HTML5 APIs and related technologies for creating 3D web graphics, including WebGL, Canvas, and CSSWork with the popular JavaScript 3D rendering and animation libraries Three.js and Tween.jsDelve into the 3D content creation pipeline, and the modeling and animation tools for creating killer 3D contentLook into several game engines and frameworks for building 3D applications, including the author’s Vizi frameworkCreate 3D environments with multiple objects and complex interaction, using examples and supporting codeExamine the issues involved in building WebGL-based 3D applications for mobile browsers