倾斜摄影模型如何高效地用在WebGL上 当前简讯
2023-04-28 22:11:59来源：哔哩哔哩
一、项目介绍
目的：
把倾斜摄影的大体量模型，转换成Thing-JS能高性能使用的WebGL版本；
(资料图片)
本篇主要为项目流程分享，欢迎私信交流。
资源来源：
https://sketchfab.com/3d-models/la-night-city-a85450184c6e4ddf87b49c402641e5b4
原始资源大小：
GLTF文件大小 143M（模型130W面 + 5套8096材质贴图 ）
优化后资源后大小：
GLTF文件大小 3M（模型2.1W面 + 3套2048材质贴图）
使用软件：
Blender 3.3.6
原始效果截图：
优化效果截图：
二、优化步骤
s01：导入
导入原始模型；
s02：建筑重拓扑
1、重拓表面建筑；
要求1：面数尽量精简；
要求2：拓扑模型尽量和原模型贴合；
2、根据纹素大小拆分模型；
纹素：每1米的模型尺寸使用多大的贴图像素空间；
经测试：该园区在0.5px/m时，能最大可能保留细节的同时，精简贴图资源大小；
所以这里把拓扑模型拆成两份，使用两张2048的贴图就能符合要求。
如下图：园区90m宽的建筑实际占用：90*0.55=49.5个像素
3、分模型UV+烘培贴图；
UV要求1：不能有重叠；
UV要求2：UV块间隔5个像素；
烘培要求：检测高模纹理的内外距离要调大一些，这样能确保不出现黑色无像素块；
4、选择建筑底面，复制出来一个独立模型。用作与地面结合时，裁剪地面的形状；
s03：园区拓扑前准备
1、删除高出地形的建筑；
尽量保留所有地形；
建筑部分保留越少，后续操作越方便；
2、删除地块的四个边缘和底面；
原因：拓扑软件的原理是均匀分布，所以要把无效部分尽可能都删掉；
s04：园区重拓扑
1、应用插件，测试合适的减面数量级；
插件：Quad Remesher 1.23
2、手动补全模型孔洞，以及删除碎面和重叠面，以及补全地块边缘；
补孔洞的目的：后续配合建筑的底面轮廓，重新挖出（bool）完全贴合建筑的孔洞；
补孔洞时要注意：把一些竖直的面都删了，这些面是建筑残留，会影响后续的bool运算；
补全地块边缘：挤出一个条状面，对齐成直线就行。
3、把高模的材质纹理烘培到优化好的模型上；
4、利用建筑底面轮廓，把底面的多余面给抠出（bool运算）；
如果底面与建筑融合后，没有交叉重合的bug，这一步可以省略，或者手动删除交叉部分来代替这一步；
s05：合并模型
1、把建筑和园区合并；
2、给整体模型制作厚度和底面；
s06：输出GLTF
1、烘培的贴图输出，并压缩；
在PS中，减少图片的颜色采样数量，即可达到大体积压缩图片的目的；
2、重新导入贴图，把材质配置成GLTF输出的样式即可；
本项目如下图，制作的为不受光材质；
标签：
营业执照公示信息