Web Worker在three.js中應用

Web Worker在three.js中應用

阮一峯:Web Worker 使用教程
W3school:HTML 5 Web Workers

這兩個先瞅瞅,練練手。如果有疑問,就看API:MDN web docsWeb Workers API,這個MDN文檔是最全網最全乎的教程了,其他的都來源於此。
Web Worker版本的Ray tracing(光線追蹤) https://nerget.com/rayjs-mt/rayjs.html

Three.js有一個擴展庫叫Physijs,通過該庫可以再場景中引入物理效果。因爲模擬物理效果是非常消耗cpu的,如果再render線程中計算,會導致頁面性能很低,頁面卡死。所以Physijs就是採用了web worker,讓物理效果再後臺中運算,從而不影響場景的渲染。所以web worker其實在three中早有了成熟的案例了。
在使用Physijs的時候需要引入三個文件:

  1. physi.js
  2. physijs_worker.js
  3. ammo.js

physi.js是基於ammo.js開發的,所以需要ammo.js。physi.js也是基於web worker的所以需要一個獨立的worker文件,這三個文件缺一不可。
Physijs GitHub地址:https://github.com/chandlerprall/Physijs
有時間的同學可以去研究他的源碼,讀明白了,worker估計也該精通了。下面是源碼中的一行代碼:this._worker = new Worker( Physijs.scripts.worker || 'physijs_worker.js' );

接着我們開始自己的項目實驗……

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章