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

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?

Solution 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.

Solution 2

I know this is 2 years old but I figure I'd post this here for future readers.

What to choose depends on what you need.

Do you need a simple 3d shape with no or little animations? Try if you can do it with CSS3, that's the easiest by far. For IE you can probably get a library that offers support.

Do you need some sweet 3d models with nice graphics and that can do all kinds of stuff? Go WebGL, you can't ask for more control AND performance for 3d in browsers.

Do you need 3d shapes that can do all kinds of stuff, but don't need textures and will work everywhere and won't require much performance? Go Canvas.

CSS3 is just for the eye-candy. You can make it rather easily, style it any way you want and is very easily maintainable. Once you want to do more than just eye-candy, put on your gloves because that is gonna reuire some work.

With 2d Canvas you can make 3d stuff. If you're new to it, it will be very annoying and complicated (to name one example; you need to know of matrices), You can pretty much do anything with 2d canvas that you can do with WebGL but some thing will be easier in WebGL (seriously, if going 2d Canvas, don't try to use textures, it's a nightmare). WebGL uses OpenGL which, in a nutshell, means it will always outperform 2d Canvas.

However, WebGL requires the user to have a compatible video card.

Solution 3

I really depends on what you are trying to do. How simple is simple?

3D CSS is far from usable. It's only just made it into firefox. It's buggy in both firefox and chrome. It's not working in FF9 beta on OSX. It's also got issues in Chrome up through at least 16. See http://greggman.com/downloads/examples/intersecting-elements-3d-css.html and compare Safari on OSX to pretty much any other browser.

three.js (https://github.com/mrdoob/three.js/) used to (and maybe still does) provide some simple 3d using canvas.

Otherwise if you want anything interesting go WebGL and pick a library (three.js, SceneJS, etc..)

You've got to make a choice. Use WebGL and give up IE, Use Flash 11, Use Unity3D, use Canvas and get very limited 3d, or don't do 3d.

WebGL is already being used by major sites. CNN is now using WebGL http://www.stinkdigital.com/en/work/ecosphere

Solution 4

Everyone is probably tired of hearing 'it depends', but...it depends!

There's a little "war" going on as to whether it's better to use Canvas or HTML/CSS3, and namely because Canvas is slower than DOM on older machines/devices. Yeap, DOM is way faster in some cases, while canvas is faster on most modern browsers/devices.

WebGL - Best option for both 2D and 3D, but since it is not well enough supported across browsers and devices, you'll have to offer fallback to canvas or DOM whenever necessary.

Canvas - Less suitable for 3D comparing to WebGL, but more suitable for compatibility, community, tools etc

DOM - Faster than most think, if used right, highest support around, but you cannot go too fancy animation/gaming-wise.

Hope this helps

View more solutions