32

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?

Elad Katz
  • 7,483
  • 5
  • 35
  • 66
  • 4
    not a js developer, but I've used [three.js](https://github.com/mrdoob/three.js) easily and it has multiple renderers(WebGL,SVG and Canvas). I played with the Canvas renderer and it works on pretty much all browsers some time ago and the only issue I remember was speed when using texture (because the Canvas renderer basically does all the maths and rendering on the CPU only) so I used colours mostly. Also, my tests did run on iOS and Android, but slower for complex models. Basic/low-poly models work somewhat decent with Canvas even on mobile. See my old examples [here](http://bit.ly/fOLOgM)HTH – George Profenza Nov 26 '11 at 11:33
  • 10
    It's crazy isn't it? Chuck Norris just uses divs: http://www.uselesspickles.com/triangles/ – joeytwiddle Jan 20 '12 at 04:26
  • BTW, to you use WebGL as of now, you essentially need Canvas. WebGL is different from Canvas only in the sense that you get a WebGL Context. WebGL - `document.getElementById('canvas-element').getContext("webgl");`.. Normal 2D Canvas `document.getElementById('canvas-element').getContext("2d"); // if you change to "3d", you can still have 3D drawings, w/o WebGL` – Om Shankar Dec 23 '12 at 16:06

4 Answers4

20

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • It is an eye candy, and if not all browser support it now but will at some point then it's good enough for me, so CSS3 sounds best. As to canvas - it's just not fast enough - rotating a few cubes in space made my computer cringe at 80% cpu. You mentioned SVG - how does SVG fit in the picture? which of them all is likely to be the standard? – Elad Katz Oct 17 '11 at 10:57
  • Canvas and SVG are both well established standards. But canvas is better suited to what you're doing. Also, SVG is not supported by the Android browser until v3.0, which makes for a big hole in support in the current generation of mobiles. I'm surprised by your report that canvas struggles with rotating a few cubes; I've heard reports of it successfully running a full 3D game engine. Not quickly to be sure, but I'd have expected it to cope reasonably well with a few simple cubes. But browsers may vary. Depending on your needs, the other option of course is just to fake it with a 2D animation. – Spudley Oct 17 '11 at 15:48
  • Isn't WebGL indeed a form of Canvas? People say WebGL vs Canvas, but WebGL *is* a Canvas. It's confusing. – johnbakers Jul 25 '13 at 03:45
8

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.

Johan
  • 1,537
  • 1
  • 11
  • 17
7

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

Brad
  • 159,648
  • 54
  • 349
  • 530
gman
  • 100,619
  • 31
  • 269
  • 393
5

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

CatalinBerta
  • 1,604
  • 20
  • 20
  • I think WebGL is supported in most of the browsers(including mobile) except IE. Read here https://www.ichemlabs.com/1375. – Lucky Dec 23 '15 at 06:42
  • Yes, the answer was given almost 1 year ago though. Nowdays, support for WebGL is much higher, horraay for us :) – CatalinBerta Dec 24 '15 at 11:16