UD5工具箱
核心功能
片段着色器与顶点着色器编辑
编辑器提供独立的代码编辑区域，分别用于编写片段着色器（Fragment Shader）和顶点着色器（Vertex Shader）的 GLSL 代码。用户可以在两个编辑器之间自由切换，分别编写各自的着色器逻辑。片段着色器处理像素级别的颜色计算，顶点着色器处理顶点级别的位置变换，两者协同工作实现完整的渲染管线效果。编辑器内置语法高亮和基础的代码提示功能，帮助用户更高效地编写 GLSL 代码。
预设示例库
编辑器内置了丰富的预设示例，涵盖从基础到进阶的多种 shader 效果。基础预设包括纯色输出、渐变效果、UV 坐标可视化等入门级示例；中级预设包括噪声纹理、圆形图案、条纹效果等常用技术；高级预设包括分形图案、光线步进、SDF（有向距离场）等进阶技术。用户可以通过下拉菜单或按钮快速加载任意预设，在现有代码基础上进行修改和扩展，高效学习 shader 编程技巧。
编译运行与错误提示
编辑器集成了 WebGL 着色器编译器，用户编写完代码后可以一键编译运行。如果代码中存在语法错误或逻辑问题，编辑器会显示详细的编译错误信息，包括错误类型和行号，帮助用户快速定位和修复问题。编译成功后，渲染结果会立即显示在预览窗口中，用户可以直观地看到代码修改带来的视觉变化。
全屏预览与 FPS 监控
编辑器支持全屏预览模式，用户可以将渲染结果扩展到整个屏幕，获得更大的可视区域来观察细节效果。实时 FPS（每秒帧数）显示功能可以帮助用户监控着色器的运行性能，了解当前代码的执行效率。如果 FPS 过低，说明着色器的计算复杂度较高，用户可以据此优化算法以提升渲染性能。
Uniform 变量提示
在 GLSL 着色器编程中，uniform 变量是从 JavaScript 端传递到着色器的外部数据。编辑器会显示当前可用的 uniform 变量列表和类型信息，包括时间（u_time）、分辨率（u_resolution）、鼠标位置（u_mouse）等常用变量。这些提示信息帮助用户快速了解可使用的外部数据，避免因变量名拼写错误或类型不匹配导致的编译失败。
代码复制与重置
编辑器提供一键复制代码功能，方便用户将编写好的着色器代码导出到剪贴板，粘贴到自己的项目中使用。重置功能可以将代码恢复到当前预设的初始状态，让用户从头开始修改，避免因多次修改导致代码混乱。这两个功能大大提升了开发工作的效率。