WebGL Up and Running

231 Pages·2012·23.829 MB·English

by  Tony Parisi

WebGL: Up and Running
Tony Parisi
WebGL: Up and Running
by Tony Parisi
Copyright © 2012 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].
Editor: Mary Treseler Proofreader: Jasmine Kwityn
Production Editor: Iris Febres Indexer: Jay Marchand
Copyeditor: Audrey Doyle Cover Designer: Karen Montgomery
Interior Designer: David Futato
Illustrators: Robert Romano and Rebecca Demarest
August 2012: First Edition
Revision History for the First Edition:
2012-08-02 First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449323578 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly
Media, Inc. WebGL: Up and Running, the image of a chrysaora, 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 trade­
mark 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 authors assume
no responsibility for errors or omissions, or for damages resulting from the use of the information contained
herein.
ISBN: 978-1-449-32357-8
[LSI]
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 12
Matrices 13
The Shader 13
Drawing Primitives 14
Chapter Summary 15
2. Your First WebGL Program. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Three.js—A JavaScript 3D Engine 17
Setting Up Three.js 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 197
Afterword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . cxcix
A. WebGL Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
vi | Table of Contents
Foreword
In the summer of 1996, I had the privilege of doing a summer internship in the Cosmo
Software division of Silicon Graphics, Inc., which was developing a Virtual Reality
Markup Language (VRML) player for web browsers. VRML brought interactive 3D
graphics to the World Wide Web for the first time. The Web was young, and it was
exciting to see 3D integrated into the experience at such an early stage.
VRML unfortunately didn’t gain the broad adoption its supporters had hoped for. From
a purely technical standpoint, there were two contributing factors. First, the
programmability was limited due to poor performance at the time of the available
scripting languages’ virtual machines. This meant that it wasn’t possible to write general-
purpose code that affected the 3D scene, inherently limiting the domains to which
VRML could be applied. Second, the rendering model was based on the original
OpenGL API’s fixed function graphics pipeline. This meant it was not possible to add
new kinds of visual effects beyond those that had been designed into the system.
In the intervening 16 years, there have been dramatic advancements in graphics tech­
nologies and computer language implementations. The 3D graphics pipeline has be­
come fully programmable, meaning that artists and designers can create lighting and
shading effects limited only by their imaginations. Additionally, huge performance in­
creases in the virtual machines for programming languages like JavaScript make it pos­
sible to change every aspect of the 3D scene, all the way down to the individual vertices
of the component triangles, in every frame. This flexibility makes it possible to write
arbitrary 3D applications directly in the web browser for the first time.
The WebGL API builds on decades of computer graphics work and research that cul­
minated some years ago in the development of the OpenGL ES 2.0 API, a small, purely
shader-based graphics library that ships in nearly every new smartphone and mobile
vii
device. The WebGL working group and community are hopeful that exposing the power
of the 3D graphics processor to the Web in a safe and robust manner will yield a long-
anticipated wave of new and exciting 3D web applications that run on every operating
system and on every kind of computing device.
Tony has written an accessible yet comprehensive book that covers a wide range of
practical techniques for the development of 3D applications on the Web. His book will
help the novice get up and running, but also contains enough advanced information
that even the 3D graphics expert will learn something new. Tony rapidly moves past the
basics of displaying 3D meshes, and presents interesting, useful material on topics in­
cluding visual effects, animation, interaction, and content creation, culminating in the
development of a working prototype of a 3D game. It’s a good read; I enjoyed it and hope
that you will, too.
—Ken Russell
Chair, WebGL Working Group, the Khronos Group
viii | Foreword