HDRPrefilterTexture
介紹
在 THREE 中使用 HDR 需要經(jīng)過 PMREMGenerator 處理才能使用，并且在小程序 WebGL 環(huán)境下有部分機(jī)型在前后切換頁面會偶現(xiàn)生成出錯誤的紋理(見小程序 WebGL 奇妙的 Bug 之旅 )，該項(xiàng)目的功能是導(dǎo)出PMREMGenerator生成產(chǎn)物到 PNG，再利用 PNG 無損壓縮實(shí)現(xiàn)體積減少
輸入大小為 5.3MB 的http://www.yanhuangxueyuan.com/threejs/examples/textures/equirectangular/venice_sunset_2k.hdr
| 環(huán)境 | REGBLoader 耗時 | PMREMGenerator 耗時 | 總耗時 |
|---|---|---|---|
| 模擬器 | 144ms | 17ms | 161ms |
| 小米 8 | 509ms | 55ms | 564ms |
注：RGBELoader 主要是加載網(wǎng)絡(luò)耗時
// HDR原本加載路徑
RGBELoader -> PMREMGenerator -> 設(shè)置scene.environment
// 優(yōu)化后的路徑
TextureLoader -> 設(shè)置texture屬性 -> 設(shè)置scene.environment
而PMREMGenerator產(chǎn)物導(dǎo)出后的PNG只有1046.863kb，體積減少了4415.182kb
所以就有了這個HDRPrefilterTexture的項(xiàng)目，同時解決小程序下某些機(jī)型 bug，同時也優(yōu)化加載時間，但是僅僅適用于 HDR 需要PMREMGenerator處理的場景。
其實(shí)也是一個優(yōu)化的思路，其他紋理需要經(jīng)過特定處理才能直接使用的，均可以把產(chǎn)生物導(dǎo)出。
Demo
image
TODO
- 支持批量導(dǎo)出 done
- 生成導(dǎo)出大小對比表格 done
倉庫地址
https://github.com/deepkolos/hdr-prefilter-texture
https://github.com/deepkolos/three-platformize
LiveDemo
https://deepkolos.github.io/hdr-prefilter-texture/index.html
