canvas vs. webGL vs. CSS 3d -> which to choose? [closed]

Question

For basic 3d web application i.e. a few cubes, rotation and translation in 3d space - which is better to choose?

CSS 3d seems the easiest, but is not supported on IE9 or on the roadmap for IE10, and offers less control than the other options. Canvas & WebGL seems way more complicated, but I don't know if they are future proof.

Why are there so many different techniques for 3D? which is better? which is future proof?

Answer 1

The reason there are so many different options for 3D is because the whole thing is still in a state of flux -- 3D in the browser isn't a finished standard, and of the options you listed, the only one that works in all currently available browsers is Canvas.

IE in particular is unlikely to give you much joy -- as you say, 3D isn't even slated for IE10 at this point. Having said that, SVG was added to IE9 quite late in the day, so there's always hope. But the reason it's unlikely is that Microsoft have made a point of only supporting features which have been formally ratified as standards.

Of the technologies you listed, Canvas is by far the best supported, but Canvas isn't a 3D technology; it's a 2D canvas, and if you want to have 3D effects in it, you need to write them yourself, and they won't be hardware accelerated.

I guess the real answer to your question depends on how important the feature is for your site. If it's just eye candy, which users of unsupported browsers could live without, then by all means do it with some 3D CSS. But if you need to make it consistent in all current browsers, then do it with Canvas.

I'd tend to recommend not using WebGL for your case, because it sounds like it would be overkill for what you're doing.

3D CSS is probably the right answer, but use Canvas for now, until the rest of the browsers add support for 3D CSS.