css - canvas vs. webGL vs. CSS 3d -> 选择哪个?

标签 css html canvas 3d webgl

<分区>

对于基本的 3d web 应用程序,即一些立方体、3d 空间中的旋转和平移 - 选择哪个更好?

CSS 3d 似乎是最简单的,但在 IE9 或 IE10 的路线图上不受支持,并且提供的控制少于其他选项。 Canvas 和 WebGL 似乎要复杂得多,但我不知道它们是否适合 future 。

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

最佳答案

之所以有这么多不同的 3D 选项,是因为整个事情仍然处于不断变化的状态——浏览器中的 3D 不是一个最终的标准,而且在您列出的选项中,这是唯一可行的在所有当前可用的浏览器中都是 Canvas。

尤其是 IE 不太可能给您带来太多乐趣——正如您所说,目前 IE10 甚至还没有计划使用 3D。话虽如此,SVG 是在当天很晚才添加到 IE9 中的,所以总是有希望的。但这不太可能的原因是 Microsoft 强调只支持已被正式批准为标准的功能。

在您列出的技术中,Canvas 是迄今为止得到最好支持的,但 Canvas 不是 3D 技术;它是一个 2D Canvas ,如果你想在里面有 3D 效果,你需要自己编写它们,它们不会被硬件加速。

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

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

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

关于css - canvas vs. webGL vs. CSS 3d -> 选择哪个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7792459/

相关文章:

css - Stylelint 不会在 VSCode 中标记错误

css - block 级可点击区域无法正常工作

javascript - Fabric JS 用相同的项目(ID)替换对象

android - 如何在 android 中绘制到 Canvas 的多个图像之间旋转特定图像?

javascript - Canvas 动画/reactjs/with requestAnimationFrame

html - 具有不同高度列的 Bootstrap 行

javascript - 使用鼠标动态调整div

html - CSS 缩放指定像素为动态

html - Bootstrap 4 使每列大小相等?

javascript - Angularjs 指令和 string.format