canvas vs. webGL vs. CSS 3d -> 选择哪个？ [关闭]

Posted 2023-03-05

【中文标题】canvas vs. webGL vs. CSS 3d -> 选择哪个？ [关闭]

【英文标题】：canvas vs. webGL vs. CSS 3d -> which to choose? [closed]

【发布时间】：2011-12-09 04:45:49

【问题描述】：

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

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

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

【问题讨论】：

不是 js 开发人员，但我很容易使用 three.js，它有多个渲染器（WebGL、SVG 和 Canvas）。我玩过 Canvas 渲染器，不久前它几乎适用于所有浏览器，我记得唯一的问题是使用纹理时的速度（因为 Canvas 渲染器基本上只在 CPU 上完成所有数学运算和渲染）所以我主要使用颜色.此外，我的测试确实在 ios 和 android 上运行，但对于复杂模型来说速度较慢。即使在移动设备上，基本/低多边形模型也可以与 Canvas 配合使用。查看我的旧示例hereHTH

这很疯狂不是吗？ Chuck Norris 只使用 div：uselesspickles.com/triangles

顺便说一句，你现在使用 WebGL，你基本上需要 Canvas。 WebGL 与 Canvas 的不同之处仅在于您获得了 WebGL 上下文。 WebGL - document.getElementById('canvas-element').getContext("webgl");.. 普通 2D 画布 document.getElementById('canvas-element').getContext("2d"); // if you change to "3d", you can still have 3D drawings, w/o WebGL

【参考方案1】：

之所以有这么多不同的 3D 选项，是因为整个事物仍处于不断变化的状态——浏览器中的 3D 并不是一个完成的标准，在您列出的选项中，唯一一个有效的在所有当前可用的浏览器中都是 Canvas。

尤其是 IE 不太可能给您带来太多乐趣 - 正如您所说，目前 IE10 甚至还没有为 IE10 指定 3D。话虽如此，SVG 是在很晚的时候才添加到 IE9 中的，所以总是有希望的。但不太可能的原因是，微软强调只支持已正式批准为标准的功能。

在您列出的技术中，到目前为止Canvas 是最受支持的，但 Canvas 不是 3D 技术；它是一个 2D 画布，如果你想在里面有 3D 效果，你需要自己编写它们，它们不会被硬件加速。

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

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

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

【讨论】：

它是一种吸引眼球的东西，如果不是所有的浏览器现在都支持它，但在某些时候它对我来说已经足够好了，所以 CSS3 听起来最好。至于画布——它只是不够快——在空间中旋转几个立方体让我的电脑在 80% 的 cpu 下畏缩。您提到了 SVG - SVG 如何适合图片？其中哪一个可能是标准？

Canvas 和 SVG 都是公认的标准。但是画布更适合您正在做的事情。此外，在 v3.0 之前，Android 浏览器不支持 SVG，这在当前一代的手机中造成了很大的支持漏洞。我对您的报告感到惊讶，即画布难以旋转几个立方体；我听说过它成功运行完整的 3D 游戏引擎的报告。不能很快确定，但我预计它可以很好地处理一些简单的立方体。但浏览器可能会有所不同。根据您的需要，另一种选择当然是使用 2D 动画来伪造它。

WebGL 真的不是 Canvas 的一种形式吗？人们说 WebGL 与 Canvas，但 WebGL 是 Canvas。令人困惑。

【参考方案2】：

我真的取决于你想要做什么。简单有多简单？

3D CSS 远不可用。它只是刚刚进入Firefox。它在 Firefox 和 chrome 中都有问题。它不适用于 OSX 上的 FF9 beta。 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

【讨论】：

CNN 链接似乎已失效...

@and 我找到了一个归档生态圈项目的链接并对其进行了更新。

【参考方案3】：

我知道这是 2 岁，但我想我会在这里为未来的读者发布这个。

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

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

您是否需要一些精美的 3D 模型和漂亮的图形并且可以做各种事情？使用 WebGL，您不能要求在浏览器中为 3d 提供更多控制和性能。

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

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

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

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

【参考方案4】：

每个人可能都厌倦了听到“这取决于”，但是……这取决于！

关于是使用 Canvas 还是使用 HTML/CSS3 更好，正在发生一场“战争”，即因为 Canvas 在旧机器/设备上比 DOM 慢。是的，在某些情况下，DOM 更快，而在大多数现代浏览器/设备上，画布更快。

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

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

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

希望对你有帮助

【讨论】：

我认为除了 IE 之外的大多数浏览器（包括移动设备）都支持 WebGL。阅读此处ichemlabs.com/1375。

是的，答案是在大约 1 年前给出的。现在，对 WebGL 的支持要高得多，对我们来说太棒了 :)