html - 在 SVG 或 WebGL 中使用 Canvas 进行 3D 应用程序

Question

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

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

Answer 1

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

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

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

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

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