3D渲染优化入【Three.js】

news/2024/10/30 23:19:30/

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 渲染引擎的属性来激活或停用抗锯齿：

//Enabled
renderer = new THREE.WebGLRenderer( { antialias : true } );//---------------------//Disabled
renderer = new THREE.WebGLRenderer( { antialias : false } );

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

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

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

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

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

//Base value
renderer.setPixelRatio( window.devicePixelRatio );

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

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

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

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

原文链接：Three.js渲染优化 — BimAnt