在 SVG 或 WebGL 中使用 Canvas 进行 3D 应用 [英] Use Canvas in SVG or WebGL for 3D application

问题描述

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

I need to build an html5/javascript 3d application, and each scene i have to render a lot of objects (about 200-300 complex objects or more) without lagging, so please tell me which render technology i should choose, HTML5 Canvas, SVG or WebGL.

我听说使用 Canvas 与 SVG 结合 会提供更好的性能，但是如何将其转换为 3d 环境很复杂，是否有任何 javascript 引擎支持 SVG 中的 Canvas?或者我应该为 Canvas 和 WebGL 选择三个.js.

I heard that using Canvas combine with SVG will deal better performance, but how complex to convert it to 3d environment, have any javascript engine support Canvas in SVG? Or i should choose three.js for Canvas and WebGL.

推荐答案

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

HTML5 / Canvas / SVG are good for static images, but not for a 3D application that allows movements.

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

HTML5 and SVG do not implement 3D mechanisms, so creating such scene could become quickly terribly complex. Canvas are only some kind of surface, which would require further logic or techniques for drawing on it.

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

Another consideration is that different browsers may have very different performance, for instance (at the moment I write this answer) comparing Chromium and Firefox, one is better at moving one huge image, while the other is better at moving thousands of small ones.

WebGL 是针对 Web 的 OpenGL 的简化版，它使用图形卡来渲染复杂的场景，例如在游戏中.这将允许真正的 3D 和逼真的渲染.代价是复杂:学习和正确应用需要一些时间.

WebGL is a simplification of OpenGL for web, which use the graphic card for rendering complex scenes, like in games. This would allows real 3D and realistic rendering. The price is complexity: it take some time to learn and apply correctly.

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

For simple 3D effects and styling, WebGL is an overkill, and SVG would be a simpler alternative. For real 3D, WebGL gives the full power.

这篇关于在 SVG 或 WebGL 中使用 Canvas 进行 3D 应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！