在SVG和WebGL的使用帆布的3D应用程序帆布、应用程序、SVG、WebGL

2023-09-07 23:16:23 作者:少年未老心已凉√

我需要建立一个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.

我听说使用帆布与SVG 将处理更好的性能相结合,但如何复杂的将其转换为3D的环境中,在SVG任何JavaScript引擎支持印刷品吗?或者我应该选择three.js的Canvas和WebGL的。

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 /帆布/ SVG的是良好的静态图像,而不是为3D应用,允许运动。 我已经尝试了一些几个月前实现HTML5的一个恒星的地图,也试图与SVG,但所有的运动(滚动地图或看到另一个区)是缓慢的。 不同的浏览器也有一个巨大的影响:例如移动大的图像或运动100个对象有一个非常不同的结果在Chrome和Firefox的效率

HTML5 / Canvas / SVG are good for static images, but not for a 3D application that allow movement. I have tried some months ago to implement a stellar map with HTML5 and also tried with SVG, but all movement (to scroll the map or see another zone) are slow. Different browsers has also a huge impact: for example moving a big image or moving 100 objects has a very different result in efficiency in Chrome and Firefox.

WebGL是OpenGL的Web应用的一种简化,它使用的图形卡就像一个游戏,允许非常复杂的3D应用程序。举个例子,命令与征服在线或 http://www.unrealengine.com/html5/ 使用WebGL的。 WebGL的问题是,它需要一个兼容的浏览器,并且例如IE不支持它。

WebGl is a simplification of OpenGL for web, which use the graphic cards like a game and allow very complex 3D application. As an example, Command and conquer online, or http://www.unrealengine.com/html5/ use webGL. The problem of webGL is that it requires a compatible browser, and for example IE does not support it.

如果您的应用程序并不需要非常的浏览器兼容的,我建议你的WebGL,这让真3D,SVG / HTML5不允许它和Canvas仅仅是一个框架,它没有实现任何东西(你仍需要WebGL的或别的东西)

If your application does not require to be very browser-compatible, i recommend you webGL, which allow true-3D, SVG/html5 does not allow it and Canvas is only a frame, it does not implement anything (you still require webgl or something else)