纹理是 3D 渲染中最常用的资源之一。通过纹理,我们可以为模型的每个片元设置颜色值,从而实现更加丰富的美术效果,主要作用包括:
Galacean 引擎支持所有 WebGL 标准的纹理,纹理可以来源于图片、canvas 画布、原始数据、视频等。
| 类型 | 描述 |
|---|---|
| 2D 纹理 | 最常用的美术资源,使用二维 UV 坐标进行采样 |
| 立方纹理 | 6 张 2D 纹理组成了一个立方纹理,可以用来实现天空盒、环境反射等特效 |
| 2D 纹理数组 | 只占用一个纹理单元,非常适合用来实现需要切换纹理图集的需求 |

决定该纹理数据是否是 sRGB 颜色空间,默认为 true,如果是法线纹理等线性数据,我们需要关闭该开关,更多详情可以查看色彩空间。
引擎默认开启 mipmap,用于在低分辨率屏幕中采样高分辨率纹理时提高性能和精度。WebGL2.0 支持任意分辨率的纹理,但 WebGL1.0 环境下需要上传 2 次幂纹理(如 1024x512),否则会自动关闭 mipmap。
纹素和屏幕像素通常不会完全对应,可以通过过滤模式控制放大(Mag)和缩小(Min)时的采样方式:
| 采样过滤模式 | 描述 |
|---|---|
| Point | 使用距离采样点最近的纹素 |
| Bilinear | 使用距离最近的 2*2 纹素矩阵的平均值 |
| Trilinear | 在双线性过滤的基础上,对 mipmap 层级也进行了平均值过滤 |
纹理采样的范围为 [0,1],当 UV 坐标超出范围时,可以通过循环模式控制采样方式:
| 采样循环模式 | 描述 |
|---|---|
| Clamp | 超出范围采样边缘纹素 |
| Repeat | 超出范围从 [0,1] 开始重新采样 |
| Mirror | 超出范围从 [1,0] 开始镜像采样 |
各向异性过滤技术可以使纹理在倾斜角度下观看会更加清晰。1 ~ 16 ,具体要看设备支持情况。
为了解决带透明像素图片在 Alpha 值突变处出现黑边的问题,编辑器内置了色彩膨胀功能。该功能是通过将图片中所有透明像素的 RGB 值改写为与其最临近非完全透明像素的 RGB 值,达到去除图片黑边的效果。
通过压缩纹理可以有效降低显存和提升图片解码速度,详情查看纹理压缩。