商品展示类网站源码,软件定制开发外包平台,赫章县网站建设,腾讯企业邮箱个人登录入口Three.js 是一个功能强大的 3D 引擎#xff0c;当场景足够大的时候#xff0c;就会出现卡顿的现象#xff0c;首先要保证电脑的性能够用#xff0c;然后看看下面方法#xff0c;帮助你提高应用的运行效率。
1. 使用 stats.js 监视性能
在进行任何优化之前#xff0c;首…Three.js 是一个功能强大的 3D 引擎当场景足够大的时候就会出现卡顿的现象首先要保证电脑的性能够用然后看看下面方法帮助你提高应用的运行效率。
1. 使用 stats.js 监视性能
在进行任何优化之前首先要监视应用的性能。stats.js 是一个简单而有效的工具可以帮助你实时监视帧率FPS、每帧渲染所需时间MS和内存使用情况MB。
安装和使用 stats.js
首先通过 npm 安装 stats.js
npm install --save stats.js然后可以在 Three.js 项目中使用它
import Stats from stats.js;
const stats new Stats();
stats.showPanel(0); // 显示面板 0: fps, 1: ms, 2: mb, 3: custom
document.body.appendChild(stats.dom);
const tick () {stats.begin();// 监视的代码放在这里stats.end();requestAnimationFrame(tick);
};
requestAnimationFrame(tick);FPS在最后一秒内渲染的帧数。数值越高越好。
MS渲染一帧所需的毫秒数。数值越低越好。
MB分配的内存大小以兆字节为单位。需要在 Chrome 中使用 --enable-precise-memory-info 启动。
CUSTOM用户自定义面板支持。 2. 优化几何体和材质
复杂的几何体和高分辨率的材质会显著影响渲染性能。以下是一些优化建议
降低几何体细节
使用 THREE.LODLevel of Detail类来根据摄像机距离动态切换几何体细节。
import * as THREE from three;
// 创建场景和相机
const scene new THREE.Scene();
const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z 10;
// 创建渲染器
const renderer new THREE.WebGLRenderer({antialias: true,powerPreference: high-performance
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
// 创建不同细节级别的几何体
const highDetailGeometry new THREE.BoxGeometry(1, 1, 1, 32, 32, 32);
const mediumDetailGeometry new THREE.BoxGeometry(1, 1, 1, 16, 16, 16);
const lowDetailGeometry new THREE.BoxGeometry(1, 1, 1, 8, 8, 8);
const material new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 使用 LOD 动态切换几何体
const lod new THREE.LOD();
lod.addLevel(new THREE.Mesh(highDetailGeometry, material), 0);
lod.addLevel(new THREE.Mesh(mediumDetailGeometry, material), 5);
lod.addLevel(new THREE.Mesh(lowDetailGeometry, material), 10);
scene.add(lod);
// 动画循环
const animate function () {requestAnimationFrame(animate);
// 旋转 LODlod.rotation.x 0.01;lod.rotation.y 0.01;
// 更新摄像机位置camera.position.x Math.sin(Date.now() * 0.001) * 20;camera.position.z Math.cos(Date.now() * 0.001) * 20;camera.lookAt(scene.position);
// 渲染场景和相机renderer.render(scene, camera);
};
animate();使用压缩纹理 使用压缩纹理格式如 DDS、KTX2来减少内存占用和加载时间。这里以 KTX2 为例。
首先安装 three/examples/jsm/loaders/KTX2Loader.js 和 Basisu 解码器然后在你的项目中使用 KTX2Loader 加载压缩纹理
import { KTX2Loader } from three/examples/jsm/loaders/KTX2Loader.js;
import { MeshStandardMaterial } from three;
// 创建 KTX2Loader
const ktx2Loader new KTX2Loader().setTranscoderPath(path/to/basisu/transcoder/) // 设置 Basisu 解码器路径.detectSupport(renderer);
// 加载 KTX2 压缩纹理
ktx2Loader.load(path/to/texture.ktx2, (texture) {const material new MeshStandardMaterial({ map: texture });
const geometry new THREE.BoxGeometry(1, 1, 1);const mesh new THREE.Mesh(geometry, material);scene.add(mesh);
});合并几何体
1使用Blender将模型合并一下
2将多个几何体合并为一个几何体以减少绘制调用draw call的次数。使用将使用BufferGeometryUtils 合并几何体。
import { BufferGeometryUtils } from three/examples/jsm/utils/BufferGeometryUtils.js;
// 创建多个几何体
const geometries [];
for (let i 0; i 50; i) {const geometry new THREE.BoxGeometry(0.5, 0.5, 0.5);
geometry.translate((Math.random() - 0.5) * 10,(Math.random() - 0.5) * 10,(Math.random() - 0.5) * 10);
geometries.push(geometry);
}
// 合并几何体
const mergedGeometry BufferGeometryUtils.mergeBufferGeometries(geometries);
const material new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh new THREE.Mesh(mergedGeometry, material);
scene.add(mesh);
// 动画循环
const animate function () {requestAnimationFrame(animate);
// 旋转合并后的几何体mesh.rotation.x 0.01;mesh.rotation.y 0.01;
// 渲染场景和相机renderer.render(scene, camera);
};
animate();3. 优化灯光和阴影
灯光和阴影计算开销较大特别是多光源和动态阴影。以下是一些优化建议
减少光源数量尽量减少场景中的光源数量选择性能开销较小的光源如 AmbientLight 和 DirectionalLight。优化阴影贴图降低阴影贴图的分辨率并限制阴影相机的视野范围以减少计算开销。 // 优化阴影贴图
directionalLight.shadow.mapSize.width 1024; // 默认值是 512
directionalLight.shadow.mapSize.height 1024; // 默认值是 512
// 限制阴影相机的视野范围
directionalLight.shadow.camera.top 3;
directionalLight.shadow.camera.right 6;
directionalLight.shadow.camera.left -6;
directionalLight.shadow.camera.bottom -3;
directionalLight.shadow.camera.near 0.1;
directionalLight.shadow.camera.far 10;
// 可选使用相机助手查看阴影相机的范围
const cameraHelper new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(cameraHelper);静态光照贴图对于静态场景可以预先计算光照和阴影生成光照贴图。这里我们使用 Lightmap一个 Three.js 的扩展可以帮助实现静态光照贴图。
首先安装 three-lightmap
npm install three-lightmap然后在你的项目中使用 three-lightmap 来生成静态光照贴图
import { Lightmap } from three-lightmap;
// 创建静态光照贴图
const lightmap new Lightmap(scene, renderer, {mapSize: 1024,samples: 4,bake: true,exposure: 0.7,softEdges: 0.01,aoOnly: false,aoStrength: 0.6
});
// 在几何体上启用静态光照贴图
cube.material.lightMap lightmap.generate(cube.geometry);
plane.material.lightMap lightmap.generate(plane.geometry);
// 运行一次性光照贴图烘焙过程
lightmap.bake();4. 纹理贴图
纹理贴图非常消耗 GPU 内存以下是一些优化建议 调整尺寸调整纹理贴图的分辨率可以通过图像编辑工具如 Photoshop、GIMP或编程工具如 Sharp for Node.js来实现。在加载纹理时可以使用 Three.js 内置的 THREE.TextureLoader 来加载已经调整好尺寸的纹理。 使用正确格式确保使用合适的文件格式如 .jpg 或 .png。可以使用在线工具如 TinyPNG 来压缩纹理文件减小文件大小同时保持较高的视觉质量。 保持分辨率为 2 的幂次方确保纹理尺寸为 2 的幂次方如 256x256, 512x512,1024x1024 如果纹理的尺寸不是 2 的幂次方Three.js 会自动调整它们但这会影响性能。
5. 使用对象池
在动画或游戏应用中经常需要频繁创建和销毁对象。使用对象池可以有效减少内存分配和垃圾回收频繁的开销。
class ObjectPool {constructor(createFunc, size) {this.createFunc createFunc;this.pool [];for (let i 0; i size; i) {this.pool.push(this.createFunc());}}
get() {return this.pool.length ? this.pool.pop() : this.createFunc();}
release(obj) {this.pool.push(obj);}
}6. 渲染器优化
以下是一些针对渲染器的优化建议
限制像素比一些设备有非常高的像素比但渲染的像素越多消耗的性能越大。将渲染器的像素比限制为 2
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));配置偏好指定 powerPreference 属性来提示用户代理适当的 GPU 配置
const renderer new THREE.WebGLRenderer({ powerPreference: high-performance });抗锯齿只有在有明显锯齿且不会显著影响性能时才启用抗锯齿。
// 创建渲染器时启用抗锯齿
const renderer new THREE.WebGLRenderer({canvas: document.querySelector(#canvas),antialias: true, // 启用抗锯齿powerPreference: high-performance // 提示浏览器选择高性能的 GPU
});7. 相机优化
通过缩小相机的视野范围FOV以及调整相机的 near 和 far 属性可以显著减少渲染的对象数量从而提高渲染性能。下面是具体的实现代码和逻辑说明。
缩小相机的视野范围
通过减少相机的视野角度FOV可以让屏幕中显示的对象更少从而减少需要渲染的三角形数量。
调整相机的近端面和远端面
调整相机的 near 和 far 属性可以确保只渲染特定范围内的对象避免渲染不必要的远距离对象。
// 调整相机的视野角度和近端面、远端面
const fov 50; // 缩小视野角度默认值通常为75
const aspect window.innerWidth / window.innerHeight;
const near 1; // 将 near 属性从 0.1 增大到 1
const far 50; // 将 far 属性从 100 缩小到 50
const camera new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z 10;8. 清除不必要的对象
当场景中不再需要某个对象时及时清除它
// 创建示例对象
const geometry new THREE.BoxGeometry();
const material new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube new THREE.Mesh(geometry, material);
scene.add(cube);
// 在某个时刻移除对象
function removeObject(object) {// 移除对象scene.remove(object);// 释放几何体资源if (object.geometry) {object.geometry.dispose();}// 释放材质资源if (object.material) {if (Array.isArray(object.material)) {// 如果材质是数组遍历并释放每个材质object.material.forEach((material) {material.dispose();});} else {// 单一材质直接释放object.material.dispose();}}// 释放纹理资源if (object.material.map) {object.material.map.dispose();}
}
// 在某个时刻调用函数移除对象
removeObject(cube);9. 后期处理和着色器优化
限制后期处理通道
每个后期处理过程都会增加渲染负担尽量减少不必要的后期处理步骤。
着色器优化 指定精度强制材质中着色器的精度
const shaderMaterial new THREE.ShaderMaterial({ precision: lowp });保持代码简单尽量保持着色器代码简单避免复杂的逻辑和多层嵌套。 使用贴图纹理尽量使用纹理来代替复杂的计算例如噪声生成。 使用 defines对于不会改变的值使用 defines 而不是 uniform
const shaderMaterial new THREE.ShaderMaterial({defines: { uDisplacementStrength: 1.5 },
});性能优化任重而道远有更好的方法可以分享出来呀。
