Programming 3D Applications with HTML5 and WebGL (2013)

Appendix A. Resources

This appendix lists 3D web development resources by category. I frequent many of the following sites to find the latest technical information, libraries, tools, cutting-edge demos, and thought pieces by leaders in the 3D development community.

WebGL Resources

The WebGL Specification

The WebGL standard is developed and maintained by the Khronos Group, the industry body that also governs OpenGL, COLLADA, and other specifications you may have heard of. You can find the latest version of the official WebGL specification on the Khronos website.

WebGL Mailing Lists and Forums

Khronos maintains a public mailing list to discuss drafts of the WebGL specification. You can subscribe to the list public_webgl@khronos.org by following the instructions at http://www.khronos.org/webgl/public-mailing-list/.

There is also a Google group for discussing more general WebGL development topics outside of the core specification. You can sign up for this list at http://goo.gl/CJIvC4.

WebGL Blogs and Demo Sites

There are many fantastic blog sites devoted to WebGL development. Here are some that I visit on a regular basis:

Learning WebGL

The granddaddy of WebGL sites, created by Giles Thomas and currently maintained by me. This should be your very first stop to learn the basics of low-level WebGL programming and use of the API. It also features a weekly roundup of the latest WebGL demos and development projects.

Learning Three.js

The blog site of Jerome Etienne, focused on Three.js techniques and hands-on development.

TojiCode

Google engineer Brandon Jones’s blog, featuring a wealth of in-depth technical information on the WebGL API and expert development topics.

Three.js on Reddit

A Reddit for Three.js, maintained by Theo Armour and updated frequently. This Reddit is a grab bag of demos, techniques, news, and articles.

WebGL.com

Curated by New York–based Darien Acosta, this is a site for discovering new WebGL games, demos, and applications.

WebGL Mozilla Labs Demos

Demos created by Mozilla Labs and partners.

WebGL Chrome Experiments

Demos created by Google and partners.

WebGL Community Sites

I host a WebGL Meetup group for the Bay Area. There are also WebGL Meetups in Los Angeles, New York, Boston, London, and elsewhere. Meetups are a good way to get together with like-minded individuals. If you don’t live around San Francisco, search Meetups.com for a WebGL group in your area, or start one yourself!

There is also a LinkedIn group and a Facebook page.

CSS3 Resources

CSS3 Specifications

The World Wide Web Consortium (W3C) maintains the core CSS3 specifications covering 3D transforms, transitions, animations, and filter effects:

CSS Custom Filters, covered in Chapter 6, is primarily championed by Adobe. It is not yet widely supported in browsers—at the moment it is only in Chrome—so you should take care when developing with it. The latest information can be found at http://adobe.github.io/web-platform/samples/css-customfilters/.

CSS3 Blogs and Demo Sites

David DeSandro, currently working at Twitter, has created the best resource for understanding how to use CSS 3D transforms.

Codrops, a web design and development blog, has several great demos of CSS 3D effects, including the 3D Book Showcase highlighted in Chapter 6.

Dirk Weber’s HTML5 development site, http://www.eleqtriq.com, features several compelling CSS 3D demonstrations.

Keith Clark has pushed the CSS envelope, creating a mind-blowing first-person shooter demo entirely in CSS 3D.

Microsoft’s Kirupa Chinnathambi provides deep information about CSS Transitions and Animations. In particular, see the articles at http://bit.ly/kirupa-transitions and http://bit.ly/kirupa-animations.

Bradshaw Enterprises has several worthwhile articles, how-tos, and resources for learning about CSS3 transitions, transforms, animations, and filter effects.

Canvas Resources

Canvas 2D Context Specification

The 2D Canvas API specification is maintained by W3C. You can find the latest specification at http://www.w3.org/TR/2dcontext2/.

Canvas 2D Tutorials

As discussed in Chapter 7, developers can create 3D applications that are rendered with the 2D Canvas API using Three.js or K3D/Phoria (described shortly). These libraries hide the details of 2D Canvas rendering, providing high-level 3D constructs to program with. However, if you want to learn about what is under the hood in the 2D Canvas API, there are a host of resources online. Here are a few links that I found quite helpful in doing research for the book:

Frameworks, Libraries, and Tools

3D Development Libraries

The last few years have seen the emergence of several open source 3D JavaScript libraries. Here is a list of some good ones, in no particular order:

Three.js

By far the most popular scene graph library for developing WebGL applications, Three.js has been used to develop many of the well-known flagship WebGL demos. It provides an easy, intuitive set of objects that are commonly found in 3D graphics. It is fast, using many best-practice graphics engine techniques. It is powerful, with several built-in object types and handy utilities. Three.js also features a plug-in rendering system, allowing 3D content to be rendered (with some restrictions) to the 2D Canvas API, SVG, and CSS3 with 3D transforms. Three.js is well maintained, with several authors contributing to it.

SceneJS

An open source 3D engine for JavaScript that provides a JSON-based scene graph API on WebGL, SceneJS specializes in efficient rendering of large numbers of individually pickable and articulated objects as required by high-detail model-viewing applications in engineering and medicine. SceneJS also supports physics and provides some higher-level constructs than Three.js, such as an event model and jQuery-style scene graph API.

GLGE

GLGE is a JavaScript library intended to ease the use and minimize the setup time of WebGL, so that developers can then spend their time creating richer content for the Web. GLGE has good support for the basics but is not as feature-rich as either Three.js or SceneJS.

K3D and Phoria

K3D, and its successor Phoria, render 3D graphics using only the 2D Canvas API. Phoria is the creation of UK-based Kevin Roast (http://www.kevs3d.co.uk/dev/; @kevinroast on Twitter). Kevin is a UI developer and graphics enthusiast. While Phoria is early in its development and not as feature-rich as Three.js, it is very impressive. In particular, it is fast and does a great job with shading and textures. However, given that Phoria is built with a software renderer, it is limited in its 3D capabilities. Certain 3D features are nearly impossible to implement (or implement well) in software only.

3D Game Engines

We are now seeing many WebGL game engines hit the market. These libraries are a good choice for building games and complex 3D applications, but perhaps are overkill for simple 3D development projects. (For more on this, see the next section on frameworks.) Unless otherwise stated, the game engines listed here are open source:

playcanvas

London-based playcanvas has developed a rich engine and cloud-based authoring tool. The authoring tool features real-time collaborative scene editing to support team development; GitHub and Bitbucket integration; and one-button publishing to social media networks. As of this writing, playcanvas distributes the source code to the client engine; however, it has not published licensing terms.

Turbulenz

Turbulenz is an extremely powerful, open source, royalty-free game engine, packaged as a downloadable SDK. The company charges royalties if developers want to publish through its network. Turbulenz is the most intense of the APIs, with a huge class set and steep learning curve. It is definitely for experienced game developers. Turbulenz offers its client-side library in open source, reserving other parts of the system (server, virtual economy, etc.) for revenue generation.

Goo Engine

Goo recently released an invite-only beta of its engine and content creation tool. In addition to its engine, the company offers an easy-to-use content creation frontend targeting mainstream web developers. As of this writing, Goo is not open source.

Verold

A lightweight publishing platform for 3D interactive content developed by Toronto-based Verold, Inc., which describes it as “a no-plugin, extensible system with simple JavaScript so that hobbyists, students, educators, visual communication specialists and web marketers can integrate 3D animated content easily into their web properties.” Like Goo, Verold is targeting general web graphics development with a simplified frontend to a complex game engine. As of this writing, Verold is not open source.

Babylon.js

Babylon.js, developed by Microsoft employee David Catuhe as a personal project, is an easy-to-use engine that lies somewhere on the spectrum between Three.js and a hardcore game engine, in terms of feature set and ease of use. The demo site shows a range of applications, from space shooters to architectural walkthroughs.

KickJS

An open source game engine and rendering library created by Morten Nobel-Jørgensen, this project grew out of his academic work. KickJS appears to have less development and support behind it than the other game engines listed here. It is included in the study primarily because, of any of the game engines covered, KickJS most closely follows established best practices in modern game engine design.

3D Presentation Frameworks

The need to rapidly accelerate 3D development has led to the creation of several experimental presentation frameworks. Unlike a full game engine, the emphasis of these frameworks is fast and easy embedding of graphics on a page, for data visualization, product viewing, simple animations, and so on.

Voodoo.js

The goals of Voodoo.js are to make it easy to create 3D content, and easy to integrate it into web pages. Voodoo.js features an extremely simple API for adding 3D models to web pages: just supply the model URL, the id of a DIV element, and a few configuration parameters, and you have 3D on a page. Voodoo.js does little beyond simple model viewing on a page, but for that use alone it is good.

tQuery

tQuery is the creation of Jerome Etienne, who operates the popular blog site Learning Three.js. Modeled after the jQuery library, tQuery aims to provide “Three.js Power + jQuery API Usability”—that is, a very simple API to the Three.js scene graph. It uses a chained-function programming style and supports high-level interactive behaviors via callbacks. Using tQuery can save many lines of Three.js handcoding. It is probably not accurate to call tQuery a framework, since it is more of a nonintrusive library in the spirit of jQuery. tQuery can be a timesaving boon for Three.js developers looking to save a few keystrokes.

PhiloGL

PhiloGL is an experimental package that was created by data visualization scientist Nicolas Garcia Belmonte while working at Sencha, Inc.’s labs. The goal of PhiloGL is “to make WebGL programming as fun and easy as developing with any of the mainstream frameworks.” Garcia describes his design philosophy in this introductory blog posting. Even though this framework is experimental, it merits a look. Sencha, Inc., develops world-class user interface frameworks and knows a thing or two about creating effective user interfaces with HTML5. The PhiloGL website contains several working examples, including a port of the entire set of tutorials from Learning WebGL.

Vizi

A presentation framework of my own design, Vizi embodies several years of experience developing earlier 3D frameworks and engines (such as VRML and X3D). Vizi incorporates current game engine best practices, most notably its use of components and aggregation to build higher levels of functionality, versus class-based inheritance. The goal of Vizi is to make it easy to quickly build interesting 3D applications. Like Voodoo.js, Vizi allows the developer to drop a model into a page with a few lines of code; however, it also provides a complete high-level API for adding interaction, animations, and behaviors to any element in a scene.

3D Authoring Tools

Traditional modeling and animation packages

Autodesk supplies a range of 3D modeling and animation software packages. Prices tend to be on the higher side, though the company is beginning to offer learning and trial editions that merit a try.

In addition to the Autodesk professional suites, there are several free or very affordable packaged software options for creating 3D content, including:

Blender

A free, open source, cross-platform suite of tools for 3D creation, Blender runs on all major operating systems and is licensed under the GNU General Public License (GPL). Blender was created by Dutch software developer Ton Roosendaal, and is maintained by the Blender Foundation, a Netherlands-based nonprofit organization. Blender is extremely popular, with the foundation estimating two million users. It is used by artists and engineers from hobbyist/student level to professional.

SketchUp

SketchUp is an easy-to-use 3D modeling program used in architecture, engineering, and to a lesser degree, game development. You can find free and low-cost professional SketchUp downloads at their site.

Poser

An intermediate 3D tool for character animation, Poser, like SketchUp, is priced attractively and targets a casual content creation audience. It has an intuitive user interface for posing and animating characters. Poser comes with a large library of modeled, rigged, and fully textured human and animal characters as well as set background scenes and props, vehicles, cameras, and lighting setups. Poser is used to create both photorealistic still renderings and real-time animations.

Browser-based integrated environments

With cloud computing and the ability to render in WebGL, we are seeing a new kind of authoring tool: the in-browser 3D integrated development environment. The following tools are still early in development but very promising.

Goo Create

The Goo engine, described earlier, comes with an easy-to-use content creation frontend targeting mainstream web developers. Goo Create also features several prebuilt models and animations to get developers started.

Verold Studio

Verold Studio is a browser-hosted 3D content creation tool and programming environment that comes with the Verold game engine, described previously.

Sketchfab

Sketchfab is a web service to publish and share interactive 3D models online in real time without a plugin. With a few clicks, the artist can upload a 3D model to the website in any of several formats, and get the HTML code for sharing an embedded view of the model, hosted on the Sketchfab website.

SculptGL

A free and open source web-based solid modeling tool with a very easy-to-use interface for creating simple sculptured models, SculptGL features export to various formats, and direct publishing to both Verold and Sketchfab.

Animation Frameworks

Today’s applications should use requestAnimationFrame() to animate content. To ensure cross-browser support for this feature, use Paul Irish’s great polyfill.

For simple tween-based animations, Tween.js is a popular open source tweening utility created by Soledad Penadés.

For key frame animation, there are some built-in classes that come with Three.js, and a few more in the examples shipped with the project. This is an area that will evolve as more tools come online and web-friendly content formats like glTF mature.

Debugging and Profiling WebGL Applications

New versions of browsers come with a variety of WebGL debugging and profiling tools. Patrick Cozzi, graphics architect at AGI (developer of Cesium, a WebGL-based virtual globe and map engine), has compiled an excellent roundup of browser built-in WebGL tools.

Mobile 3D Development Resources

Adding touch support is key to creating compelling mobile 3D applications. The browser touch events specification can be found on the W3C recommendations pages.

Android’s developer pages contain thorough information on developing HTML5-based web apps.

Amazon has an extensive system for publishing web apps, including a Web App Tester application for the Android-based Kindle Fire OS, and an app distribution portal for packaging and distributing the final app.

On environments that do not natively support WebGL, such as iOS, there are “hybrid” technologies for building applications that combine HTML5 and JavaScript with native code. While Adobe’s PhoneGap is the kingpin of mobile hybrid libraries, it does not currently support WebGL. For WebGL support on iOS, use one of the following hybrid frameworks:

CocoonJS

CocoonJS runs on Android and iOS. It hides the details of the underlying system in an easy-to-use application container for HTML5 and JavaScript code. It provides implementations of Canvas, WebGL, Web Audio, Web Sockets, and more. CocoonJS also comes with a system for building projects in the cloud, so all you have to do is sign your project and build it; developers do not need to understand the intricacies of creating applications using native platform tools such as Xcode for iOS. CocoonJS is a closed source project tightly controlled by its developer, San Francisco–based Ludei.

Ejecta

An open source library that supplies many of the same features as CocoonJS, but for iOS only, Ejecta was born out of ImpactJS, a project to create a game engine for HTML5. Ejecta is a bit more DIY, requiring the developer to have a fair amount of knowledge about Xcode and native platform APIs. Ejecta is open source.

3D File Format Specifications

3D file formats fall into three general categories: model formats, used to represent single objects; animation formats for animating key frames and characters; and full-featured formats that support entire scenes, including multiple models, transform hierarchy, cameras, lights, and animations. There are many 3D file formats, too numerous to list here.

The following 3D formats are best suited for developing web applications.

Model Formats

§ Wavefront OBJ

§ STL—text-based 3D printing file format

Animation Formats

§ id Software MD2 and MD5—character animation formats

§ BioVision BVH animation format for motion capture

Full-Scene Formats

§ VRML and X3D—the original web 3D formats

§ COLLADA—digital asset exchange schema

§ glTF—Graphics Library Transmission Format

Related Technologies

3D development doesn’t happen in a vacuum. There are other interesting web technologies that you may want to consider incorporating into your 3D projects. Here are a few.

Pointer Lock API

For full-screen 3D applications such as games, you might want to have finer control over mouse input than the traditional DOM windowed events provide. To that end, browsers recently introduced the Pointer Lock API, which allows developers to hide the mouse cursor and get low-level mouse motion events in the style required for game development.

John McCutchan of Google has written a nice introduction to using the Pointer Lock API.

You can find the current W3C specification for the Pointer Lock API at http://www.w3.org/TR/pointerlock/.

Page Visibility API

Sixty-frame-per-second 3D applications can consume machine cycles. If the tab or window for an application is not currently visible, then there is no need to render the scene. Also, the application might still want to compute results when it is in the background, but just not as frequently. Recent browsers support a new feature, the Page Visibility API, that allows developers to know when pages or tabs aren’t visible, and adjust execution accordingly to conserve machine resources.

There is a good overview of the Page Visibility API on Google’s developer site.

You can find the current W3C specification for the Page Visibility API at http://www.w3.org/TR/page-visibility/.

WebSockets and WebRTC

If you are developing a multiplayer 3D game, virtual world, or real-time collaborative application, you will need to implement communication between web clients and servers. Two technologies for doing this are WebSockets and WebRTC.

WebSockets (more formally, the WebSocket specification) is a standardized browser implementation of the TCP/IP protocol. It can be used for two-way communication between clients and servers. TCP/IP was not originally designed for real-time communication, so WebRTC (described next) may be more appropriate, depending on the needs of your applications. There is a tutorial on WebSockets, and you can visit the main WebSockets project page.

WebRTC is a standard for sending real-time messages between web clients and servers. It may be more suitable for multiuser messaging than the WebSocket protocol, as it was designed from the ground up for real-time messaging. For a tutorial, refer tohttp://www.html5rocks.com/en/tutorials/webrtc/basics/. The main project page, maintained by Google, is at http://www.webrtc.org/, and the current W3C recommendation is located at http://www.w3.org/TR/webrtc/.

Web Workers

Web Workers support multithreaded programming in JavaScript. 3D applications can benefit from doing certain tasks in background threads, such as loading models or running physics simulations. By performing those tasks in the background, the application can ensure that the user interface is always responsive, even when the application is handling computationally intensive operations.

There are subtleties to using Web Workers, such as passing memory objects between threads. There is a great article on HTML5 Rocks that goes into the details.

IndexedDB and Filesystem APIs

3D files can get big. For your projects, you may want to consider using new HTML5 technologies that can help save download overhead by storing your data locally on the user’s hard drive. Browser caches can’t be relied on, because they aren’t that big, and they are not under application control—the user can clear the cache at any time, or other web data may push your application’s content out of the cache.

Ray Camden, a developer evangelist at Adobe and one of the technical reviewers for this book, mentioned the idea of using IndexedDB, the browser database API, to store local data. He wrote an article on the topic in the context of developing rich SVG applications. You can find the IndexedDB specification at http://www.w3.org/TR/IndexedDB/.

IndexedDB is not a filesystem, however. It is a database API. If you want to store and retrieve content on the user’s computer using a filesystem-style API, you are in luck. There is an experimental API called the FileSystem API. With this API, web applications can read and write files and hierarchical folders on the user’s hard drive. There is an excellent tutorial located on HTML5 Rocks. Note that the FileSystem API is currently supported only in desktop Chrome and Opera. Also note that this API is not to be confused with the File API, which allows only for read access to the local filesystem.