【Unity Shader】纹理实践2.0：基本属性&封装和滤波模式

蔚落 2023-09-27 11:33 48阅读 0赞

**关于理论知识**

[【技术美术图形部分】纹理基础1.0-纹理管线\_flashinggg的博客-CSDN博客][1.0-_flashinggg_-CSDN]

上篇是总结了纹理映射一整个的流程，其中2.3纹理采样中提到了需要进行两块设置：

*  设置封装模式——Wrap Mode，介绍了封装模式都有哪些
 *  设置过滤模式——Filter Mode，介绍了为什么要过滤的目的及方法

本篇博客算是在Unity Shader中，对上述两种模式进行的实践，理论过程就不再赘述。

**参考的书籍**

《 Unity Shader 入门精要》——冯乐乐

**我用的Unity版本**

我用的Unity版本是Unity2021.3.8f1，而书里用的Unity版本是Unity5吧，Unity的一些参数设置已经有些不一样了，学习的时候需注意。

--------------------

## 1 纹理面板的基础属性 ##

《入门精要》书中的例子都是可以直接在书的github上一口气下载下来。给的纹理其实就是一张张图片，以导入的7.1.2章节的纹理图片为例，属性栏如下：

![98e8742c42014af9b58abba7a80a3395.png][]

### 1.1 纹理类型 Texture Type ###

[纹理类型 - Unity 手册 (unity3d.com)][- Unity _ _unity3d.com]

我们在导入纹理图片时，需要正确的设置纹理类型才能给Unity Shader传递正确的纹理信息。正常来说按默认设置的Default就行，Default是所有纹理最常见的类型，可用于访问导入的大多数的纹理属性。

除了Default之外还有，Normal Map——法线贴图；Sprite——精灵和UI的图；Cursor——鼠标指针的样子图等等。

### 1.2 纹理形状 Texture Shape ###

可选的有最常用的2D纹理；3D纹理；Cube（立方体贴图）等，默认是2D纹理。

### 1.3 sRGB (Color Texture) ###

提示内容是这样的

![c6aba73a8cd34c4791fd88b6312f942d.png][]

#### 1.3.1 伽马颜色空间和线性颜色空间 ####

先进行一个复习！在[【技术美术图形部分】2.1 色彩空间][2.1]的就重点介绍了线性空间和伽马空间以及二者为什么需要相互转换，看一遍相当于复习吧！

需要知道的最重要的一点是：渲染过程使用线性空间，最终显示使用伽马空间。而传入的纹理有“进行了sRGB色彩空间转换”“没有进行sRGB色彩空间转换”的类型区别，于是！出现以下两种情况：

*  传入一张已经转换为sRGB的纹理图片（已保存矫正的Gamma值） --> GPU自动转换为线性空间 --> 传递给Shader做处理
 *  传入一张没有转换为sRGB的纹理图片（也就是线性空间下的） --> Shader中手动写入转换到伽马空间的代码，再做处理

一般来说，都提倡让GPU去自动做这件事，省去了Shader中写入转换函数的麻烦，以此优化游戏性能。

#### 1.3.2 勾选sRGB属性的意义 ####

按照上图，我理解的是：如果勾选了sRGB这项，代表Unity会**自动**对传入的纹理做预处理（对传入的纹理在渲染前进行Gamma矫正）并存入伽马空间，我们就不需要在Shader中手动写入了。

案例对比可以参考文章[Unity中纹理启用SRGB的坑\_小葱man的博客-CSDN博客][Unity_SRGB_man_-CSDN]

同时这篇文章还指出一点，我们不需要在shader写入显示前的线性-->伽马空间的函数，这个操作也是由Unity替我们完成。

### 1.4 Default类型的Alpha相关 ###

*  Alpha Source——指定如何生成Alpha通道
 *  Alpha is Transparency——如果指定的Alpha通道为透明度，这个属性可以配合着使用
 *  Ignore PNG file gamma——忽略PNG文件的gamma值

## 2 Wrap Mode 封装模式 ##

这是纹理比较重要的一个属性，其实就是在纹理管线中的提到的纹理采样会用到的**映射函数**。关于每种映射方式，在纹理管线那篇博客已经讨论过了，这里重点来在Unity中实践实践，加深印象。

场景中创建材质，Shader就用7.1之前的，并给Tilling平铺属性一个(3, 3)属性，来看看不同封装模式的效果：

### 2.1 Repeat效果 ###

![a69a341f358a49bf8264705d33178f61.png][]

### 2.2 Clamp效果 ###

![436ab9982ed14cf78c4854cc7a0f0b65.png][]

### 2.3 Mirror效果 ###

![1ed5068da4f6445d9c1e2abe4bc9e818.png][]

## 3 Filter Mode 过滤模式 ##

### 3.1 放大纹理 ###

下图从左到右依次为Point、Bilinear、Trilinear三种过滤模式，64X64 -> 256X256的效果：

![c3ddccad50b34362ae680d6fe171a03d.png][]![ac2055f8536246fcabd68cc07116c8ea.png][]![d3f52cb8ba6844f886d394d2ede0ba9b.png][]

### 3.2 缩小纹理 ###

#### 3.2.1 MipMap的应用 ####

对于缩小纹理，一般采取MipMap技术。对于导入的纹理，默认开启了MipMap。

![ed282e5001054cb796a0ce3e2470d079.png][]

让我们看看对于渐远地面，MipMap开启与不开启的效果对比（均采用Bilinear滤波）

![f8914aaca4d74f86bb9b720048746380.png][]

**Bilinear滤波+MipMap**

![70e3850698ef4c1f8c88aa714581162a.png][]

**Bilinear滤波（不加MipMap）**

emmmm...后者简直不忍直视，可见MipMap做了多么大的贡献！

#### 3.2.2 不同滤波结合MipMap的效果 ####

上至下依次是：Point、Bilinear、Trilinear和MipMap技术结合的效果：

![2ce27b0e2d6d4e80aa8a8a39ab129600.png][]

![f8914aaca4d74f86bb9b720048746380.png][]

![c5db6908254f44ae9d82062b298fae5e.png][]

[1.0-_flashinggg_-CSDN]: https://blog.csdn.net/qq_41835314/article/details/126217794?spm=1001.2014.3001.5502
[98e8742c42014af9b58abba7a80a3395.png]: https://img-blog.csdnimg.cn/98e8742c42014af9b58abba7a80a3395.png
[- Unity _ _unity3d.com]: https://docs.unity3d.com/cn/2019.4/Manual/TextureTypes.html#:~:text=%E9%80%9A%E8%BF%87%20%E7%BA%B9%E7%90%86%E5%AF%BC%E5%85%A5%E5%99%A8%20%28Texture%20Importer%29%20%E5%8F%AF%E5%B0%86%E4%B8%8D%E5%90%8C%E7%B1%BB%E5%9E%8B%E7%9A%84%20%E7%BA%B9%E7%90%86%20%E5%AF%BC%E5%85%A5,Unity%20Editor%E3%80%82%20%E4%BB%A5%E4%B8%8B%E6%98%AF%E7%BA%B9%E7%90%86%E6%A3%80%E8%A7%86%E9%9D%A2%E6%9D%BF%20%28Texture%20Inspector%29%20%E7%AA%97%E5%8F%A3%E4%B8%AD%E5%8F%AF%E7%94%A8%E4%BA%8E%E5%9C%A8%20Unity%20%E4%B8%AD%E9%85%8D%E7%BD%AE%E5%90%84%E7%A7%8D%E7%BA%B9%E7%90%86%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%B1%9E%E6%80%A7%E3%80%82
[c6aba73a8cd34c4791fd88b6312f942d.png]: https://img-blog.csdnimg.cn/c6aba73a8cd34c4791fd88b6312f942d.png
[2.1]: https://blog.csdn.net/qq_41835314/article/details/126722837?spm=1001.2014.3001.5502
[Unity_SRGB_man_-CSDN]: https://blog.csdn.net/qq_45253770/article/details/125110359?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166417509516782417047176%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166417509516782417047176&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-2-125110359-null-null.142%5Ev50%5Epc_rank_34_1,201%5Ev3%5Eadd_ask&utm_term=Unity%20%E7%BA%B9%E7%90%86%20sRGB&spm=1018.2226.3001.4187
[a69a341f358a49bf8264705d33178f61.png]: https://img-blog.csdnimg.cn/a69a341f358a49bf8264705d33178f61.png
[436ab9982ed14cf78c4854cc7a0f0b65.png]: https://img-blog.csdnimg.cn/436ab9982ed14cf78c4854cc7a0f0b65.png
[1ed5068da4f6445d9c1e2abe4bc9e818.png]: https://img-blog.csdnimg.cn/1ed5068da4f6445d9c1e2abe4bc9e818.png
[c3ddccad50b34362ae680d6fe171a03d.png]: https://img-blog.csdnimg.cn/c3ddccad50b34362ae680d6fe171a03d.png
[ac2055f8536246fcabd68cc07116c8ea.png]: https://img-blog.csdnimg.cn/ac2055f8536246fcabd68cc07116c8ea.png
[d3f52cb8ba6844f886d394d2ede0ba9b.png]: https://img-blog.csdnimg.cn/d3f52cb8ba6844f886d394d2ede0ba9b.png
[ed282e5001054cb796a0ce3e2470d079.png]: https://img-blog.csdnimg.cn/ed282e5001054cb796a0ce3e2470d079.png
[f8914aaca4d74f86bb9b720048746380.png]: https://img-blog.csdnimg.cn/f8914aaca4d74f86bb9b720048746380.png
[70e3850698ef4c1f8c88aa714581162a.png]: https://img-blog.csdnimg.cn/70e3850698ef4c1f8c88aa714581162a.png
[2ce27b0e2d6d4e80aa8a8a39ab129600.png]: https://img-blog.csdnimg.cn/2ce27b0e2d6d4e80aa8a8a39ab129600.png
[c5db6908254f44ae9d82062b298fae5e.png]: https://img-blog.csdnimg.cn/c5db6908254f44ae9d82062b298fae5e.png