• Introduction
• Prototyping work done
• Examples

Introduction

Ever since Apple introduced the canvas element into Webkit, there has been interest and speculation about the displaying of 3D graphics though scripted bitmap graphics natively in web-browsers. This speculation is particularly fuelled by the "2d" initialising parameter using for the Javascript canvas object. Recently, both the Opera and Mozilla teams have been working towards the goal of having a 3d context type, and both have released technical demonstrations of their browsers with 3d support.

• Opera
• Mozilla Firefox

The two browser makers have more or less been given a free reign when it comes to how they implement a 3d context as the current draft of the HTML 5 specification simply states:

Basing the API upon OpenGL ES is exactly how the Mozilla implementation is done, driven by Vladimir Vukićević. The OpenGL API is mapped in a 1-1 manner, exposing it to Javascript, and allowing people who know OpenGL to readily work with this context. Opera opted to experiment with a different API, defining their own, new, set of manipulation functions and properties which, like Javascript in general, reduces the barrier of entry to those just starting to look at 3D.

I'm particularly interested in 3D UI techniques at the moment, and experimenting with Canvas 3D seemed like the perfect way of starting to get to grips with 3D programming (I always get very depressed when I see the amount of code needed to do even the simplest things in OpenGL), and I decided to use the Opera implementation to see what it (and I) can do. Opera released an experimental build with Canvas 3D and Video (HTML 5 tag) support, which I used, and you will need to download it to view the examples on this page.

Prototyping work done

An example of the Canvas 3D context was made by grafio and published on his My Opera pages. The first task I set about was adding mouse controls to his excellent example, such that you can click and drag to change the view of an object. This is implemented in the examples shown below (note that it is limited - but is a good prototype).

The next thing to do was to draw a 3D model from a source file. There are a lot of 3D formats available, but the Collada format has been gaining popularity recently, and it seemed like the natural choice (the specification is open and well written). I have not written a complete Collada parser, nor do I particularly intend to, but rather a very simple one, which will parse some Collada models and render them in Opera's 3D canvas object. The Opera canvas 3D object is very much in it's infancy and is currently missing a number of methods that would be needed to display complex models. However, I'm sure the API will mature in future, and it's certainly been fun using it thus far.

The source code I've written to display Collada models is open source (LGPL) and can be downloaded below. If you are interested in how I've implemented this, I encourage you to have a look at the source, or contact me if you have any questions!

• Collada model viewer for Opera's 3D canvas

Examples

Enough with the words, let's view a few examples. To load different models, click the links below. Furthermore, to view these demos you will need to download the Opera build with 3D canvas support (more information) - note this is Windows only at the moment, sorry.

Enjoy!