O'Reilly logo

WebGL: Up and Running by Tony Parisi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 wouldn’t be in the form that Mark and I imagined. VRML was well intentioned but far too early—before 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. It’s 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 simulations…the 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-level—likely out of reach for the typical developer—and 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.

That’s why I wrote this book.

Audience

If you’re 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 that’s about it. You don’t need 3D graphics experience—there’s a brief tutorial in Chapter 1 to show you the fundamentals—and you don’t 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 1 and 2 provide an overview of the WebGL API and Three.js, the open source JavaScript library used for the programming examples.

  • Chapters 3 through 6 dive into the details of programming graphics, animation, and interaction, and explore WebGL’s breakthrough capabilities for integrating 2D and 3D into a seamless user experience.

  • Chapters 7 and 8 cover real-world WebGL production topics, from authoring tools and file formats to building robust and secure WebGL applications. In Chapter 8 we build our first full application, a car racing game.

  • Appendix A 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 you’re ready. And don’t hesitate to open up the examples in your favorite WebGL-enabled browser and walk through them in the debugger; that’s 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 API—a wonderfully flexible, superbly powerful, but decidedly user-unfriendly drawing system—or 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 it’s going and want to know more about what’s under the WebGL hood, there are plenty of resources for that. We have listed some of those in Appendix A.

The developers of WebGL have created something unique and amazing: 3D running in the browser, blending seamlessly with other information on the page, mashed up with data from anywhere in the world, represents an unlimited palette for you to build whatever you can imagine. This is more than the sum of its parts; it’s a new medium and a whole new ball game. WebGL programming may not come easy at first, but I promise that if you make the effort, an exciting new world awaits.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords

Constant width bold

Shows commands or other text that should be typed literally by the user

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context

Note

This icon signifies a tip, suggestion, or general note.

This Book’s Example Files

You can download all of the code examples for this book from GitHub at the following location:

https://github.com/tparisi/WebGLBook

In the example files, you will find the completed versions of the applications built in the book, which will contain all the code required to run them. In a few cases, you will need to download additional content files, such as 3D models, from their original sites before running the application; consult the README file in the top-level folder for details.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “WebGL: Up and Running by Tony Parisi (O’Reilly). Copyright 2012 Tony Parisi, 978-1-449-32357-8.”

If you feel your use of code examples falls outside fair use or the permission given here, feel free to contact us at .

Safari® Books Online

Note

Safari Books Online (http://my.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business. Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/WebGL_UR.

To comment or ask technical questions about this book, send email to: .

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

Like WebGL itself, this book is the result of a collaborative effort and would not exist without the help and support of many great people. First, I would like to thank the team at O’Reilly, starting with my editor, Mary Treseler. Books on a new technology are always risky; regardless, Mary went full speed ahead to make this title happen. Her thoughtfulness about the subject matter and constant encouragement for a first-time author were much appreciated. The editorial, production, and marketing staff at O’Reilly, too numerous to mention here, were stellar and helped make writing the book a wonderful experience for me.

I am extremely grateful for the top-notch technical reviews done by Giles Thomas (of Learning WebGL fame), Mike Korcynski, Ray Camden, and Raffaele Cecco. Their detailed comments kept me honest on terminology and helped clarify the examples. Most importantly, their positive feedback on the early chapters gave me a much-needed moral boost when the writing got tough.

A lot of 3D content goes into crafting a graphically oriented programming book. I would like to thank the many artists who granted me permission to redistribute their work with the book samples. You can find detailed art credits in the README as well as the HTML and JavaScript files that go with each example. I would like to give special thanks to Christell Gause, head of support at TurboSquid, for his diligent efforts in helping me obtain permission from the many TurboSquid artists whose content is featured here. Also, I could not have created the examples for this book without additional help and/or contributed content from data junkie Theo Armour, 3D programming ace Don Olmstead, and 3D artist Arefin Mohiuddin of Sunglass.io.

WebGL is blessed to have a strong community of developers. I would like to thank the three.js developers, including guru Ricardo Cabello (“Mr.doob”) and contributors Branislav Ulicny (“AlteredQualia”) and Tim Knip, for their patience with my often-naïve questions and their overall enthusiasm for the project. I owe an eternal debt of gratitude to Ken Russell, the WebGL working group chair and WebGL development lead at Google. Ken has not only built a great product, but he kindly agreed to write the foreword for this book.

Finally, I would like to thank my friends and family. Mark Pesce, my old VRML partner in crime, is a veteran author. His commitment to excellence in writing and his passion for emerging technology have been a constant source of inspiration to me over the years. Many thanks to my buddy and sometimes-business-partner Scott Foe, who was always supportive of this book, despite the major distraction it created from our day-to-day startup. Last but not least, my family provided the moral support, patience, and loving environment that any author needs to thrive. More than that, they pitched in on the logistics: my 10-year-old, Lucian, gets props for play-testing most of the examples in the book, and my wife, Marina, kept me honest with art direction so that my cobbled-together examples would at least have a consistent look and coherent story.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required