一、項(xiàng)目介紹

目的：

• 把傾斜攝影的大體量模型，轉(zhuǎn)換成Thing-JS能高性能使用的WebGL版本；

• 本篇主要為項(xiàng)目流程分享，歡迎私信交流。

資源來(lái)源：

• https://sketchfab.com/3d-models/la-night-city-a85450184c6e4ddf87b49c402641e5b4

原始資源大?。?/span>

• GLTF文件大小 143M（模型130W面 + 5套8096材質(zhì)貼圖 ）

優(yōu)化后資源后大小：

• GLTF文件大小 3M（模型2.1W面 + 3套2048材質(zhì)貼圖）

使用軟件：

• Blender 3.3.6

原始效果截圖：

優(yōu)化效果截圖：

二、優(yōu)化步驟

s01：導(dǎo)入

• 導(dǎo)入原始模型；

s02：建筑重拓?fù)?/span>

1、重拓表面建筑；

• 要求1：面數(shù)盡量精簡(jiǎn)；

• 要求2：拓?fù)淠Ｐ捅M量和原模型貼合；

2、根據(jù)紋素大小拆分模型；

• 紋素：每1米的模型尺寸使用多大的貼圖像素空間；

• 經(jīng)測(cè)試：該園區(qū)在0.5px/m時(shí)，能最大可能保留細(xì)節(jié)的同時(shí)，精簡(jiǎn)貼圖資源大??；

• 所以這里把拓?fù)淠Ｐ筒鸪蓛煞?，使用兩?048的貼圖就能符合要求。

• 如下圖：園區(qū)90m寬的建筑實(shí)際占用：90*0.55=49.5個(gè)像素

3、分模型UV+烘培貼圖；

• UV要求1：不能有重疊；

• UV要求2：UV塊間隔5個(gè)像素；

• 烘培要求：檢測(cè)高模紋理的內(nèi)外距離要調(diào)大一些，這樣能確保不出現(xiàn)黑色無(wú)像素塊；

4、選擇建筑底面，復(fù)制出來(lái)一個(gè)獨(dú)立模型。用作與地面結(jié)合時(shí)，裁剪地面的形狀；

s03：園區(qū)拓?fù)淝皽?zhǔn)備

1、刪除高出地形的建筑；

• 盡量保留所有地形；

• 建筑部分保留越少，后續(xù)操作越方便；

2、刪除地塊的四個(gè)邊緣和底面；

• 原因：拓?fù)滠浖脑硎蔷鶆蚍植迹砸褵o(wú)效部分盡可能都刪掉；

s04：園區(qū)重拓?fù)?/span>

1、應(yīng)用插件，測(cè)試合適的減面數(shù)量級(jí)；

• 插件：Quad Remesher 1.23

2、手動(dòng)補(bǔ)全模型孔洞，以及刪除碎面和重疊面，以及補(bǔ)全地塊邊緣；

• 補(bǔ)孔洞的目的：后續(xù)配合建筑的底面輪廓，重新挖出（bool）完全貼合建筑的孔洞；

• 補(bǔ)孔洞時(shí)要注意：把一些豎直的面都刪了，這些面是建筑殘留，會(huì)影響后續(xù)的bool運(yùn)算；

• 補(bǔ)全地塊邊緣：擠出一個(gè)條狀面，對(duì)齊成直線(xiàn)就行。

3、把高模的材質(zhì)紋理烘培到優(yōu)化好的模型上；

4、利用建筑底面輪廓，把底面的多余面給摳出（bool運(yùn)算）；

• 如果底面與建筑融合后，沒(méi)有交叉重合的bug，這一步可以省略，或者手動(dòng)刪除交叉部分來(lái)代替這一步；

s05：合并模型

1、把建筑和園區(qū)合并；

2、給整體模型制作厚度和底面；

s06：輸出GLTF

1、烘培的貼圖輸出，并壓縮；

• 在PS中，減少圖片的顏色采樣數(shù)量，即可達(dá)到大體積壓縮圖片的目的；

2、重新導(dǎo)入貼圖，把材質(zhì)配置成GLTF輸出的樣式即可；

• 本項(xiàng)目如下圖，制作的為不受光材質(zhì)；