五月天av在线,欧美日韩在线观看首页,性孕妇free特大另类

朋友們，還記得 QQ 20 周年 H5 中可可愛愛的太空鵝嗎？

騰訊硬核干貨！如何在頁面極速渲染3D模型？

為了實(shí)現(xiàn)旋轉(zhuǎn)和換膚功能，在 H5 中我們隨機(jī)展示了5種類型的 3D 太空鵝模型，如下圖所示：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

但是在 H5 中引入 3D 模型往往存在資源太大、性能損耗嚴(yán)重、還原不真實(shí)的問題，這也讓許多 3D 創(chuàng)意止步于開發(fā)階段。

如何更好地在 H5 中還原模型呢？本文將從模型網(wǎng)格和貼圖文件兩方面分析，介紹幾種通過技術(shù)角度優(yōu)化加載速度和提高渲染性能的途徑，在保證 3D 模型不減面，貼圖不縮小的情況下，將模型精致地還原在 H5 或其他應(yīng)用程序中。

模型網(wǎng)格壓縮

首先是分析模型網(wǎng)格，對(duì)于大型 3D 資源，我們一般會(huì)通過在模型設(shè)計(jì)時(shí)進(jìn)行「減面」來減少模型幾何體的大小，但也會(huì)帶來模型精致度的缺失。如下圖所示：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

而通過 glTF 配合 Draco 壓縮的方式，可以在視覺效果近乎一致的情況下，讓3D模型文件成倍縮小。下面具體介紹 glTF 格式及 Draco 壓縮工具。

1. 將模型導(dǎo)出為 glTF 格式

glTF 介紹

glTF 稱為「 3D 界的 JPEG」，使用了更優(yōu)的數(shù)據(jù)結(jié)構(gòu)，為應(yīng)用程序?qū)崟r(shí)渲染而生。glTF 有以下幾大特點(diǎn)：

由現(xiàn)有 OpenGL 的維護(hù)組織 Khronos 推出，目的就是為了統(tǒng)一用于應(yīng)用程序渲染的 3D 格式，更適用于基于 OpenGL 的引擎；
減少了 3D 格式中除了與渲染無關(guān)的冗余信息，最小化 3D 文件資源；
優(yōu)化了應(yīng)用程序讀取效率和和減少渲染模型的運(yùn)行時(shí)間；
支持 3D 模型幾何體、材質(zhì)、動(dòng)畫及場景、攝影機(jī)等信息。

glTF 導(dǎo)出格式有兩種后綴格式可供選擇：.gltf 和 .glb：

?.gltf 文件導(dǎo)出時(shí)一般會(huì)輸出兩種文件類型，一是 .bin 文件，以二進(jìn)制流的方式存儲(chǔ)頂點(diǎn)坐標(biāo)、頂點(diǎn)法線坐標(biāo)和貼圖紋理坐標(biāo)、貼圖信息等模型基本數(shù)據(jù)信息；二是 .gltf 文件，本質(zhì)是 json 文件，記錄對(duì)bin文件中模型頂點(diǎn)基本數(shù)據(jù)的索引、材質(zhì)索引等信息，方便編輯，可讀性較好；
?.glb 文件格式只導(dǎo)出一個(gè) .glb 文件，將所有數(shù)據(jù)都輸出為二進(jìn)制流，通常來說會(huì)更小一點(diǎn)，若不關(guān)心模型內(nèi)的具體數(shù)據(jù)可直接選擇此類型。

glTF 轉(zhuǎn)換

目前有些建模工具還不具備導(dǎo)出 glTF 格式功能，可以輸出 FBX / Collada 格式后通過以下工具進(jìn)行轉(zhuǎn)換：

FBX 轉(zhuǎn) glTF

?Facebook 推出的 FBX2glTF 命令行工具，可直接從 github 官網(wǎng)下載 release 版本；
?通過 Paint 3D、Substance Painter 等可視化編輯工具進(jìn)行轉(zhuǎn)換。

Collada 轉(zhuǎn) glTF

COLLADA2GLTF 命令行工具，可轉(zhuǎn)換 .dae 格式的文件，從 GitHub 官網(wǎng)直接下載 release 版本，解壓后在命令行進(jìn)入目錄即可調(diào)用。

glTF 查看

轉(zhuǎn)換后可通過以下查看工具查看 glTF 資源：

Windows 10 及以上自帶的 3D Paints；
glTF 在線查看器：https://gltf-viewer.donmccurdy.com；
對(duì)于開發(fā)者，可直接使用 VSCode 插件—— glTF Tools。

2. 通過 Draco 進(jìn)行壓縮

Draco 及 gltf-pipeline 介紹

Draco 是 Google 推出的一個(gè)用于 3D 模型壓縮和解壓縮的工具庫，上述介紹的 FBX2glTF 及 COLLADA2GLTF 工具也嵌入了 Draco 壓縮功能，除此之外，glTF 資源可通過基于 Draco 開發(fā)的命令行工具 gltf-pipeline 進(jìn)行編碼壓縮，gltf-pipeline 可通過 npm 的方式安裝使用。使用方法如下：

#全局安裝

npm install -g gltf-pipeline

#壓縮glb文件 -b表示輸出glb格式，-d表示壓縮

gltf-pipeline -i model.glb -b -d

#壓縮glb文件并將紋理圖片分離出來

gltf-pipeline -i model.glb -b -d -t

#更多參數(shù)查閱

gltf-pipeline -h

Draco 壓縮分析

通過 Draco 進(jìn)行壓縮基本上是有損的，有兩點(diǎn)表現(xiàn)：

Draco 通過 Edge breaker 3D 壓縮算法改變了模型的網(wǎng)格數(shù)據(jù)的索引方法，缺少了原來的網(wǎng)格順序；
Draco 通過減少頂點(diǎn)坐標(biāo)、頂點(diǎn)紋理坐標(biāo)等信息的位數(shù)，以減少數(shù)據(jù)的存儲(chǔ)量。

但在 gltf-pipeline 或其他壓縮工具中，壓縮程度可通過設(shè)置參數(shù)進(jìn)行調(diào)整，如下所示：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

當(dāng) --draco.compressionLevel 為0時(shí)，將保留原來的網(wǎng)格順序，網(wǎng)格數(shù)據(jù)索引的壓縮力度最小，--draco.quantizeXXXBits 可控制坐標(biāo)等基本數(shù)據(jù)值的位數(shù)，位數(shù)越少壓縮力度越大。由于一個(gè)三角形網(wǎng)格對(duì)應(yīng)多個(gè)頂點(diǎn)坐標(biāo)、頂點(diǎn)法線坐標(biāo)、顏色坐標(biāo)等數(shù)據(jù)，一般來說 --draco.quantizeXXXBits 對(duì)文件的大小影響會(huì)更大。

若不設(shè)置參數(shù)，gltf-pipeline 會(huì)直接以默認(rèn)值壓縮。

雖說 Draco 是有損的，但相對(duì)于直接為模型減面來說，采用 Draco 壓縮方法視覺偏差會(huì)小很多。

壓縮后的 glTF 模型需要通過在應(yīng)用中嵌入 Draco 解碼工具包，主要是對(duì) edge breaker 算法部分進(jìn)行解碼，解碼時(shí)間一般比編碼時(shí)間少，但必須考量模型與工具包的大小對(duì)比。例如 ThreeJS 提供了 draco_decoder 模塊進(jìn)行解碼，draco_decoder 約600KB，若模型資源文件比工具包還小，就沒有必要再引入 Draco 壓縮了。

3. 效果測(cè)試

我們以太空鵝模型為例，只加載模型幾何體，不帶入材質(zhì)屬性，通過ThreeJS 分別加載 FBX / glTF / 壓縮后的glTF 的格式，第三種格式以默認(rèn)參數(shù)壓縮。測(cè)試效果對(duì)比如下：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

從圖中可以看出，文件從 FBX 轉(zhuǎn)換為 glTF 后大小差異不大，但是渲染速度有了明顯提升。

另外經(jīng)過壓縮的 glTF 文件僅為正常 FBX 和 glTF 文件的1/10左右，而在視覺上三者幾何體結(jié)構(gòu)沒有明顯的差異，壓縮后的 glTF 開啟了 worker 線程做 Draco 解碼，多了一小部分模型解碼時(shí)間。

模型貼圖優(yōu)化

上述描述的模型壓縮只針對(duì)模型網(wǎng)格數(shù)據(jù)，不會(huì)對(duì) glTF 文件里的貼圖進(jìn)行處理。然而很多時(shí)候貼圖文件往往大于模型。此時(shí)則需要將模型和貼圖分開進(jìn)行處理（建模時(shí)分開輸出一個(gè)打好 UVtag 紋理坐標(biāo)的「白模」和需要用到的紋理貼圖）。下面介紹如何優(yōu)化用于應(yīng)用程序渲染的貼圖文件。

1. 貼圖加載過程分析

以一個(gè)基于物理引擎渲染的電視機(jī) Demo 模型為例，一般會(huì)輸出幾種尺寸較大的貼圖文件：顏色貼圖，法線貼圖，金屬粗糙貼圖，如下圖例子所示：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

輸出貼圖一般為 png 格式，許多同學(xué)會(huì)通過壓縮 png 或者將 png 轉(zhuǎn)成 jpg 格式減少紋理大小，其實(shí)這種處理方式只優(yōu)化了圖片加載速度，加載完畢后，png/jpg 仍需要全部轉(zhuǎn)碼為紋理(texture)才能開始渲染，而具有相同尺寸的貼圖紋理 GPU 占用內(nèi)存大小相同，故壓縮后的 png/jpg 對(duì)于渲染過程并沒有優(yōu)化。

慶幸的是許多設(shè)備都有可直接用于渲染的 GPU 壓縮紋理(compress texture)格式，壓縮紋理可比由 png 直接轉(zhuǎn)換的紋理減少5倍或以上的大小。如果直接提供壓縮紋理格式，則不需要進(jìn)行 png 的轉(zhuǎn)碼過程且可大大減少紋理內(nèi)存。如下圖方案2所示：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

但由于 GPU 芯片提供商太多，設(shè)備的壓縮紋理格式多種多樣（例如安卓設(shè)備常用格式是 ETC1/ETC2，蘋果設(shè)備是 PVRTC…），手動(dòng)輸出多種格式代價(jià)大，導(dǎo)致方案2較難落地。

2. Basis Universal 壓縮

轉(zhuǎn)折點(diǎn)在于今年五月份，Binomial 公司推出了 Basis Universal 壓縮 GPU 紋理技術(shù)，Basis Universal 支持多種常用的壓縮紋理格式，將 png 轉(zhuǎn)換為 basis 文件后，大小與 jpg 格式差不多，但在 GPU 上比 png/jpg 小6-8倍。

應(yīng)用程序加載 basis 文件后，可通過 basis 轉(zhuǎn)碼器快速轉(zhuǎn)換成適用于設(shè)備的壓縮紋理格式。如下圖(圖片來自Google Blog)所示：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

Basis 用法也比較簡單，可通過 basisu 命令行工具壓縮 png，直接從 github 官網(wǎng)下載Release版本或者通過 CMake 編譯源碼，以 Mac 系統(tǒng)為例（Windows 系統(tǒng)將命令改為 basis.exe），列舉幾種常用用法：

# 進(jìn)入執(zhí)行目錄

cd bin-osx

# 將.png格式轉(zhuǎn)為 .basis

./basisu xxx.png

# 針對(duì)法線/金屬/粗糙貼圖等linear顏色空間的貼圖 需加上-linear

./basisu xxx.png -linear

# 最大限度保證圖片質(zhì)量的轉(zhuǎn)換

./basisu xxx.png -comp_level 5 -max_endpoints 16128 -max_selectors 16128 -no_selector_rdo

# 最大限度壓縮linear顏色空間的貼圖

./basisu xxx.png -linear -global_sel_pal -no_hybrid_sel_cb

生成的 .basis 文件需要在程序中通過轉(zhuǎn)碼器轉(zhuǎn)成設(shè)備的壓縮紋理格式，例如在ThreeJS 中可通過 basisTextureLoader 轉(zhuǎn)換，具體用法可查閱 ThreeJS 官網(wǎng) 。

3. 效果測(cè)試

為了數(shù)據(jù)更加明顯，我們?cè)贛ac Chrome 瀏覽器performance模式下，針對(duì)同一個(gè)電視機(jī)模型利用 ThreeJS 各自加載了 4096 x 4096 大小的顏色貼圖、法線貼圖、金屬與粗糙貼圖，對(duì)比如下：

騰訊硬核干貨！如何在頁面極速渲染3D模型？

由上圖使用 basis 貼圖資源文件大小比 png 減少了11倍以上，同時(shí)主線程的腳本時(shí)間和繪制時(shí)間花銷也小于 png/jpg 貼圖。

需要注意的是，同樣由于不同的壓縮紋理格式不同，在 basis 文件一致的情況下，不同設(shè)備的渲染表現(xiàn)可能會(huì)出現(xiàn)不一致，需要進(jìn)行多端測(cè)試，且目前部分格式不支持 alpha 通道，帶半透明的顏色貼圖若不生效可考慮單獨(dú)拆出 alpha 貼圖。

展望

除了基于 webGL 的 H5，glTF 與 Basis 亦可用于其它基于 OpenGL 渲染的應(yīng)用程序。值得期待的是，目前 Google 與 Binomial 公司正在推進(jìn) Basis Universal 與 glTF 3D 傳輸標(biāo)準(zhǔn)的合作，或許在不久的將來就可以迎來結(jié)合了 basis 貼圖的 glTF 格式，不需要做另外的處理可以直接導(dǎo)入模型到應(yīng)用程序中。

除了壓縮3D 模型，平時(shí)設(shè)計(jì)師還可以利用這個(gè)網(wǎng)站壓縮圖片：