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 idea. Once you look past the well meaning but naïve overreaches of the earlier 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 an architectural walkthrough, a virtual world, a molecular model, or any of a host of 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 rich media development platform that includes first-rate, hardware-accelerated graphics and a well thought out 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 3D technologies available in modern browsers: WebGL, Canvas, and CSS. It covers related topics such as JavaScript performance, Web Workers and high performance web design; and it goes deep into tools and libraries that will help make you productive: Three.js, Tween.js, and the many options for 3D content creation and conversion.

You are holding in your hands the Early Release of my new book. It is about 40 percent complete. By being part of the Early Release program, you will see new chapters hot off the press— be that for good or ill. I like to think that this is the beginning of a partnership between us. If there is something you like, let me know. Conversely, critical feedback is also welcome, and your early participation promises to make this a stronger title. The accompanying table of contents gives a sense of exactly what the book is going to include, but it is still preliminary.

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 first five 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 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 – Foundations explores the underlying HTML5 APIs and technologies for creating 3D web graphics, including WebGL, Canvas, and CSS3. It also covers the open source libraries, frameworks and production tools needed to build applications.

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

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

  • Chapter 6 explores the new features of CSS3 used in 3D development.

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

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

Part II - Application Development Techniques goes hands-on into several practical application development topics.

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

  • Chapters 10 through 13 look into developing specific aspects of 3D applications: 3D user interface; simple environments for single-model; complex 3D environments; and integrating 2D and 3D into seamless presentations.

  • Chapters 14 and 15 cover topics related to production 3D deployment: mobile development and performance.

  • Chapter 16 explores application case studies that combine various techniques from the book.

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

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

This icon indicates a warning or caution.

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

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: “Programming 3D Applications with HTML5 and WebGL by Tony Parisi (O’Reilly). Copyright 2013 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 .

Safari® Books Online

Safari Books Online (www.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://shop.oreilly.com/product/0636920029205.do.

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