适用于WEB端的3D模型及贴图压缩研究
一、模型及贴图概述
三维模型文件主要包括“模型”和“贴图”两个部分。目前主要的文件格式为 .fbx(带动画)；.obj（不带动画）；.stl(仅模型)
适用于Web端的三维模型格式：
- 1,gltf：目前看集fbx的各种优势，带动画，带材质，带贴图并且还比较小。可以使用gltf-pipeline命令行工具压缩gltf模型，压缩后约为压缩前的十分之一大小。
- 2,drc格式：一种压缩效率极高的格式（类似.obj不带动画），普通模型都可以达到KB级别，并且本身带有UV信息，不过和stl格式类似会自动把模型的部件合并，需要在web端分离，不然如何批量给单个部件加材质会成为一个很棘手的问题。目前可以把不同材质的部件分别导出，分别在web端添加材质。
- 3.贴图也可以在一定程度上起到压缩模型的作用，如下图使用法线贴图表现模型的凸起从而减小了三维文件大小。
图片压缩：TinyPNG；TinyJPG
如下图，Gltf格式模型；TinyPNG格式贴图在web的三维场景的基本效果，对于模型精度基本没有影响。
二、纹理贴图
贴图的定义：贴图是一张为了表现三维模型真实度，赋予模型的二维图片。
如何获得贴图：
贴图可以使用ps制作，也可以在三维软件中使用高模拓扑得到，更专业的是使用Substance painter,值得一提的是Substance painter支持 导出glTF 2.0场景 https:// store.substance3d.com/b log/new-substance-painter-autosave-gltf-and-felix-exports
贴图的大小：贴图的尺寸一般是正方形，2的N次方，256，1024，2048，其中后两种比较常用。此外贴图应该尽可能的小，贴图中空白面积低于百分之十为比较好的贴图。
1.不推荐的贴图使用例子（一个小盒子的四个面使用四张图片）：
2.贴图利用率比较好的例子：
3.贴图利用率极高的例子：
贴图类型：漫反射贴图、法线贴图、AO贴图（环境光遮蔽贴图），高光贴图、凹凸贴图、透明贴图及自发光贴图。在实际应用中，根据需求适当取舍
漫反射贴图：
凹凸贴图：凹凸贴图和法线贴图一定程度上表现模型表面的高低深度，可以压缩模型顶点数，节约计算资源。当然这里默认三维模型一般都比图片大特别多。
法线贴图：法线贴图是可应用于3D表面的特殊纹理。作为凹凸纹理的延伸，它允许每个平面的像素具有高度值，包含表面信息的许多细节，并且可以在光滑对象的表面上创建各种特殊的立体视觉效果。 法线贴图可以根据光线和阴影计算模型表面的细节，这是一种二维效果，因此它不会更改模型的形状，但会计算模型纹理的其他细节。一般情况下，模型的面数越多，可以表现的细节越多，视觉效果就会越好，但是，由于面数和顶点数变得越来越多，软件的计算量也随之上涨，不仅对电脑的负荷变得越来越大，绘制过程也会越来越不流畅，这就导致了效果永远是和性能成反比的。纹理映射是最早的一种方法，通过纹理直接贴在模型表面，提供了一些细节，但是普通的纹理贴图只是影响最终像素阶段输出的颜色值，不能让模型有一些凹凸之类的细节表现，而法线贴图提供了通过低面数模型来模拟高面数模型的效果这种途径，增加细节层次感，效果与高模相差不多，但是大大降低了模型的面数。可以简单理解为：低模+法线贴图=高模
高光贴图:白的的部分会发生反射（比如海洋），黑色的部分不会（比如陆地）
环境贴图：也叫天空盒，
三、关于UV的基础知识
展UV
“UV”是纹理贴图坐标的缩写。简单的模型可使用max,maya自带的展UV工具制作，例如人物等需要使用专业的展UV软件制作，例如UVLayout。UV定义了关于图片上每个像素点位置的信息。 这些点与3D模型相息息关以确定表面纹理贴图的位置。UV是图像上每个像素点到模型对象表面的准确映射。通过软件平滑值映射在点与图像位置之间的差距，这就是所谓的UV贴图。简单地说：模型是立体的，坐标轴需要与现实世界相符。将平面二维（UV）图像的每个点与三维模型（XYZ）的每个点相关联，并且此中间体需要UV坐标进行控制。从2D到3D，我们说“贴图映射”，其实就是3d模型在平面纹理上的投影。
如下图是人头的另一种展UV的方法不同的展UV方法得到的UV贴图是不一样的，通常情况下要隐藏接缝，尽可能的平滑UV,一般情况下UV位置排布合适，贴图就比较节省空间。想把多个贴图放在一张纹理贴图上，首先要把他们的UV展在一张UV贴图上，当然也有人使用unity自带的图集合并工具做这件事，在比较简单的模型这种方法是可行的。
