Html canvas vs. webGL vs. CSS 3d -> 选择哪个？

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

提问by Elad Katz

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

对于基本的 3d Web 应用程序，即 3d 空间中的几个立方体、旋转和平移 - 选择哪个更好？

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.

CSS 3d 看起来最简单，但在 IE9 或 IE10 的路线图上不受支持，并且提供的控制比其他选项少。Canvas 和 WebGL 似乎更复杂，但我不知道它们是否是未来的证明。

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

为什么 3D 有这么多不同的技术？哪个更好？这是未来的证明？

采纳答案by Spudley

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.

3D 有这么多不同选项的原因是因为整个事情仍然处于不断变化的状态——浏览器中的 3D 不是一个完成的标准，在你列出的选项中，目前唯一一个适用于所有可用的浏览器是 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.

特别是 IE 不太可能给您带来太多乐趣——正如您所说，此时 3D 甚至还没有计划用于 IE10。话虽如此，SVG 是在当天晚些时候添加到 IE9 中的，所以总是有希望的。但不太可能的原因是 Microsoft 已经明确表示只支持已正式批准为标准的功能。

Of the technologies you listed, Canvas is by farthe 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.

在您列出的技术中，Canvas 是迄今为止支持最好的技术，但 Canvas 不是 3D 技术；它是一个 2D 画布，如果您想在其中添加 3D 效果，则需要自己编写它们，并且它们不会经过硬件加速。

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.

我想您问题的真正答案取决于该功能对您网站的重要性。如果它只是眼睛糖果，不受支持的浏览器的用户可以没有它，那么一定要使用一些 3D CSS。但是如果你需要让它在所有当前浏览器中保持一致，那么用 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.

我倾向于建议不要在您的情况下使用 WebGL，因为这听起来对您正在做的事情来说太过分了。

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

3D CSS 可能是正确的答案，但现在使用 Canvas，直到其他浏览器添加对 3D CSS 的支持。

回答by Johan

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

我知道这已经 2 岁了，但我想我会在这里发布它以供未来的读者使用。

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.

您是否需要一个没有动画或动画很少的简单 3d 形状？试试看，如果你能用 CSS3 做到这一点，这是迄今为止最简单的。对于 IE，您可能可以获得一个提供支持的库。

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.

您是否需要一些具有精美图形并且可以做各种事情的甜美 3d 模型？转到 WebGL，您不能在浏览器中要求更多的 3d 控制和性能。

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.

您是否需要可以做各种事情的 3d 形状，但不需要纹理并且可以在任何地方工作并且不需要太多性能？去画布。

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.

CSS3 只是为了吸引眼球。你可以很容易地制作它，以任何你想要的方式设计它并且非常容易维护。一旦你想做的不仅仅是吸引眼球，戴上你的手套，因为那会需要一些工作。

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.

使用 2d Canvas，您可以制作 3d 内容。如果您不熟悉它，它将非常烦人且复杂（举个例子；您需要了解矩阵），您几乎可以使用 2d 画布做任何可以使用 WebGL 做的事情，但有些事情会更容易在 WebGL 中（说真的，如果要使用 2d Canvas，请不要尝试使用纹理，这是一场噩梦）。WebGL 使用 OpenGL，简而言之，这意味着它总是优于 2d Canvas。

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

但是，WebGL 要求用户拥有兼容的视频卡。

回答by gman

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.htmland compare Safari on OSX to pretty much any other browser.

3D CSS 远不能使用。它只是刚刚进入firefox。它在 Firefox 和 chrome 中都有问题。它不适用于 OSX 上的 FF9 测试版。它在 Chrome 中也有至少 16 个问题。请参阅http://greggman.com/downloads/examples/intersecting-elements-3d-css.html并将 OSX 上的 Safari 与几乎任何其他浏览器进行比较。

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

Three.js ( https://github.com/mrdoob/three.js/) 曾经（也许现在仍然）使用画布提供一些简单的 3d。

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

否则，如果您想要任何有趣的东西，请转到 WebGL 并选择一个库（three.js、SceneJS 等。）

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 并放弃 IE，使用 Flash 11，使用 Unity3D，使用 Canvas 并获得非常有限的 3d，或者不做 3d。

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

WebGL 已经被主要网站使用。CNN 现在正在使用 WebGL http://www.stinkdigital.com/en/work/ecosphere

回答by CatalinBerta

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.

关于使用 Canvas 还是 HTML/CSS3 是否更好，存在一些“War”，即因为 Canvas 在较旧的机器/设备上比 DOM 慢。是的，DOM 在某些情况下更快，而 canvas 在大多数现代浏览器/设备上更快。

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.

WebGL - 2D 和 3D 的最佳选择，但由于它在浏览器和设备上的支持不够好，您必须在必要时提供对画布或 DOM 的回退。

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

Canvas - 与 WebGL 相比不太适合 3D，但更适合兼容性、社区、工具等

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

DOM - 比大多数人想象的要快，如果使用得当，支持最高，但你不能太花哨的动画/游戏。

Hope this helps

希望这可以帮助