在SVG或WebGL中使用Canvas进行3D应用

duy*_*.ly 4 3d html5 svg canvas webgl

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

我听说使用Canvas与SVG结合会产生更好的性能,但是将它转换为3d环境有多复杂,有什么javascript引擎支持在SVG中使用Canvas?或者我应该为Canvas和WebGL选择three.js.

Adr*_*ire 9

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

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

另一个考虑因素是不同的浏览器可能具有非常不同的性能,例如(目前我写这个答案)比较Chromium和Firefox,一个更好地移动一个巨大的图像,而另一个更好地移动成千上万的小图像.

WebGL是OpenGL for web的简化版,它使用图形卡渲染复杂的场景,比如游戏.这将允许真实的3D和逼真的渲染.价格是复杂的:需要一些时间来学习和正确应用.

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