Programming 3D Applications with HTML5 and WebGL

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 distraction. 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 attempts, 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. Thankfully, the latest generations of browser makers get this, and have been slowly and steadfastly turning the web browser into a rich media development platform that includes first-rate, hardware-accelerated graphics and an integrated compositing architecture. Put in less flowery words: 3D is here; get used to it.

This book is intended to provide you with the information you need to create production-quality 3D applications for desktop and mobile browsers using graphics technologies available in modern browsers: WebGL, Canvas, and CSS3. It covers related topics such as JavaScript performance, mobile development, and high-performance web design; and it goes deep into tools and libraries that will help make you productive: Three.js, Tween.js, new application frameworks, and the many options for 3D content creation.

Readers of my first book, WebGL Up and Running, will see a fair amount of overlap between that book and the early chapters of this one. This is unavoidable. Much of the material in the early chapters is overview and introductory; as such, it must stand on its own without requiring readers to get the earlier book. Regardless, despite the superficial similarities in the early chapters, readers of the first book will find much additional information. Even the introductory chapters here go far deeper into the material than the first book could afford, given its mission. And once we get past the initial three chapters, the material is almost completely different. WebGL Up and Running was intended to provide readers with an approachable introduction to a new and daunting subject. I like to think that what it lacked in technical rigor, it made up for in enthusiasm; if you came away from reading it with nothing other than an appetite to learn more, I consider my job well done. On the other hand, this book aims to give readers a thorough grounding in both theory and practice, allowing them to emerge from the experience ready to build production 3D applications.

Audience

This book was written for experienced web developers looking to move into 3D development. It assumes that you are an intermediate-level developer with a solid grounding in HTML, CSS, and JavaScript, and at least working familiarity with jQuery. You do not need 3D graphics or animation experience, though it will be helpful. The book provides a basic 3D primer, and explains additional concepts as needed throughout.

How This Book Is Organized

This book is divided into two parts:

Part I, explores the underlying HTML5 APIs and technologies for developing 3D graphics in a browser, including WebGL, Canvas, and CSS3.

• Chapter 1 provides an introduction to 3D application development and 3D graphics core concepts.

• Chapters 2 through 5 dive into WebGL-based programming, covering the core API as well as two popular open source libraries used to develop graphics and animations: Three.js and Tween.js.

• Chapter 6 looks at the new features in CSS3 for creating 3D page effects and user interfaces.

• Chapter 7 describes the 2D Canvas API, and how it can be used to emulate 3D effects on resource-challenged platforms.

Part II, goes hands-on into practical development topics, including the 3D content creation pipeline, programming using application frameworks, and deploying on HTML5 mobile platforms.

• Chapter 8 covers the content creation pipeline—tools and file formats used by artists to create 3D models and animations.

• Chapter 9 looks at using frameworks to accelerate 3D development and introduces Vizi, an open source framework for creating reusable 3D components.

• Chapters 10 and 11 dig into developing specific types of 3D applications: simple applications, oriented toward presenting a single interactive object with animations and interaction; and complex 3D environments with sophisticated navigation and multiple interacting objects.

• Chapter 12 explores issues related to programming 3D applications for the new generation of HTML5-enabled mobile devices and operating systems.

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 element signifies a 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/Programming3DApplications

Note that you must load most of the examples in this book from a web server rather than opening them from the desktop using file:// URLs. This is because the JavaScript code loads additional content assets, such as image files in JPEG or PNG format; because of cross-origin security restrictions in WebGL’s security model, those files must be delivered to the browser from a web server via HTTP.

I run a local version of a standard LAMP stack on my MacBook, but all you really need is the A part of LAMP—that is, a web server such as Apache. Or, if you have Python installed, another option is the SimpleHTTPServer module, which you can run by going to the root of the examples directory and typing:

python -m SimpleHTTPServer

and then pointing your web browser at http://localhost:8000/. There is a great tech tip on this feature at the Linux Journal website.

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.

Note

Note that many of the content assets used in this book are subject to copyright. Their creators have kindly granted me permission to redistribute them for use with the book for the sole purpose of supporting the programming examples included. For any other purpose, including and especially use in your applications, you must obtain your own copies of those assets, which may include purchasing a license.

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: “Programming 3D Applications with HTML and WebGL, by Tony Parisi (O’Reilly). Copyright 2014 Tony Parisi, 978-1-449-36296-6.”

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

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/program-3d-apps-html5-webGL

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

[e-mail]

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

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. My editor, Mary Treseler, is an amazing coach who helped me rise to meet the many challenges that come with a sophomore book effort. This book took almost a year to write—an eternity in Internet time—and as a result, I restructured the work several times as technologies evolved and audience needs changed. Mary was extremely patient and supportive throughout. Development editor Brian Anderson provided timely and useful feedback on chapter structure and flow, and editorial assistant Meghan Connolly displayed Herculean production skills in moving my raw Word files through O’Reilly’s production pipeline.

I am grateful for the excellent technical reviews done by Ray Camden, Raffaele Cecco, Mike Korcynski, and Daniel Smith. Their detailed comments helped me clarify many concepts and strengthen the programming examples. Equally important, their overwhelmingly positive reactions to the book reinforced that I was on the right track with the material.

A lot of 3D content goes into crafting a graphically oriented programming book. My eternal gratitude goes to art director TC Chang for working so closely with me on the Futurgo concept car featured in Chapters 10 through 12. This is arguably the showpiece of the book, and it couldn’t have come out better. I would also like to thank the 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 TurboSquid artists whose content is featured here.

We are fortunate to have a strong community of 3D web developers pushing the envelope. I would like to thank the Three.js team, especially creator Ricardo Cabello (“Mr.doob”), for their pioneering work. Ken Russell and Brandon Jones of Google are among the folks building world-class WebGL implementations, but they are never too busy to answer questions, provide insights into why the API was designed in a certain way, and share thoughts on where the technology is going in the future. Outside of WebGL, there is a vibrant world of 3D in CSS and the 2D canvas. David DeSandro, Keith Clark, and Kevin Roast have done breakthrough development in these domains and kindly allowed me to reference their work. Also, I would be remiss if I didn’t give a big shout-out to my friend Don Olmstead, whose design sessions with me a few years back resulted in what has ultimately become Vizi, my new framework for 3D development that is heavily featured in this book.

Finally, I would like to thank my family. They were patient beyond expectation as I wrote this book while working full time and juggling several other commitments. Marina and Lucian, I owe you a vacation—or three.