UD5工具箱
术语表
以下收录了与 WebGL 纹理系统相关的核心术语和概念。掌握这些术语将帮助您更好地理解纹理处理的技术细节。
纹理（Texture）
纹理是一张存储在 GPU 内存中的二维图像数据，用于映射到三维模型的表面。在 WebGL 中，纹理通过 texImage2D 方法从图像数据（如 PNG、JPEG 图片）上传到 GPU。纹理被划分为称为纹素（Texel）的最小单元，每个纹素存储一个颜色值。纹理坐标（UV 坐标）用于指定三维模型表面的每个点对应纹理中的哪个位置。纹理是实现逼真 3D 渲染效果的基础技术之一。
纹素（Texel）
纹素是纹理图像中的最小单元，类似于像素（Pixel）之于屏幕图像的概念。每个纹素存储一个颜色值（根据纹理格式的不同，可能包含 RGB、RGBA、灰度等信息）。纹素的大小由纹理的分辨率决定，例如 512x512 的纹理包含 512x512 = 262144 个纹素。当纹理被映射到三维模型表面时，纹素可能被放大或缩小以适应屏幕像素的大小，这时就需要纹理过滤算法来决定最终显示的颜色。
纹理过滤（Texture Filtering）
纹理过滤是决定当纹理被映射到屏幕像素时如何采样纹素颜色的技术。当一个屏幕像素对应多个纹素时（纹理缩小），需要选择合适的纹素颜色来代表该区域；当一个纹素对应多个屏幕像素时（纹理放大），需要决定如何扩展纹素的颜色。常见的过滤算法包括最近邻（NEAREST）和双线性（LINEAR）过滤。纹理过滤的质量直接影响渲染效果的真实感和平滑度。
NEAREST（最近邻过滤）
最近邻过滤是最简单的纹理过滤算法。它选择距离采样点最近的纹素的颜色值作为输出，不进行任何插值计算。优点是计算速度最快，缺点是在纹理缩放时会产生明显的锯齿和像素化效果。最近邻过滤适用于像素风格的游戏（Pixel Art）和需要清晰像素边界的场景。在放大纹理时，最近邻过滤会呈现明显的方块状像素；在缩小时，可能出现摩尔纹和闪烁。
LINEAR（双线性过滤）
双线性过滤是更平滑的纹理过滤算法。它根据采样点到周围四个纹素的距离进行加权平均，计算出一个平滑过渡的颜色值。相比最近邻过滤，双线性过滤能产生更柔和、更自然的纹理效果，消除了明显的像素边界。缺点是可能过度模糊纹理细节，特别是在纹理放大时。双线性过滤是大多数 3D 应用中的默认过滤方式，适用于大部分常规纹理的渲染。
Mipmap
Mipmap 是一种纹理优化技术，通过预先生成纹理的多个缩小版本来提高缩小渲染时的性能和质量。每个 Mipmap 层级的尺寸是前一层级的一半（如 256x256、128x128、64x64...），直到 1x1。在渲染时，WebGL 会根据纹理到相机的距离自动选择最合适的 Mipmap 层级进行采样。Mipmap 的主要优势是：减少纹理缩小引起的摩尔纹和闪烁、提高缓存命中率从而提升渲染性能。使用 Mipmap 的前提是纹理的宽高必须是 2 的幂次方（Power of Two，POT）。
纹理包裹模式（Wrap Mode）
纹理包裹模式决定了当纹理坐标超出 0-1 的标准范围时如何处理。WebGL 支持三种包裹模式：REPEAT（重复）在超出范围时平铺纹理、CLAMP（钳制）将坐标限制在 0-1 范围内并使用边缘颜色、MIRROR（镜像）以翻转方式重复纹理。包裹模式的选择取决于纹理的使用场景：无缝贴图（如地砖、墙面）使用 REPEAT；不希望重复的纹理（如天空盒）使用 CLAMP；需要对称重复的图案使用 MIRROR。
纹理坐标（UV 坐标）
纹理坐标是用于指定三维模型表面的每个点对应纹理图像中哪个位置的二维坐标系统。在 WebGL 中，纹理坐标的范围通常为 0 到 1，其中 (0,0) 对应纹理的左下角，(1,1) 对应右上角。U 代表水平方向，V 代表垂直方向。纹理坐标可以超出 0-1 范围，此时的行为由纹理包裹模式决定。正确设置纹理坐标是将纹理正确映射到模型表面的关键。
纹理格式（Texture Format）
纹理格式定义了纹理中每个纹素存储的颜色通道及其位深。WebGL 中常见的纹理格式包括：RGBA（红绿蓝透明度，32位）、RGB（红绿蓝，24位）、LUMINANCE（灰度，8位）、LUMINANCE_ALPHA（灰度加透明度，16位）、ALPHA（仅透明度，8位）。不同的格式适用于不同的场景：需要透明效果的纹理使用 RGBA；不需要透明的纹理使用 RGB 以节省内存；灰度图（如高度图、法线图的单通道）使用 LUMINANCE。选择合适的纹理格式可以在保证视觉质量的前提下优化内存占用。
Power of Two（2 的幂次）
Power of Two（POT）是指宽和高都是 2 的整数次幂的纹理尺寸，如 256x256、512x1024、1024x1024 等。在 WebGL 1.0 中，使用 Mipmap 和 REPEAT 包裹模式要求纹理的宽高必须是 POT。WebGL 2.0 支持非 POT 纹理使用 Mipmap 和 REPEAT，但在某些硬件上可能存在性能差异。纹理尺寸为 POT 时，GPU 可以更高效地进行内存对齐和缓存管理。在实际项目中，建议尽量使用 POT 尺寸的纹理以获得最佳的兼容性和性能。