三个.js 渲染器

Posted 2023-02-27

【中文标题】三个.js 渲染器

【英文标题】：THREE.js renderers

【发布时间】：2012-08-10 13:18:15

【问题描述】：

谁能解释一下three.js 渲染器之间的区别？哪个更快？哪一个更标准和跨浏览器？ svg 渲染器和 dom 渲染器是如何工作的？ 当我在下面的代码中使用 webGl 而不是画布渲染器时，我得到了不同的结果，那么为什么会发生这种情况？ cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() ); canvas 和 webGL 有很大区别吗？我应该将哪一个用于高浏览量的网站？

【问题讨论】：

这取决于您要绘制的内容...我认为正如其名称所示，WebGL 渲染器使用 OpenGL，因此速度更快（因为它使用 GPU），而 Canvas 和 SVG 较弱，因为他们计算 3d->2d 转换，并非所有对象都受支持...

我想画一些复杂的 3d 东西，所以 web Gl 可以更有用，但是有很多浏览器不支持 webGl。

【参考方案1】：

使用 WebGLRenderer 作为其未来的证明，并且 imp 是大多数三种 js 方法都适用于其中。

例如ParticleSystem 在 CanvasRenderer 中不起作用

【参考方案2】：

如果您的目标是创建 3D 图形，您确实想创建仅支持 WebGL 的应用程序。其他 Three.JS 渲染器更像是 hacks 和概念验证，而不是可以为您提供真正 3D 的东西。如果您的目标不是创建令人惊叹的图形，那么您可以简单地使用静态 PNG 图像、GIF 动画或 YouTube 剪辑，并具有更好的向后兼容性。 <canvas> 渲染后端仅对非常简单的图形有用（例如没有纹理的旋转立方体），并且在许多情况下将 <canvas> 作为后备是行不通的。

在 WebGL 中创建您的专属内容

提供对旧版浏览器的回退

使用谷歌浏览器框架http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq

如果旧版浏览器用户不想在旧版浏览器中安装 Chrome Frame 插件，只需将他们重定向到静态图像和静态文本内容即可

例如，https://tinkercad.com/home/ 是仅 WebGL 的 Web 应用程序。他们在 webshape.fi 会议上的估计是，大约 50% 的网站观众可以访问 WebGL 内容。这听起来可能很低，但仍然比在手机或桌面上安装应用程序的人高得多，因此使用 WebGL 部署 3D 的对话率高于通过其他部署机制。

另见http://webglstats.com/

WebGL 也是一种面向未来的技术 - 它不会消失。目前您主要针对桌面，但移动适应成为现实只是时间问题，2-3 年。

【讨论】：

Excellent.Thanks，所以我会使用 Web Gl，但是你知道什么是 SVG Renderer 和 DOM Renderer？

它们是使用 html 元素渲染的概念证明，不会产生您希望在现实生活中使用的渲染结果。我希望它们将来会从 Three.js 核心中删除。