画布（canvas）vs. Web图形库（WebGL）vs. CSS 3D -> 该选择哪个？

Question

对于基础的三维网络应用，例如几个立方体在三维空间中旋转和平移 - 选择哪种方式更好？

CSS 3D似乎最容易，但IE9不支持它，IE10的规划也没有涵盖它，并且相比于其他选项提供的控制较少。 Canvas和WebGL看起来更加复杂，但我不知道它们是否具有未来可靠性。

为什么会有这么多不同的3D技术？哪种更好？哪种具有未来可靠性？

- Elad Katz

---

我不是JS开发人员，但我轻松地使用了three.js，它有多个渲染器(WebGL、SVG和Canvas)。我曾经使用过Canvas渲染器，它几乎可以在所有浏览器上工作，我记得唯一的问题是在使用纹理时速度较慢（因为Canvas渲染器基本上只在CPU上执行所有数学和渲染），所以我大多使用颜色。此外，我的测试在iOS和Android上运行，但对于复杂模型速度较慢。即使在移动设备上，基本/低面数量的模型在Canvas上也能够工作得相当不错。请看我旧的例子这里。希望对你有所帮助。 - George Profenza

真不可思议，是吧？查克·诺里斯只用 div 元素就能制作三角形：http://www.uselesspickles.com/triangles/ - joeytwiddle

顺便说一句，如果你现在要使用WebGL，基本上需要Canvas。WebGL与Canvas的区别仅在于你可以获得一个WebGL上下文。 WebGL - document.getElementById('canvas-element').getContext("webgl");.. 普通的2D Canvas document.getElementById('canvas-element').getContext("2d"); // 如果你改成"3d"，你仍然可以绘制3D图形，而不需要WebGL - Om Shankar

Answer 1

之所以有许多不同的3D选项是因为整个技术仍处于不稳定状态 - 浏览器中的3D还没有成为完整的标准。在你列出的选项中，目前唯一在所有可用浏览器中均有效的选项是Canvas。

特别是IE浏览器可能无法提供很好的支持 - 正如你所说，甚至IE10都没有计划支持3D。尽管如此，SVG也是在IE9中添加的，但相当晚，因此仍然有希望。但是，这种情况不太可能发生的原因是Microsoft已经强调只支持已正式批准为标准的功能。

在你列出的技术中，Canvas得到了远远最好的支持。但是，Canvas并不是一种3D技术；它是一个2D画布，如果你想在其中具有3D效果，就需要自己编写代码，而且不会进行硬件加速。

我想真正回答你的问题取决于该功能对你的网站有多重要。如果它只是装饰品，那么不支持的浏览器用户也可以忍受，那么请使用一些3D CSS进行开发。但是，如果你需要在当前所有的浏览器中实现一致性，那么请使用Canvas。

对于你的情况，我倾向于不建议使用WebGL，因为这似乎对你所做的事情来说有点过头了。

3D CSS可能是最好的答案，但在其他浏览器添加对3D CSS的支持之前，请暂时使用Canvas。

- Spudley

---

这是一个很吸引人的东西，即使现在并不是所有的浏览器都支持它，但在某个时候会得到支持，那么对我来说就足够好了，所以CSS3听起来最好。至于画布(canvas)——它的速度还不够快——旋转几个立方体在空间中让我的电脑CPU占用率达到了80%。你提到了SVG——SVG如何适应这种情况？它们中哪一个可能成为标准？ - Elad Katz

Canvas和SVG都是成熟的标准。但是Canvas更适合你正在做的事情。此外，直到v3.0版本，Android浏览器才支持SVG，这在当前一代移动设备中存在很大的支持漏洞。我对你的报告感到惊讶，认为Canvas难以旋转几个立方体；我听说过它成功运行完整的3D游戏引擎的报告。当然不会很快，但我希望它能够合理地处理一些简单的立方体。但是浏览器可能会有所不同。根据您的需求，另一个选择当然就是使用2D动画来模拟它。 - Spudley

WebGL难道不就是Canvas的一种形式吗？人们常说WebGL与Canvas对比，但WebGL 就是 Canvas。这很令人困惑。 - johnbakers

Answer 2

我知道这篇文章有两年历史了，但我想为后来的读者在这里发布一下。

选择什么取决于你需要什么。

你需要一个简单的3D形状吗？试试用CSS3做到，这是最容易的方式。对于IE，你可以找到一个提供支持的库。

你需要一些漂亮的3D模型和精美的图形，并且可以做所有种类的事情吗？使用WebGL，你无法获得比浏览器中的3D更好的控制和性能。

你需要可以做所有种类的事情的3D形状，但不需要纹理，并且可以在任何地方工作并且不需要太多的性能吗？使用Canvas。

CSS3只是为了炫酷效果。你可以很容易地制作它，按照自己的想法进行样式设置，非常易于维护。一旦你想要做更多的事情，就需要开始动手，因为那需要一些努力。

使用2D Canvas可以制作3D物品。如果你是新手，它会非常烦人和复杂（以矩阵为例，你需要了解）。你几乎可以用2D画布所能实现的做任何事情，而且有些东西在WebGL中会更容易（说真的，如果使用2D Canvas，请不要尝试使用纹理，这是一场噩梦）。WebGL使用OpenGL，简而言之，意味着它将始终优于2D Canvas。

然而，WebGL需要用户拥有兼容的视频卡。

- Johan

Answer 3

这取决于你想要做什么，简单有多简单？

3D CSS 远远不能使用。它才刚刚进入 Firefox 浏览器。在 Firefox 和 Chrome 中存在一些漏洞。在 OSX 的 FF9 beta 上也无法使用。在 Chrome 中至少到16版本存在问题。请参见http://greggman.com/downloads/examples/intersecting-elements-3d-css.html并将 Safari 在 OSX 上与任何其他浏览器进行比较。

three.js (https://github.com/mrdoob/three.js/) 曾经（可能仍然如此）使用 canvas 提供一些简单的 3D 功能。

否则，如果您想要任何有趣的效果，请使用 WebGL 并选择一个库（例如 three.js、SceneJS 等）

你必须做出选择。放弃 IE 使用 WebGL，使用 Flash 11，使用 Unity3D，使用 Canvas 并获得非常有限的 3D，或者不使用 3D。

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

- gman

---

CNN链接似乎已经失效了... - andand

@andand 我找到了一个存档 Ecosphere 项目的链接并进行了更新。 - Brad

Answer 4

也许大家已经厌倦了听到“这要看情况”，但是...确实如此！

目前有一个小“战争”，即关于使用Canvas还是HTML/CSS3更好的问题，主要原因是在老设备上，Canvas比DOM慢。没错，在某些情况下DOM会更快，而Canvas则在大多数现代浏览器/设备上更快。

WebGL - 在2D和3D方面都是最佳选择，但由于它在不同浏览器和设备上的支持不够完善，因此必须在必要时提供回退到Canvas或DOM。

Canvas - 相对于WebGL来说不太适合3D，但对于兼容性、社区、工具等方面更加适合。

DOM - 如果使用得当，比大多数人想象中的更快，并且具有最高的支持率，但你不能太过于渲染动画/游戏。

希望对你有所帮助。

- CatalinBerta

---

我认为除了IE浏览器，大多数浏览器（包括移动端）都支持WebGL。在这里阅读https://www.ichemlabs.com/1375。 - Lucky

是的，答案已经给出将近1年了。现在，WebGL的支持率要高得多，为我们欢呼吧 :) - CatalinBerta