Foreword
Ken Russell
Chair, WebGL Working Group, the Khronos Group
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 didnt 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 wasnt 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 APIs 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 technologies and computer language implementations. The 3D graphics pipeline has become fully programmable, meaning that artists and designers can create lighting and shading effects limited only by their imaginations. Additionally, huge performance increases in the virtual machines for programming languages like JavaScript make it possible 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 culminated 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 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 including visual effects, animation, interaction, and content creation, culminating in the development of a working prototype of a 3D game. Its a good read; I enjoyed it and hope that you will, too.
Preface
In early 1994, Tim Berners-Lee put out an open call for a virtual reality specification for the Web; Mark Pesce and I answered. Only being able to afford one plane ticket, we sent Mark to Geneva to present our Labyrinth prototype at the first-ever World Wide Web Developers Conference. With typical bombast, Mark announced to the packed room that we had already done it. Our demo was simple but to the point: a rotating 3D object in a window that, when clicked, launched a web browser and navigated to a hyperlink. Within a few weeks, we had a mailing list, and Virtual Reality Markup Language (VRML), the seminal effort to put 3D on the Web, was underway.
A decade and a half later, 3D had finally made it into the browser, though it wouldnt be in the form that Mark and I imagined. VRML was well intentioned but far too earlybefore broadband connections and dedicated graphics hardware were mainstream. VRML inspired successors and copycats, but those too fell by the wayside. Technologies came and went as people continued to hammer away at the problem. Finally, around 2009, we reached the turning point: the industry rallied around a new standard called WebGL. Its 2012 now, and it appears that WebGL is here to stay.
WebGL brings 3D to the browser, providing a JavaScript interface to the graphics hardware on your machine. Based on OpenGL ES (the same graphics running in your smartphone and tablet), it is developed and supported by the makers of major desktop and mobile web browsers. With WebGL, any programmer can create stunning graphics that reach millions of users via the Web: no-download games, big data visualizations, product displays, training simulationsthe list goes on.
While there are dozens of online resources devoted to WebGL, and many libraries and tools now supporting it, the information is scattered, and the coverage incomplete. The WebGL API is really low-levellikely out of reach for the typical developerand in its raw form accessible only to experienced 3D programmers. But the premise and promise of WebGL is to make 3D available to everyone: any consumer with modern hardware and a recent browser, any developer with a text editor and some imagination. We need a way to bridge the gap between the incredible power now at our disposal, and the knowledge and tools to put it into practice.
Thats why I wrote this book.
Audience
If youre a web programmer or designer, this book will get you up and running with WebGL. The book assumes you have HTML, CSS, and JavaScript experience, and familiarity with jQuery and Ajax. But thats about it. You dont need 3D graphics experiencetheres a brief tutorial in to show you the fundamentalsand you dont need to be an expert game developer.
How This Book Is Organized
The book consists of eight chapters divided among three major parts, plus an appendix:
Chapters provide an overview of the WebGL API and Three.js, the open source JavaScript library used for the programming examples.
Chapters dive into the details of programming graphics, animation, and interaction, and explore WebGLs breakthrough capabilities for integrating 2D and 3D into a seamless user experience.
Chapters we build our first full application, a car racing game.
lists resources for learning more about WebGL development, the WebGL standard, and related technologies and tools.
Most of the chapters follow a pattern: explain a concept, dive into some code to illustrate it, and pop back up again for a look around before moving on to the next idea. Occasionally I take a side trip to discuss issues near and dear to my heart, or go on a brief rant about some best practice or other. I hope I have struck the right balance between teaching and preaching; feel free to let me know how I have done on that score.
If you get stuck on any of the example code, let it wash over you and come back to it later. You can almost always read the concept sections as a whole piece and come back to the code when youre ready. And dont hesitate to open up the examples in your favorite WebGL-enabled browser and walk through them in the debugger; thats usually the best way to learn.
The majority of the examples use a toolkit called Three.js, an excellent open source engine built on top of WebGL. Early on, I had to make a choice about whether to bombard you, the reader, with the many low-level details of the WebGL APIa wonderfully flexible, superbly powerful, but decidedly user-unfriendly drawing systemor instead provide the basic information you need to start building applications quickly. The choice was abundantly clear: get you up and running fast. If you like how its going and want to know more about whats under the WebGL hood, there are plenty of resources for that. We have listed some of those in .