UD5工具箱
使用教程
本教程将详细介绍如何使用 WebGL 纹理加载演示平台的各项功能。通过实际操作，您将深入理解纹理的加载、过滤和包裹等核心概念。
第一步：选择纹理图案
打开演示平台后，首先在纹理图案选择区域选择一个图案。建议从彩色棋盘格开始，因为它的规则几何形状最适合观察过滤效果的差异。选择图案后，两个画布都会立即加载并渲染该纹理。您可以使用鼠标滚轮缩放和拖拽平移来查看纹理的渲染效果。
第二步：调整过滤模式
在左侧画布的控制面板中，找到放大过滤和缩小过滤的设置选项。先将两种过滤都设置为 NEAREST，观察棋盘格的像素化效果——每个纹理像素都清晰可见，边缘锐利。然后将过滤模式切换为 LINEAR，观察双线性过滤带来的平滑效果——纹理像素之间的过渡变得模糊柔和。通过反复切换这两种基础过滤模式，建立对纹理过滤的直观认知。
第三步：探索 Mipmap 过滤
将全局缩放滑块向左拖动，缩小纹理的显示大小。在 NEAREST 过滤模式下，当纹理被缩得很小时，您可能会看到摩尔纹（Moiré pattern）或闪烁现象。这是因为单个纹理像素覆盖了多个屏幕像素，简单的过滤算法无法正确处理这种情况。然后，将缩小过滤切换为 LINEAR_MIPMAP_LINEAR，这是质量最高的 Mipmap 过滤模式。再次缩小纹理，摩尔纹和闪烁消失了，纹理呈现出平滑的缩小效果。通过对比，您可以清楚地理解 Mipmap 在纹理缩小场景中的重要作用。
第四步：使用双画布对比
利用双画布对比功能来系统地比较不同的纹理配置。在左侧画布中选择 NEAREST 过滤模式，在右侧画布中选择 LINEAR 过滤模式。使用同步缩放功能同时调整两个画布的缩放级别，观察两种过滤算法在不同缩放比例下的表现差异。您还可以尝试不同的纹理图案来丰富对比体验：渐变条纹适合对比平滑过渡效果，文字图案适合对比清晰度和可读性，随机噪声适合对比纹理细节的保留程度。
第五步：测试包裹模式
在控制面板中切换不同的包裹模式，观察纹理超出 0-1 坐标范围时的行为。REPEAT 模式下，纹理会像瓷砖一样平铺重复；CLAMP 模式下，超出范围的区域会显示纹理边缘的颜色；MIRROR 模式下，纹理以镜像方式重复。使用 UV 网格图案来观察包裹模式的效果最为直观——网格线会清晰地展示纹理坐标映射的方式。通过拖拽平移纹理，您可以将纹理移动到不同位置来观察包裹边界的行为。
第六步：尝试不同纹理格式
切换不同的纹理格式（RGBA、RGB、LUMINANCE 等），观察每种格式的视觉效果差异。使用彩色棋盘格图案可以清楚地看到：RGBA 格式保留了所有颜色和透明度信息；LUMINANCE 格式将颜色转换为灰度；ALPHA 格式只保留了透明度通道。理解不同格式的视觉效果有助于在实际项目中根据需求选择最合适的格式，平衡视觉质量和内存占用。
第七步：掌握鼠标交互
练习使用鼠标交互来全方位观察纹理：使用滚轮缩放来放大纹理细节，观察过滤算法在纹理像素级别的处理方式；使用左键拖拽平移纹理，将特定区域移到视野中心仔细观察；使用右键拖拽旋转纹理视角，观察纹理在不同角度下的渲染效果。这些交互操作在调试实际项目中的纹理问题时非常有用。