UD5工具箱
核心功能一览
WebGL 纹理加载演示集成了丰富的纹理处理功能，帮助您从多个维度理解和掌握 WebGL 纹理技术。以下是各功能模块的详细介绍：
六种纹理图案
平台内置了六种精心设计的纹理图案，每种图案针对不同的纹理技术特点进行了优化，便于您观察和对比各种纹理配置的效果：
- 彩色棋盘格：由交替的彩色方块组成，最适合观察纹理过滤对边缘锐利度的影响。在 NEAREST 过滤下呈现清晰的像素边界，在 LINEAR 过滤下边缘变得模糊柔和。
- 渐变条纹：包含颜色渐变的水平条纹，用于展示纹理采样在不同缩放级别下的表现，以及 Mipmap 在远距离观察时的平滑效果。
- 同心圆环：以中心为圆心的彩色圆环图案，适合观察纹理在不同角度和缩放下的抗锯齿效果，以及包裹模式对纹理边缘的处理方式。
- 随机噪声：模拟自然纹理的随机噪点图案，用于测试纹理过滤算法在复杂纹理上的表现，以及 Mipmap 对噪点纹理的平滑效果。
- 文字图案：包含可辨识的文字内容，用于直观展示纹理缩放对可读性的影响，以及不同过滤模式下文字的清晰度差异。
- UV 网格：展示纹理坐标（UV 坐标）的网格图案，帮助您理解纹理坐标系统的工作原理，以及纹理映射到几何体上的对应关系。
五种纹理格式
平台支持 WebGL 中常见的五种纹理格式，帮助您理解不同格式的特点和适用场景：
- RGBA：包含红（Red）、绿（Green）、蓝（Blue）、透明度（Alpha）四个通道，每个通道 8 位，共 32 位。这是最常用的纹理格式，支持完整的颜色和透明度信息。
- RGB：只包含红、绿、蓝三个通道，不支持透明度。适用于不需要透明效果的纹理，相比 RGBA 节省 25% 的内存空间。
- LUMINANCE：灰度格式，只有一个亮度通道。适用于不需要颜色信息的纹理（如高度图、置换图），内存占用为 RGBA 的四分之一。
- LUMINANCE_ALPHA：灰度加透明度格式，包含亮度和 alpha 两个通道。适用于需要控制透明度的灰度纹理。
- ALPHA：只有透明度通道，没有颜色信息。适用于蒙版纹理（Mask）、透明度贴图等只关心透明度的场景。
三种包裹模式
包裹模式决定了纹理坐标超出 0-1 范围时的处理方式，平台支持三种标准包裹模式：
- REPEAT（重复）：纹理在超出范围时会平铺重复。适用于地砖、墙面等需要无缝重复的纹理。纹理坐标的整数部分被忽略，只保留小数部分。
- CLAMP（钳制）：纹理坐标被限制在 0-1 范围内，超出部分使用纹理边缘的颜色值。适用于不希望纹理重复的场景，如天空盒的边缘处理。
- MIRROR（镜像）：纹理在超出范围时会以镜像方式重复。与 REPEAT 类似，但每次重复时纹理会翻转，适合创建对称的图案效果。
全局缩放控制
平台提供全局缩放滑块，允许您实时调整纹理的缩放级别。通过增大或减小缩放值，您可以观察纹理在不同缩放比例下的渲染效果。当纹理被放大时，可以观察到纹理像素（texel）的细节和过滤效果；当纹理被缩小时，可以观察到 Mipmap 和抗锯齿的效果。缩放控制是理解纹理过滤和 Mipmap 的重要交互工具。
双画布对比模式
双画布对比是本平台的特色功能。界面同时显示两个 WebGL 画布，您可以在左侧画布中设置一组纹理参数，在右侧画布中设置另一组参数，然后并排对比两种配置的渲染效果差异。例如，左侧使用 NEAREST 过滤、右侧使用 LINEAR 过滤，可以直观看到两种过滤算法的视觉差异。双画布支持同步的缩放和旋转操作，确保对比的公平性。
六种过滤模式
平台支持 WebGL 中全部六种纹理过滤模式，分为放大过滤和缩小过滤两类：
- NEAREST（最近邻）：选择距离采样点最近的纹理像素，产生锐利的像素化效果。适用于像素风格的游戏和需要清晰边缘的纹理。
- LINEAR（双线性）：根据距离加权平均周围四个纹理像素的颜色，产生平滑的模糊效果。适用于大多数常规纹理的渲染。
- NEAREST_MIPMAP_NEAREST：选择最接近的 Mipmap 层级，然后在该层级中使用最近邻过滤。速度最快但质量一般。
- LINEAR_MIPMAP_NEAREST：选择最接近的 Mipmap 层级，然后在该层级中使用双线性过滤。在速度和质量之间取得平衡。
- NEAREST_MIPMAP_LINEAR：在两个最接近的 Mipmap 层级之间进行线性插值，每个层级内使用最近邻过滤。质量较好，适合远距离观察。
- LINEAR_MIPMAP_LINEAR：在两个最接近的 Mipmap 层级之间进行线性插值，每个层级内使用双线性过滤。质量最高，但也最消耗性能。
鼠标交互控制
画布支持丰富的鼠标交互操作：滚轮缩放可以放大或缩小纹理显示，方便您近距离观察纹理细节或远距离查看整体效果。鼠标拖拽可以平移纹理位置，将感兴趣的区域移动到视野中心。右键拖拽可以旋转纹理视角，从不同角度观察纹理在三维空间中的渲染效果。这些交互操作让您可以全方位地审视纹理在各种条件下的表现。