canvas vs. webGL与CSS 3d - >哪个可供选择?

时间:2011-10-17 10:30:24

标签: css html5 canvas 3d webgl

对于基本的3D网页应用程序,即几个立方体,在3d空间中旋转和平移 - 哪个更好选择?

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

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

4 个答案:

答案 0 :(得分:18)

3D有很多不同选项的原因是因为整个事物仍处于不稳定状态 - 浏览器中的3D不是完成标准,而且您列出的选项中唯一有效的选项在所有当前可用的浏览器中都是Canvas。

特别是IE不太可能给你带来太多的快乐 - 正如你所说,此时IE甚至还没有定为3D。话虽如此,SVG在当天晚些时候被添加到了IE9,所以总有希望。但是,微软不太可能只支持已经正式批准为标准的功能。

在您列出的技术中,Canvas 到目前为止支持的最佳,但Canvas不是3D技术;它是一个2D画布,如果你想在其中加入3D效果,你需要自己编写它们,它们不会是硬件加速的。

我想问题的真正答案取决于该功能对您网站的重要性。如果它只是眼睛糖果,不受支持的浏览器的用户可以没有,那么无论如何使用一些3D CSS。但如果您需要在所有当前浏览器中使其保持一致,那么请使用Canvas。

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

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

答案 1 :(得分:8)

我知道这已经2岁了,但我想我会在这里发布这篇文章给未来的读者。

选择什么取决于您的需求。

你需要一个简单的三维形状,没有或几乎没有动画?尝试使用CSS3,这是迄今为止最简单的。对于IE,你可能会得到一个提供支持的库。

你需要一些带有漂亮图形的甜美3D模型吗?它可以做各种各样的东西吗?去WebGL,你不能要求在浏览器中为3d提供更多控制和性能。

你需要3D形状可以做各种各样的东西,但不需要纹理,可以在任何地方工作,不需要太多的性能?去画布。

CSS3只是为了让人眼前一亮。您可以轻松地制作它,以您想要的任何方式设计它,并且非常容易维护。一旦你想要做的不只是眼睛糖果,戴上手套,因为这将需要一些工作。

使用2d Canvas,你可以制作3d内容。如果你是新手,那将是非常烦人和复杂的(举一个例子;你需要知道矩阵),你几乎可以用2d画布做任何事情你可以用WebGL做但有些事情会更容易在WebGL中(严重的是,如果使用2d Canvas,不要尝试使用纹理,这是一场噩梦)。 WebGL使用OpenGL,简而言之,它意味着它总是胜过2d Canvas。

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

答案 2 :(得分:7)

我真的要看你想要做什么。简单有多简单?

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/)曾经(也许仍然如此)使用画布提供一些简单的3d。

否则如果你想要任何有趣的东西去WebGL并选择一个库(three.js,SceneJS等等)

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

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

答案 3 :(得分:4)

每个人都可能厌倦了听到'这取决于',但......这取决于它!

关于使用Canvas或HTML / CSS3是否更好,还有一点“战争”,即因为Canvas比旧机器/设备上的DOM慢。 Yeap,DOM在某些情况下更快,而canvas在大多数现代浏览器/设备上都更快。

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

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

DOM - 比大多数人认为的更快,如果使用得当,最高支持,但你不能过于花哨的动画/游戏。

希望这有帮助