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


http://www.ppmy.cn/news/21395.html

相关文章

SpringBoot(二):配置文件的作用、配置文件的格式、properties配置文件、yml配置文件

目录一、配置文件的作用二、配置文件的格式三、properties配置文件3.1 properties的基本语法3.2 properties的缺点3.3 配置自定义内容3.4 读取配置文件四、yml配置文件4.1 yml基本介绍4.2 yml基本语法4.3 使用yml配置不同的数据类型4.4 读取yml配置文件4.5 在yml中配置对象4.6 …

【Linux】git的使用

文章目录🎪 Linux下git的使用🚀1.git三板斧⭐1.1 准备工作⭐1.2 git add⭐1.3 git commit⭐1.4 git push⭐1.5 筛选提交🚀2.git分区⭐2.1 工作区⭐2.2 暂存区⭐2.3 版本区🚀3.git分支管理⭐3.1 分支创建与切换⭐3.2 分支合并⭐3.3…

Dubbo SPI 源码分析

上一章,我简单演示了 Dubbo SPI 的使用方法。我们首先通过 ExtensionLoader 的 getExtensionLoader 方法获取一个 ExtensionLoader 实例,然后再通过 ExtensionLoader 的 getExtension 方法获取拓展类对象。这其中,getExtensionLoader 用于从缓…

【每日CSS3代码】

1-1 两栏布局【1/27】 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…

数学建模与数据分析 || 3. 面向数据的特征提取方法: 探索性数据分析

面向数据的特征提取方法: 探索性数据分析 文章目录面向数据的特征提取方法: 探索性数据分析1. 原始数据的准备1.1 导入 python 模块1.2 导入数据集并进行宏观认识1.3 数据集描述2. 数据的预处理2.1 缺失数据的甄别2.2 类别规模的评估3. 数据特征的处理3.1 第一个因变量- 分析范…

我们为什么要学习servlet? servlet是干嘛的?

最近刚刚学习完servlet&#xff0c;明白了一个事情&#xff0c;servlet是用来干嘛的&#xff0c;为什么要学习servlet&#xff0c;我想如果我在刚刚开始学习servlet时就明白这件事的话&#xff0c;会更加有利于我带有目的的去学习servlet&#xff1b;所以记录以下文章&#xff…

一些关于Linux内核中的结构体函数指针的理解

一些关于Linux内核中常用的结构体函数指针的理解 动机 在看linux内核代码的时候经常能够看到一些结构体里面的成员跟我们以往见的到一些结构体不一样&#xff0c;常见的架构体如下面的代码&#xff1a; struct a{int i;char b;struct c; };而内核中又见有这样的一些结构体&a…

【MyBatis】| MyBatis查询语句专题(核心知识)

目录 一&#xff1a;MyBatis查询语句专题 1. 返回Car对象 2. 返回List<Car> 3. 返回Map 4. 返回List<Map> 5. 返回Map<String,Map> 6. resultMap结果映射 7. 返回总记录条数 一&#xff1a;MyBatis查询语句专题 前期准备&#xff1a; 模块名&#xf…