欢迎光临散文网 会员登陆 & 注册

倾斜摄影模型如何高效地用在WebGL上

2023-04-28 22:09 作者:墨白-Moonbeam  | 我要投稿

一、项目介绍

目的:

  • 把倾斜摄影的大体量模型,转换成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

原始效果截图:

step01_02
原版-白模
step01_01
原版-材质预览模式

优化效果截图:

step06_02
优化版-白模
优化版-材质预览模式

二、优化步骤

s01:导入

  • 导入原始模型;

s02:建筑重拓扑

1、重拓表面建筑;

    • 要求1:面数尽量精简;

    • 要求2:拓扑模型尽量和原模型贴合;

step02_01
step02_02

2、根据纹素大小拆分模型;

    • 纹素:每1米的模型尺寸使用多大的贴图像素空间;

    • 经测试:该园区在0.5px/m时,能最大可能保留细节的同时,精简贴图资源大小;

    • 所以这里把拓扑模型拆成两份,使用两张2048的贴图就能符合要求。

    • 如下图:园区90m宽的建筑实际占用:90*0.55=49.5个像素

step02_07

3、分模型UV+烘培贴图;

    • UV要求1:不能有重叠;

    • UV要求2:UV块间隔5个像素;

    • 烘培要求:检测高模纹理的内外距离要调大一些,这样能确保不出现黑色无像素块;

step02_03
左上UV / 左下烘培贴图 / 右边模型
step02_04

左上UV / 左下烘培贴图 / 右边模型

4、选择建筑底面,复制出来一个独立模型。用作与地面结合时,裁剪地面的形状;

step02_06

s03:园区拓扑前准备

1、删除高出地形的建筑;

    • 尽量保留所有地形;

    • 建筑部分保留越少,后续操作越方便;

step03_01

2、删除地块的四个边缘和底面;

    • 原因:拓扑软件的原理是均匀分布,所以要把无效部分尽可能都删掉;

step03_02

s04:园区重拓扑

1、应用插件,测试合适的减面数量级;

    • 插件:Quad Remesher 1.23

step04_01
step04_02

2、手动补全模型孔洞,以及删除碎面和重叠面,以及补全地块边缘;

    • 补孔洞的目的:后续配合建筑的底面轮廓,重新挖出(bool)完全贴合建筑的孔洞;

    • 补孔洞时要注意:把一些竖直的面都删了,这些面是建筑残留,会影响后续的bool运算;

    • 补全地块边缘:挤出一个条状面,对齐成直线就行。

step05_01

3、把高模的材质纹理烘培到优化好的模型上;

step05_03

4、利用建筑底面轮廓,把底面的多余面给抠出(bool运算);

    • 如果底面与建筑融合后,没有交叉重合的bug,这一步可以省略,或者手动删除交叉部分来代替这一步;

step05_02
step05_04
step05_05

s05:合并模型

1、把建筑和园区合并;

2、给整体模型制作厚度和底面;

step06_03

s06:输出GLTF

1、烘培的贴图输出,并压缩;

    • 在PS中,减少图片的颜色采样数量,即可达到大体积压缩图片的目的;

step06_04

2、重新导入贴图,把材质配置成GLTF输出的样式即可;

    • 本项目如下图,制作的为不受光材质;

step07_01



倾斜摄影模型如何高效地用在WebGL上的评论 (共 条)

分享到微博请遵守国家法律