Anne van Kesteren

canvas 3D

So Opera has been working on a 3D context for the canvas element. It was done somewhere last summer, but we never showed it until today. Håkon presented two demos in his talk earlier this day at XTech. One showed how you could walk around in a 3D room like in games.

Two days before Vladimir Vukićević from Mozilla said he is planning on providing a plugin for Firefox that provides a 3D drawing API for the canvas element and he demonstrated something as well. Pretty cool. Now we only need some common API that meets the requirements from both sides (or more sides, if more implementations show up).


  1. As long as it looks as bad as this, I'm not sure there's a need. Let's improve canvas2d and SVG first.

    Posted by Sjoerd Visscher at

  2. This thing is sampled down a bit, but sure, all 3D stuff is experimental mostly.

    Posted by Anne at

  3. My vote also goes to SVG first! But marketing requires features, so that is probably one of those things...

    Posted by me at

  4. At last you can port Doom to the browser platform?

    Posted by Rahul at

  5. In reality it looks better than the picture shows, as yes, the picture has been scaled, making it look quite pixelated (couldn't you get a smooth scaling image editor Anne? :P ) Especially when it is animated with such clarity, it really does look good - a lot of it depends on what the author chooses to use, just like any 3D computer game.

    But before everyone starts suggetsing that SVG is better or worse, they are separate technologies with their own focuses and uses. They are both being developed, and neither is at the expense of the other. So please do not worry, SVG is being worked on as well.

    Posted by TarquinWJ at

  6. Also bare in mind that this screenshot comes from an early demo of 3D canvas. It might not look super nice, but still the few features it presents ( tiled textures, blending modes ) are hardly what it takes to remake Quake 1 & 2, Descent, ... try to imagine the possibilities.

    Posted by Mathieu 'p01' HENRI at

  7. Looks exciting! Can I overlay SVG on top of this canvas for my UI? Please consider this option.

    Posted by Jeff Schiller at

  8. Can I overlay SVG on top of this canvas for my UI?

    Jeff: The screenshot is using a <canvas> element with a custom 3d rendering context, and you should be able to do the same with this element you ordinarily would be able to do with other elements.

    BTW, we have some more screenshots here.

    Posted by Arve Bersvendsen at

  9. A doom-like game has already been made in canvas. Was quite nice to play actually - but Javascript just wasn't made to do this, so I'd be very much in favour of making sure all parts are up to (and efficiend for) displaying 3D. Cos if we do something, let's do it right.

    Posted by James AkaXakA at

  10. A doom-like game has already been made in canvas.

    Small picky correction : In a Wolfenstein-like game, only the walls are raycasted and the levels are based on a regular grid, in a Doom-like game the floor and ceiling are also raycasted and the walls are positionned freely.

    There has a been a few Wolfenstein-like games and engines in JavaScript, and at least one proof of concept using Canvas, but no Doom-like game has ever been released in JavaScript. ... though I know of one that is technically between Wolfenstein and Doom.

    Posted by Mathieu 'p01' HENRI at

  11. My vote also goes to SVG first! But marketing requires features, so that is probably one of those things...

    Canvas 2D wraps a PDF imaging model-like 2D API. Canvas 3D wraps OpenGL ES. In both cases, the implementation of the JavaScript wrappers for existing drawing operation-oriented graphics pipelines is significantly less work than implementing SVG or X3D, so it would be silly to have a policy that you couldn’t add simpler things unless you have completed SVG.

    Posted by Henri Sivonen at

  12. Since management of OpenGL is being transferred for the ARB to the Khronos Group, which is responsible for OpenGL ES, perhaps representitives from Mozilla, Opera and Khronos should all meet to discuss a 3D context for <canvas>.

    Posted by Matthew Raymond at