在 SVG 或 WebGL 中使用 Canvas 进行 3D 应用程序答案

【问题标题】：Use Canvas in SVG or WebGL for 3D application在 SVG 或 WebGL 中使用 Canvas 进行 3D 应用程序
【发布时间】：2013-08-18 13:52:11
【问题描述】：

我需要构建一个 html5/javascript 3d 应用程序，每个场景我都必须渲染很多对象（大约 200-300 个复杂对象或更多）而不滞后，所以请告诉我应该选择哪种渲染技术，HTML5画布、SVG 或 WebGL。

我听说使用Canvas combine with SVG 会带来更好的性能，但是将其转换为 3d 环境有多复杂，是否有任何 JavaScript 引擎支持 SVG 中的 Canvas？或者我应该为 Canvas 和 WebGL 选择 three.js。

【问题讨论】：

【解决方案1】：

HTML5 / Canvas / SVG 适用于静态图像，但不适用于允许移动的 3D 应用程序。

HTML5 和 SVG 没有实现 3D 机制，因此创建这样的场景很快就会变得非常复杂。画布只是某种表面，需要进一步的逻辑或技术才能在其上绘图。

另一个考虑因素是不同的浏览器可能有非常不同的性能，例如（在我写这个答案的那一刻）比较 Chromium 和 Firefox，一个更擅长移动一个大图像，而另一个更擅长移动数千个小图像那些。

WebGL 是 OpenGL for web 的简化版，它使用显卡来渲染复杂的场景，就像在游戏中一样。这将允许真正的 3D 和逼真的渲染。代价是复杂性：学习和正确应用需要一些时间。

对于简单的 3D 效果和样式，WebGL 是多余的，而 SVG 将是一个更简单的替代方案。对于真正的 3D，WebGL 提供了全部功能。

【讨论】：