Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


Some of the more notable effects in HTML5 are graphical ones, and the most intricate graphics are 3D, rather than 2D. In this Breakdown, you'll learn about the 3D canvas abilities that HTML5 offers. You'll also need to get your math hat on, because you'll be performing complex transformations, as well as setting up cameras and lighting. If that sounds more like a movie than a web page, then this video will open your eyes to a brand new Web.

The experts in the O'Reilly Breakdown live video series not only break down the concepts of difficult and complex subjects, they also demonstrate practical implementation and use. Each episode features an experienced programmer, developer, or software designer working on real-world challenges, ranging from iPad user interface design and multi-tasking on Android phones to caching in cloud-based applications.

Subscriber Reviews

Average Rating: 3.75 out of 5 rating Based on 4 Ratings

"OpenGL and 3D in HTML5" - by TDS on 17-AUG-2011
Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
Something is wrong with the video and it needs to be fixed.
Report as Inappropriate

"Fine Overview, Well-Conceived and Executed Tech" - by Dimitri.Darras on 10-FEB-2011
Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
An excellent overview that left me wanting for more, which I'll detail below with questions and comments.

In general, the JavaScript renaissance is a very heartening thing to see for front-end developers who may have had difficulty getting access to back-end or low-level programming such as C++ and computer graphics.   That engineers have paved the way for highly complex effects and math AND found a way to bring it to the front-end it a marvel.

Beyond this audience however, WebGL has greater ramifications for efforts towards standards-based 3D on the web and is the most exciting thing I've seen since the web itself (I've said this before about something else and been wrong - except this time the gut-feel is right).  

I am pleased that David Griffiths mentions alternative I/O such as Kinect as 3D necessitates a user interaction schema beyond the keyboard and mouse.


-To what extent can the WebGL JavaScript interface with dynamic feeds and how does that tax the browser?  I.E. How many database/XML feeds or overlays giving data about each planet would slow down overall rendering?  What is the best way to measure this?

-How do you import COLLADA or other 3D file formats for models created with open-source or proprietary technology?

-How does the browser handle OpenGL memory?

-Do the models "live" in the card or in the browser front-end?  How do you "view source" the raw OpenGL code?

-(Related) To what extent can content authors and developers protect their work? Should they?

-How does OpenGL scale - meaning, will pages authored today render in 20 years? 200?

-What is the official specification road map and is IEEE/WC3 compliance on the horizon?


-I had audio issues in the video especially towards the end of the chapters (Firefox - not the WebGL one)

-Instead of down-playing the math involved, it would be good to know more about it or at least discuss how much of it is higher-level versus something that most casual developers already have some exposure to.  

-I have not worked through the code, but possibly more camera time on it would help digest it.  Then again, I could always stop the video

-Spacialized audio could be an interesting topic

Report as Inappropriate

Table of Contents



HTML Takes on the Universe



Drawing and Shading Spheres

Play Video


Setting Up a Camera



Texturing and Lighting Objects



Transforming the Earth



Controlling and Moving a Camera




The publisher has provided additional content related to this title.


Visit the errata page for OpenGL and 3D in HTML5

  • Errata

Visit the catalog page for OpenGL and 3D in HTML5

  • Catalog Page