www.it-ebooks.info www.it-ebooks.info Programming 3D Applications with HTML5 and WebGL Tony Parisi www.it-ebooks.info Programming 3D Applications with HTML5 and WebGL by Tony Parisi Copyright © 2014 Tony Parisi. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/ institutional sales department: 800-998-9938 or [email protected]. Editors: Mary Treseler and Brian Anderson Indexer: Lucie Haskins Production Editor: Kristen Brown Cover Designer: Karen Montgomery Copyeditor: Rachel Monaghan Interior Designer: David Futato Proofreader: Charles Roumeliotis Illustrator: Rebecca Demarest February 2014: First Edition Revision History for the First Edition: 2014-02-07: First release See http://oreilly.com/catalog/errata.csp?isbn=9781449362966 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Programming 3D Applications with HTML5 and WebGL, the image of a MacQueen’s bustard, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-36296-6 [LSI] www.it-ebooks.info Table of Contents Preface. ix Part I. Foundations 1. Introduction. 3 HTML5: A New Visual Medium 5 The Browser as Platform 6 Browser Realities 7 3D Graphics Basics 8 What Is 3D? 8 3D Coordinate Systems 9 Meshes, Polygons, and Vertices 10 Materials, Textures, and Lights 11 Transforms and Matrices 12 Cameras, Perspective, Viewports, and Projections 13 Shaders 14 2. WebGL: Real-Time 3D Rendering. 17 WebGL Basics 18 The WebGL API 20 The Anatomy of a WebGL Application 20 A Simple WebGL Example 21 The Canvas Element and WebGL Drawing Context 22 The Viewport 23 Buffers, ArrayBuffer, and Typed Arrays 23 Matrices 24 The Shader 25 Drawing Primitives 27 Creating 3D Geometry 29 iii www.it-ebooks.info Adding Animation 33 Using Texture Maps 34 Chapter Summary 41 3. Three.js—A JavaScript 3D Engine. 43 Three.js Flagship Projects 43 An Overview of Three.js 46 Setting Up Three.js 48 Three.js Project Structure 48 A Simple Three.js Program 50 Creating the Renderer 52 Creating the Scene 52 Implementing the Run Loop 54 Lighting the Scene 55 Chapter Summary 57 4. Graphics and Rendering in Three.js. 59 Geometry and Meshes 59 Prebuilt Geometry Types 59 Paths, Shapes, and Extrusions 60 The Geometry Base Class 62 BufferGeometry for Optimized Mesh Rendering 65 Importing Meshes from Modeling Packages 66 The Scene Graph and Transform Hierarchy 67 Using Scene Graphs to Manage Scene Complexity 67 Scene Graphs in Three.js 68 Representing Translation, Rotation, and Scale 72 Materials 72 Standard Mesh Materials 73 Adding Realism with Multiple Textures 74 Lights 79 Shadows 81 Shaders 86 The ShaderMaterial Class: Roll Your Own 87 Using GLSL Shader Code with Three.js 89 Rendering 92 Post-Processing and Multipass Rendering 93 Deferred Rendering 94 Chapter Summary 95 5. 3D Animation. 97 Driving Animation with requestAnimationFrame() 99 iv | Table of Contents www.it-ebooks.info Using requestAnimationFrame() in Your Application 100 requestAnimationFrame() and Performance 101 Frame-Based Versus Time-Based Animation 102 Animating by Programmatically Updating Properties 102 Animating Transitions Using Tweens 105 Interpolation 105 The Tween.js Library 106 Easing 108 Using Key Frames for Complex Animations 110 Keyframe.js—A Simple Key Frame Animation Utility 110 Articulated Animation with Key Frames 113 Using Curves and Path Following to Create Smooth, Natural Motion 116 Using Morph Targets for Character and Facial Animation 119 Animating Characters with Skinning 121 Animating Using Shaders 125 Chapter Summary 130 6. CSS3: Advanced Page Effects. 131 CSS Transforms 133 Using 3D Transforms 134 Applying Perspective 137 Creating a Transform Hierarchy 139 Controlling Backface Rendering 142 A Summary of CSS Transform Properties 145 CSS Transitions 146 CSS Animations 151 Pushing the Envelope of CSS 155 Rendering 3D Objects 155 Rendering 3D Environments 157 Using CSS Custom Filters for Advanced Shader Effects 159 Rendering CSS 3D Using Three.js 160 Chapter Summary 160 7. Canvas: Universal 2D Drawing. 163 Canvas Basics 164 The Canvas Element and 2D Drawing Context 164 Canvas API Features 166 Rendering 3D with the Canvas API 172 Canvas-Based 3D Libraries 174 K3D 175 The Three.js Canvas Renderer 176 Table of Contents | v www.it-ebooks.info Chapter Summary 183 Part II. Application Development Techniques 8. The 3D Content Pipeline. 187 The 3D Creation Process 187 Modeling 188 Texture Mapping 189 Animation 189 Technical Art 190 3D Modeling and Animation Tools 191 Traditional 3D Software Packages 192 Browser-Based Integrated Environments 196 3D Repositories and Stock Art 200 3D File Formats 201 Model Formats 201 Animation Formats 204 Full-Featured Scene Formats 205 Loading Content into WebGL Applications 214 The Three.js JSON Format 214 The Three.js Binary Format 221 Loading a COLLADA Scene with Three.js 222 Loading a glTF Scene with Three.js 225 Chapter Summary 226 9. 3D Engines and Frameworks. 229 3D Framework Concepts 230 What Is a Framework? 230 WebGL Framework Requirements 231 A Survey of WebGL Frameworks 234 Game Engines 234 Presentation Frameworks 236 Vizi: A Component-Based Framework for Visual Web Applications 240 Background and Design Philosophy 240 The Vizi Architecture 241 Getting Started with Vizi 243 A Simple Vizi Application 244 Chapter Summary 251 10. Developing a Simple 3D Application. 253 Designing the Application 255 vi | Table of Contents www.it-ebooks.info Creating the 3D Content 256 Exporting the Maya Scene to COLLADA 257 Converting the COLLADA File to glTF 259 Previewing and Testing the 3D Content 259 A Vizi-Based Previewer Tool 260 The Vizi Viewer Class 261 The Vizi Loader Class 263 Integrating the 3D into the Application 267 Developing 3D Behaviors and Interactions 270 Vizi Scene Graph API Methods: findNode() and map() 270 Animating Transparency with Vizi.FadeBehavior 272 Auto-Rotating the Content with Vizi.RotateBehavior 274 Implementing Rollovers Using Vizi.Picker 274 Controlling Animations from the User Interface 276 Changing Colors Using the Color Picker 277 Chapter Summary 280 11. Developing a 3D Environment. 281 Creating the Environment Art 283 Previewing and Testing the Environment 283 Previewing the Scene in First-Person Mode 285 Inspecting the Scene Graph 286 Inspecting Object Properties 290 Displaying Bounding Boxes 292 Previewing Multiple Objects 294 Using the Previewer to Find Other Scene Issues 296 Creating a 3D Background Using a Skybox 297 3D Skyboxes 298 The Vizi Skybox Object 298 Integrating the 3D Content into the Application 301 Loading and Initializing the Environment 301 Loading and Initializing the Car Model 304 Implementing First-Person Navigation 307 Camera Controllers 308 First-Person Controller: The Math 308 Mouse Look 310 Simple Collision Detection 311 Working with Multiple Cameras 313 Creating Timed and Animated Transitions 314 Scripting Object Behaviors 317 Implementing Custom Components Based on Vizi.Script 317 A Controller Script to Drive the Car 317 Table of Contents | vii www.it-ebooks.info Adding Sound to the Environment 324 Rendering Dynamic Textures 326 Chapter Summary 331 12. Developing Mobile 3D Applications. 333 Mobile 3D Platforms 334 Developing for Mobile Browsers 335 Adding Touch Support 336 Debugging Mobile Functionality in Desktop Chrome 341 Creating Web Apps 344 Web App Development and Testing Tools 344 Packaging Web Apps for Distribution 344 Developing Native/HTML5 “Hybrid” Applications 346 CocoonJS: A Technology to Make HTML Games and Applications for Mobile Devices 348 Assembling an Application with CocoonJS 350 Hybrid WebGL Development: The Bottom Line 357 Mobile 3D Performance 357 Chapter Summary 360 A. Resources. 361 Index. 373 viii | Table of Contents www.it-ebooks.info Preface In its roughly twenty years of existence, 3D on the Web has taken a tortuous journey. In 1994 it was a Next Big Thing called VRML that grabbed industry attention, only to ultimately become a bastard stepchild of mainstream web development during the first Internet boom. Around 2000, a new Next Big Thing called Shockwave 3D promised to democratize game development; by 2004, that offspring was also shipped off to the orphanage. In 2007, the virtual world system Second Life leapfrogged the technology media establishment, landing on the cover of BusinessWeek, and a new 3D land grab ensued—literally, as folks rented Second Life islands in droves attempting to colonize a cyberspace that never quite materialized. By 2010, virtual worlds were yesterday’s news, as consumers latched on to social and mobile gaming to sate their appetite for distrac‐ tion. Viewed through one lens, this is a litany of failure. Viewed through another, it is a crucible. Good ideas may take a long time, but they never truly die. 3D on the Web is one such notion. Once you look past the well-meaning but naïve overreaches of those early at‐ tempts, you can see what some of us (in all humility) have known all along: 3D is just another media type. Whether you use it to build a massively multiplayer online game, an interactive chemistry lesson, or any of countless other applications, 3D is just another way to get pixels moving on a screen at the behest of the user.