快捷導(dǎo)航

three.js中多線程的使用及性能測(cè)試詳解

更新時(shí)間：2021年01月07日 15:25:14 作者：郭先生的博客

這篇文章主要給大家介紹了關(guān)于three.js中多線程的使用及性能測(cè)試的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

今天郭先生說(shuō)一下WebWorker以及WebWorker在three.js中的應(yīng)用。我們都知道Javascript是單線程的，比如執(zhí)行js代碼的同時(shí)UI渲染就會(huì)停止，對(duì)于多核CPU的點(diǎn)腦，這一點(diǎn)讓人難以接受，好在Web Worker的出現(xiàn)多少解決了一些問(wèn)題。官方說(shuō)Web Worker指的是一種可由腳本創(chuàng)建的后臺(tái)任務(wù)，任務(wù)執(zhí)行中可以向其創(chuàng)建者收發(fā)信息。要?jiǎng)?chuàng)建一個(gè) Worker ，只須調(diào)用 Worker(URL) 構(gòu)造函數(shù)，函數(shù)參數(shù) URL 為指定的腳本。關(guān)于Web Worker的更多知識(shí)請(qǐng)閱讀Web Worker。線案例請(qǐng)點(diǎn)擊web-worker,

1. 在three.js中使用多線程

在three.js中使用Web Worker經(jīng)常發(fā)生在大量計(jì)算造成CUP阻塞的情況下，我們舉一個(gè)例子，比如說(shuō)我們制作了1000個(gè)Mesh，

讓他們簡(jiǎn)單的動(dòng)起來(lái)，CPU幾乎沒(méi)有什么壓力，F(xiàn)PS會(huì)在60左右，但是如果讓這1000個(gè)Mesh的位置都需要大量計(jì)算才能得到，那么FPS就會(huì)很低（和計(jì)算量成負(fù)相關(guān)），下面是一段代碼

for(let i=0; i<num; i++) {
 let angle = positions[i].y / (1000 / (Math.PI * 10));
 positions[i].x = positions[i].x + Math.sin(angle);
 positions[i].z = positions[i].z + Math.cos(angle);
 positions[i].y = positions[i].y + 1;
		//上面就是簡(jiǎn)單的位置變化，下面的代碼模擬復(fù)雜的變化，累加100000次（這是非常占用線程的情況）
 for(let j=1, total=1; j<=100000; j++) {
 total += j;
 }
 if(positions[i].y > 500) {
 positions[i].y = positions[i].y - 1000;
 }
}
for(var i=0; i<num; i++) {
 group.children[i].position.set(positions[i].x, positions[i].y, positions[i].z);
}

positions是儲(chǔ)存1000個(gè)Mesh位置信息的數(shù)組，group里面儲(chǔ)存了所有的Mesh,每次渲染都更改positions的位置信息，然后給Group的每一個(gè)Mesh設(shè)置新值，這種情況下FPS會(huì)低至7FPS，轉(zhuǎn)動(dòng)場(chǎng)景可以很明顯的感覺(jué)到卡頓。接下來(lái)我們使用Web Worker處理這個(gè)問(wèn)題，主線程代碼如下

myWorker = new Worker('/static/js/worker.js');
myWorker.postMessage(positions);
myWorker.onmessage = e => {
 let positions = e.data;
 for(var i=0; i<num; i++) {
 group.children[i].position.set(positions[i].x, positions[i].y, positions[i].z);
 }
}

腳本代碼如下

onmessage = function(e) {
 let num = 1000;
 let positions = e.data;
 setInterval(e => {
 for(let i=0; i<num; i++) {
  let angle = positions[i].y / (1000 / (Math.PI * 10));
  positions[i].x = positions[i].x + Math.sin(angle);
  positions[i].z = positions[i].z + Math.cos(angle);
  positions[i].y = positions[i].y + 1;
  for(let j=1, total=1; j<=100000; j++) {
  total += j;
  }
  if(positions[i].y > 500) {
  positions[i].y = positions[i].y - 1000;
  }
 }
 postMessage(positions);
 }, 1000 / 60)
};

主要代碼和未使用Web Worker幾乎一樣，只不過(guò)是將處理位置的代碼放在新的線程中完成，setInterval定時(shí)器每一次完成位置計(jì)算都會(huì)通過(guò)postMessage(positions)將位置信息返回給主線程，主線程通過(guò)onmessage接受信息，返回對(duì)象的data屬性就是新的positions。這樣一來(lái)FPS可以達(dá)到60左右，轉(zhuǎn)動(dòng)場(chǎng)景感覺(jué)的到卡頓。這是十分讓人欣喜的。