Three.js渲染模型卡頓問題的一些優(yōu)化辦法
事先說明
優(yōu)化方法是根據(jù)chatGPT的回答下，我這里記錄一下，有的方法進(jìn)行了嘗試，有的還沒有。
1、模型面數(shù)過多導(dǎo)致渲染卡頓
可以通過減少面數(shù)來優(yōu)化，也可以使用LOD技術(shù)（Level of Detail）在不同距離下使用不同的模型細(xì)節(jié)來優(yōu)化。
使用LOD技術(shù)可以在不同距離下使用不同的模型細(xì)節(jié)來優(yōu)化three.js渲染性能，下面是具體步驟：
創(chuàng)建多個模型，每個模型的面數(shù)和細(xì)節(jié)不同，這些模型應(yīng)該是同一個對象的不同版本。
將這些模型按照從低到高的細(xì)節(jié)順序添加到同一個
LOD（Level of Detail）對象中，如下所示：
const lod = new THREE.LOD(); const lowDetailModel = ... // 低細(xì)節(jié)模型 const midDetailModel = ... // 中細(xì)節(jié)模型 const highDetailModel = ... // 高細(xì)節(jié)模型 lod.addLevel(lowDetailModel, 0); // 添加低細(xì)節(jié)模型，距離為0 lod.addLevel(midDetailModel, 100); // 添加中細(xì)節(jié)模型，距離為100 lod.addLevel(highDetailModel, 200); // 添加高細(xì)節(jié)模型，距離為200
- 將
LOD對象添加到場景中。
scene.add(lod);
- 在渲染循環(huán)中，根據(jù)相機(jī)與LOD對象的距離，自動選擇當(dāng)前需要顯示的模型細(xì)節(jié)等級。可以使用
THREE.LOD對象的update方法來實(shí)現(xiàn)。
function render() {
requestAnimationFrame(render);
lod.update(camera);
renderer.render(scene, camera);
}
2、材質(zhì)貼圖過大導(dǎo)致渲染卡頓
可以通過減小貼圖尺寸，壓縮貼圖格式，使用紋理集（Texture Atlas）等方式來優(yōu)化。
使用紋理集（Texture Atlas）可以將多張小紋理圖合并成一張大紋理圖，從而減少渲染時的紋理切換次數(shù)，優(yōu)化three.js渲染性能，下面是具體步驟：
- 創(chuàng)建一張大紋理圖，并將多張小紋理圖拼接在一起，這些小紋理圖應(yīng)該是同一對象的不同部分，如下所示：
const texture = new THREE.TextureLoader().load('atlas.png');
const material = new THREE.MeshBasicMaterial({ map: texture });
- 將每個物體的UV坐標(biāo)映射到對應(yīng)的小紋理圖區(qū)域，需要根據(jù)小紋理圖在大紋理圖中的位置和大小計(jì)算出UV坐標(biāo)，如下所示：
const geometry = new THREE.BoxGeometry(1, 1, 1);
const uvAttribute = geometry.attributes.uv;
for (let i = 0; i < uvAttribute.count; i++) {
const u = uvAttribute.getX(i);
const v = uvAttribute.getY(i);
// 根據(jù)小紋理圖在大紋理圖中的位置和大小計(jì)算出UV坐標(biāo)
uvAttribute.setXY(i, u * smallTextureWidth / bigTextureWidth + smallTextureX / bigTextureWidth, v * smallTextureHeight / bigTextureHeight + smallTextureY / bigTextureHeight);
}
- 在渲染循環(huán)中，更新大紋理圖的偏移和縮放值。
function render() {
requestAnimationFrame(render);
const time = Date.now() * 0.001;
texture.offset.x = time * 0.1; // x方向偏移量
texture.offset.y = time * 0.2; // y方向偏移量
texture.repeat.set(2, 2); // 橫向和縱向縮放值
renderer.render(scene, camera);
}
3、著色器復(fù)雜度過高導(dǎo)致渲染卡頓
可以通過簡化著色器，使用預(yù)編譯的著色器，使用Instancing等方式來優(yōu)化。
使用Instancing（實(shí)例化）可以將多個相同的物體復(fù)用同一個幾何體和材質(zhì)，并在渲染時進(jìn)行一次性繪制，從而減少渲染調(diào)用次數(shù)，優(yōu)化three.js渲染性能，下面是具體步驟：
- 創(chuàng)建一個幾何體和材質(zhì)，將它們分別作為多個物體的原型。
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
- 創(chuàng)建一個
InstancedBufferGeometry對象，并將原型幾何體的屬性復(fù)制到它的屬性中。
const instances = 10000; // 實(shí)例數(shù)量
const instancedGeometry = new THREE.InstancedBufferGeometry();
instancedGeometry.copy(geometry); // 復(fù)制幾何體屬性
const translations = new Float32Array(instances * 3); // 實(shí)例位置數(shù)組
for (let i = 0; i < instances; i++) {
translations[i * 3] = Math.random() * 100 - 50;
translations[i * 3 + 1] = Math.random() * 100 - 50;
translations[i * 3 + 2] = Math.random() * 100 - 50;
}
instancedGeometry.setAttribute('translation', new THREE.InstancedBufferAttribute(translations, 3));
- 創(chuàng)建一個InstancedMesh對象，并將原型材質(zhì)和實(shí)例化幾何體作為它的參數(shù)。
const instancedMesh = new THREE.InstancedMesh(instancedGeometry, material, instances); scene.add(instancedMesh);
- 在渲染循環(huán)中，更新實(shí)例化幾何體的屬性，即實(shí)例的位置、旋轉(zhuǎn)和縮放等信息。
function render() {
requestAnimationFrame(render);
const time = Date.now() * 0.001;
for (let i = 0; i < instances; i++) {
const translation = instancedMesh.geometry.attributes.translation;
translation.setXYZ(i, Math.sin(time + i * 0.5) * 5, Math.cos(time + i * 0.3) * 5, i * 0.1);
}
instancedMesh.geometry.attributes.translation.needsUpdate = true; // 更新實(shí)例位置屬性
renderer.render(scene, camera);
}
4、不合理的渲染方式導(dǎo)致渲染卡頓
可以通過使用合適的渲染方式，如WebGL2渲染，使用Web Worker等方式來優(yōu)化。
Ⅰ、使用WebGL2可以在現(xiàn)代瀏覽器中利用新的圖形處理能力，優(yōu)化three.js渲染性能，下面是具體步驟：
① 在渲染器中啟用WebGL2。
const renderer = new THREE.WebGLRenderer({ canvas: canvas, context: canvas.getContext('webgl2') });
② 使用WebGL2支持的新特性，如transform feedback、instanced arrays等。
例如，以下代碼演示了如何使用transform feedback來記錄頂點(diǎn)位置的變化：
const transformFeedback = new THREE.WebGL2TransformFeedback();
const bufferGeometry = new THREE.BufferGeometry();
const positions = new Float32Array([0, 0, 0]);
bufferGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const shader = new THREE.ShaderMaterial({
vertexShader: `
out vec3 transformedPosition;
void main() {
transformedPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(1.0);
}
`,
transformFeedback: {
// 將頂點(diǎn)位置記錄到transformedPosition變量中
varyings: ['transformedPosition'],
// 開啟transform feedback
enabled: true,
// 設(shè)置bufferGeometry的位置屬性為transform feedback的輸出屬性
bufferGeometry: bufferGeometry
}
});
const mesh = new THREE.Mesh(bufferGeometry, shader);
scene.add(mesh);
function render() {
requestAnimationFrame(render);
renderer.setRenderTarget(null);
// 開始transform feedback
transformFeedback.begin();
renderer.render(scene, camera);
// 結(jié)束transform feedback，并將變化后的頂點(diǎn)位置存儲到bufferGeometry中
transformFeedback.end();
// 更新頂點(diǎn)位置
positions.set(bufferGeometry.getAttribute('position').array);
bufferGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
renderer.render(scene, camera);
}
---------------------------------------------------------------分隔線-----------------------------------------------------------------
Ⅱ、使用Web Worker可以將計(jì)算密集型的任務(wù)分離到另一個線程中，從而避免主線程被阻塞，優(yōu)化three.js渲染性能，下面是具體步驟：
① 創(chuàng)建一個Web Worker，用于處理計(jì)算密集型的任務(wù)。
const worker = new Worker('worker.js');
② 在Web Worker中定義處理函數(shù)。
// worker.js
function process(data) {
// 計(jì)算密集型的任務(wù)
return result;
}
onmessage = function(event) {
const result = process(event.data);
postMessage(result);
};
③ 在主線程中將任務(wù)發(fā)送到Web Worker，并設(shè)置回調(diào)函數(shù)處理返回結(jié)果。
function render() {
requestAnimationFrame(render);
// 發(fā)送任務(wù)到Web Worker
worker.postMessage(data);
worker.onmessage = function(event) {
const result = event.data;
// 處理返回結(jié)果
};
renderer.render(scene, camera);
}
通過以上步驟，就可以使用Web Worker來將計(jì)算密集型的任務(wù)分離到另一個線程中，從而避免主線程被阻塞，優(yōu)化three.js渲染性能。需要注意的是，Web Worker中無法直接訪問主線程的DOM和three.js對象，需要通過消息傳遞來實(shí)現(xiàn)通信。
5、CPU和GPU資源不平衡導(dǎo)致渲染卡頓
可以通過分析性能監(jiān)控，優(yōu)化代碼邏輯，使用requestAnimationFrame等方式來平衡CPU和GPU資源占用。
使用requestAnimationFrame可以讓瀏覽器根據(jù)自身的渲染節(jié)奏調(diào)整動畫的幀率，從而避免過度渲染，優(yōu)化three.js渲染性能，下面是具體步驟：
- 將渲染函數(shù)作為requestAnimationFrame的回調(diào)函數(shù)。
function render() {
// 渲染代碼
renderer.render(scene, camera);
// 請求下一幀動畫
requestAnimationFrame(render);
}
- 在初始化時調(diào)用一次requestAnimationFrame，啟動動畫。
var animationId = requestAnimationFrame(render);
- 在動畫結(jié)束時，記得停止requestAnimationFrame，以避免不必要的資源消耗。
function stop() {
cancelAnimationFrame(animationId);
}
需要注意的是，使用requestAnimationFrame時需要避免在渲染循環(huán)中進(jìn)行過多的計(jì)算，以免影響渲染性能。
總結(jié)
到此這篇關(guān)于Three.js渲染模型卡頓問題的一些優(yōu)化辦法的文章就介紹到這了,更多相關(guān)Three.js渲染模型卡頓內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了ES6中的箭頭函數(shù),結(jié)合實(shí)例形式詳細(xì)分析了ES6中箭頭函數(shù)的基本語法、特性、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
這篇文章主要介紹了javascript常用函數(shù)，15個常用函數(shù)，都具有很高的實(shí)用性，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript兩種axios取消請求方式小結(jié)
本文主要介紹了JavaScript兩種axios取消請求方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
使用javascript:將其它類型值轉(zhuǎn)換成布爾類型值的解決方法詳解
本篇文章是對使用javascript:將其它類型值轉(zhuǎn)換成布爾類型值的解決方法進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
JS中async/await實(shí)現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了async/await實(shí)現(xiàn)異步調(diào)用的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子
今天小編就為大家分享一篇layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存
這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-10-10
JavaScript閉包_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript閉包，閉包(closure)是Javascript語言的一個難點(diǎn),也是它的特色,很多高級應(yīng)用都要依靠閉包實(shí)現(xiàn)2017-06-06
Javascript實(shí)現(xiàn)簡單二級下拉菜單實(shí)例
這篇文章主要介紹Javascript實(shí)現(xiàn)二級下拉菜單的具體過程,需要的朋友可以參考下2014-06-06
Bootstrap Tooltip顯示換行和左對齊的解決方案
小編在使用Bootstrap的Tooltip功能時遇到一些小問題，換行丟失，文字不是左對齊。下面小編給大家介紹下Bootstrap Tooltip顯示換行和左對齊的解決方案，感興趣的朋友一起看看吧2017-10-10