UD5工具箱
核心功能
本工具提供全面且深入的渐变渲染性能对比能力，帮助您从多个维度理解 GPU 与 CPU 渲染方式的本质差异，为技术选型提供可靠的参考依据。
GPU Shader 并行渲染
使用 WebGPU 的片段着色器（Fragment Shader）在 GPU 上并行计算每个像素的渐变颜色值。GPU 拥有数千个计算核心，可以同时处理成百上千个像素的颜色插值计算任务。在高分辨率和复杂渐变场景下，GPU 的并行计算能力使其性能远超 CPU 的串行处理方式。着色器代码使用 WGSL 语言编写，支持浮点精度的颜色计算和高效的纹理采样操作。
CPU Canvas 2D 串行渲染
使用传统的 Canvas 2D API 在 CPU 上串行计算渐变效果。通过 createLinearGradient 或 createRadialGradient 方法创建渐变对象，CPU 逐像素地进行颜色插值计算。虽然单核性能不断提升，但 CPU 的串行处理方式在面对大规模像素计算任务时效率明显不如 GPU 的并行架构。此方式可作为性能对比的基准参考。
自由分辨率调节
支持从 256x256 到 2048x2048 的自由分辨率调节，步进值可精确到像素级别。观察分辨率变化对 GPU 和 CPU 渲染性能的不同影响程度，理解像素数量增长与计算量增长之间的非线性关系。高分辨率下性能差异更加明显，有助于直观感受 GPU 并行计算的优势所在。
多种渐变类型切换
支持线性渐变（Linear Gradient）、径向渐变（Radial Gradient）和锥形渐变（Conic Gradient）三种基本渐变类型的自由切换。不同渐变类型的数学计算复杂度差异显著，线性渐变仅需简单插值，径向渐变需要距离计算，锥形渐变需要三角函数运算，对性能的影响也各不相同。
颜色层数配置
支持配置渐变的颜色停止点（Color Stop）数量，从基础的双色渐变到包含二十多个颜色停止点的复杂多色渐变。颜色停止点数量的增加会直接影响插值计算的复杂度，通过调整此参数可以观察不同渲染方式在面对计算负载增长时的性能衰减曲线。
实时 FPS 监控
实时显示两种渲染方式的帧率数据（Frames Per Second），以数字和图表两种形式直观呈现性能差异。支持帧率历史记录查看，帮助分析渲染性能的波动趋势和稳定性。FPS 数据每秒更新一次，确保数据的准确性和实时性。
动画速度控制
支持调节渐变动画的播放速度，从慢速逐帧观察到高速压力测试，灵活适应不同的性能测试需求。动画速度的调整直接影响每帧的计算负载，可以帮助您找到 GPU 和 CPU 渲染性能的临界点和瓶颈所在。
渐变预设方案
内置多种精心设计的渐变预设方案，包括日落渐变、海洋渐变、极光渐变、火焰渐变等主题效果。每个预设都针对特定的渐变类型和颜色配置进行了优化，帮助您快速对比不同渐变效果下的渲染性能表现。