Tuesday, November 27th, 2007

Firefox Canvas 3D Extension Available

Category: Canvas, Firefox

When Ben and I gave our latest State of Ajax talk we wanted to show off Canvas 3D. We saw the “moz-gles11” context for Firefox 3, but at the time you had to build that bad boy from source. Riiight.

Now the game has changed. Vladamir has detailed Canvas 3D in Firefox and has created an add-on that we can install:

Over the past few months I’ve been able to do some much-needed code cleanup and put together a preview of what an OpenGL context for canvas could look like.

There are two contexts provided by the extension. “moz-gles11” follows the OpenGL ES 1.1 spec very closely, providing an almost identical API and feature set, and “moz-glweb20” follows OpenGL ES 2.0 closely. Both are implemented directly on top of desktop OpenGL, so you must have support for at least OpenGL 1.5 on the desktop for the “moz-gles11” context and OpenGL 2.0 for the “moz-glweb20” context.

OpenGL was chosen as the base API for a number of reasons. It is a standardized, proven cross-platform API. 3D is a complex subject, and providing a fully-featured API will allow developers to create libraries and toolkits to abstract away the complexity in ways that are specific to their application, without being tied into a specific approach. Using a standard API also allows us to leverage the vast developer base out there who have OpenGL knowledge. OpenGL ES is also the standard for 3D on mobile devices, ensuring that any 3D content will be able to migrate to mobile devices as the web becomes more and more featureful on such devices.

The difficulty with using OpenGL is that the API is not very approachable for web developers; it’s a huge jump going from the 2D canvas API to a full 3D API. My hope is that those developers who are familiar with OpenGL will be able to create helper libraries to make 3D content and manipulation more accessible, much like there are tools such as photo montage scripts that authors can use without having to understand the implementation details. Scene graphs and other frameworks would also provide great fodder for the performance improvement work going on as part of ES4.

I hope to propose the new API to an appropriate standards group after people have had an opportunity to play with the features and provide feedback on the initial implementation. As the core of the API is already a standard, a spec would only need to be written for the specific GL-Web integration points.

He has written a bunch of examples, and there is even a Mandelbrut set.

Posted by Dion Almaer at 7:31 am

3.5 rating from 32 votes


Comments feed TrackBack URI

that would be Mandelbrot, not Mandelbrut

Comment by Les — November 27, 2007

Okay i think it’s really cool that all of this is possible, but OpenGL really is *NOT* a language for the web. I can see all kinds of memory leaks and security holes coming up with code like this. It’s scary if you ask me..

Comment by SchizoDuckie — November 27, 2007

This could be really great for experimenting with OpenGL. Would have been pretty cool for a computer graphics class.

Comment by Adam Sanderson — November 27, 2007

Too bad it doesn’t seem to work with

Comment by Andy — November 27, 2007

Just as scary as running any other webapp or OpenGL application, SchizoDuckie, with all those memory leaks and security holes in every application. Obviously we shouldn’t do something because it could be misused by people who don’t know how to use it.

Comment by AndyB — November 27, 2007

Security is a serious concern, but as AndyB said, that doesn’t mean it shouldn’t be done. We just need to figure out how to define the model for the web such that all data can be checked for correctness. There may well be issues in individual opengl implementations, but that’s no different from problems in any other system library — workarounds and fixes need to be found.

Comment by Vladimir Vukicevic — November 27, 2007

This is very impressive but looks very dangerous… I think it will be something that I will be content to enjoy on other people’s sites for quite some time. I’m green with envy though!

Comment by BookWise — November 27, 2007

Remember where you were at this moment, history in the making!

Comment by vezquex — November 28, 2007

Uhm I installed a nightly build of firefox and the plugin, doesn’t work. :/

Comment by florian — November 28, 2007

Did you remember to enable it via the options? If so, there may be a problem with your OpenGL implementation and/or some incompatibility. There’s a lot of fragility currently with getting the right OpenGL bits.

Comment by Vladimir Vukicevic — November 29, 2007

Leave a comment

You must be logged in to post a comment.