提升Three.js渲染性能的实用技巧

发表时间: 2023-01-31 00:43

Three.js 应用程序以每秒 60 帧 (FPS) 的速度执行 3D 渲染是流畅和愉快体验的保证。 然而,这是一个有时难以实现的目标!本文整理了优化 Three.js 应用程序和达到 60 FPS 的最佳提示和技巧!

推荐:使用 NSDT场景编辑器 快速搭建 3D场景。

1、监测性能

在开始优化Three.js应用之前,我们必须能够衡量应用程序的性能。 我建议你使用 Three.js的 stat模块,它允许在我们的页面上添加性能监视器:

2、选择网络浏览器

如你所知, Three.js 应用程序是用 JavaScript(一种解释型语言)编写的。 因此,我们的代码将直接由浏览器的 JavaScript 引擎执行。

市场上存在许多网络浏览器; 因此,我们代码的执行速度与执行它的网络浏览器密切相关!

谷歌浏览器以在 WebGL 和 Three.js 上表现出色而著称。 这就是为什么同时测试多个浏览器很重要,这样才能保证全局优化水平令人满意。

具有最新更新的浏览器通常也具有最佳性能。

3、减少场景中的多边形数量

第一种优化方法涉及场景中多边形的数量。

在每次执行 3D 渲染期间,处理器负责显示场景中的对象。 要处理的多边形(3D 对象结构的面)越多,工作量就越大。

可以使用这行代码简单地显示渲染引擎当前处理的多边形数量:

console.log("Number of Triangles :", renderer.info.render.triangles);

因此,增强应用程序性能的一个好方法是降低场景的复杂性。 为此,我们有两种方法:

  • 从场景中移除 3D 对象
  • 通过减少多边形数量来简化 3D 对象

在第一种情况下,我们必须简单地分类并从场景中删除某些 3D 对象。

在第二种情况下,工作更细微。 在3D 建模软件的帮助下,我们将简化模型并删除尽可能多的面。 例如,可以删除所有隐藏的和相机不可见的面。

某些软件(例如 Blender)提供自动简化 3D 结构的功能!

4、停用抗锯齿

在渲染引擎中停用抗锯齿是一种简单的方法,可以显着提高我们的应用程序的性能,以换取一些可见像素。

实际上,抗锯齿用于平滑 3D 对象的轮廓并在最终渲染中提供更整洁的效果—非常高效,但会增加处理器的工作量!

使用 3D 渲染引擎的属性来激活或停用抗锯齿:

//Enabledrenderer = new THREE.WebGLRenderer( { antialias : true } );//---------------------//Disabledrenderer = new THREE.WebGLRenderer( { antialias : false } );

停用抗锯齿是优化 Three.js 应用程序性能的一种简单有效的方法!

5、降低 3D 渲染的分辨率

在 3D 渲染期间降低分辨率(计算像素的数量)是另一种轻松优化我们的 Three.js 应用程序的方法。

这种方法非常有效,但图形质量损失很大。 因此,我建议你将此方法用作最后的手段!

为了降低分辨率,我们将使用 3D 渲染引擎的 setPixelRatio 方法。

//Base valuerenderer.setPixelRatio( window.devicePixelRatio );

通过修改像素比,可以减少计算像素的数量,从而修改最终分辨率!

因此,让我们将 3D 渲染的分辨率修改为 0.5:

//Lower résolutionrenderer.setPixelRatio( window.devicePixelRatio * 0.5 );

你可能已经注意到,FPS 的提升令人印象深刻(从 24 FPS 到 60 FPS),但图形质量却大大降低了。


原文链接:
http://www.bimant.com/blog/three-js-rendering-optimization/