UD5工具箱
使用教程
以下是使用本工具进行渐变渲染性能对比的详细步骤说明，按照这些步骤操作即可快速掌握工具的使用方法。
第一步：查看渲染结果对比
打开工具页面后，您会看到左右两个并排的渲染窗口。左侧窗口使用 WebGPU GPU Shader 方式渲染渐变效果，右侧窗口使用传统的 Canvas 2D CPU 方式渲染相同的渐变效果。两个窗口同时渲染完全相同的渐变图案，方便您进行直观的视觉效果对比。
在每个渲染窗口下方，会实时显示对应的帧率（FPS）数据。FPS（Frames Per Second）表示每秒成功渲染的帧数，数值越高说明该渲染方式的性能越好。初始状态下您可以观察到两种方式在默认参数下的性能差异。
请注意观察两个窗口中渐变效果的视觉一致性，确保两种渲染方式产生了相同或非常接近的视觉输出，这是进行公平性能对比的前提条件。
第二步：调整渲染参数观察性能变化
使用工具下方的控制面板区域调整各项渲染参数，实时观察不同参数配置下的性能变化趋势：
- 渲染分辨率 - 增大分辨率会显著增加需要计算的像素总数，通常会对 CPU 渲染性能产生明显影响，而 GPU 渲染由于并行处理能力较强受影响相对较小
- 渐变类型切换 - 在线性渐变、径向渐变和锥形渐变之间切换，比较不同数学计算复杂度对两种渲染方式性能的不同影响
- 颜色层数调整 - 增加颜色停止点数量，测试颜色插值计算复杂度增加时两种渲染方式的性能衰减程度
- 动画速度调节 - 调节动画播放速度以改变每帧的计算负载，观察不同负载水平下的帧率表现和稳定性
建议： 建议从低分辨率开始逐步增加，这样可以更清晰地观察到性能变化的拐点和趋势。
第三步：分析性能数据得出结论
仔细观察 FPS 数据的变化趋势和两种渲染方式之间的性能差距，您通常可以得出以下重要结论：
- 在高分辨率场景下，GPU 渲染的 FPS 通常远高于 CPU 渲染，性能优势可能达到数倍甚至数十倍
- 颜色停止点数量增加时，CPU 渲染的性能下降幅度通常比 GPU 渲染更为明显和剧烈
- GPU 渲染在处理复杂渐变类型（如锥形渐变）时的性能优势更加突出和显著
- 动画速度加快时，CPU 渲染更容易出现帧率不稳定和丢帧现象
注意： FPS 数据会受到设备硬件性能的影响，不同设备上的测试结果可能存在较大差异。建议在相同设备上进行所有对比测试以确保数据的可比性和准确性。
第四步：尝试渐变预设方案
工具提供了多种精心设计的渐变预设方案，每个预设都模拟了真实应用场景中的渐变效果。点击不同的预设按钮可以快速切换渐变参数组合，观察不同视觉效果下的渲染性能表现。
这些预设方案涵盖了从简单的双色线性渐变到复杂的多层径向渐变等多种类型，帮助您全面了解各种渐变效果对渲染性能的实际影响。
您也可以在选择预设后手动微调各项参数，创建自定义的渐变效果进行更深入的性能测试和分析。
第五步：导出测试结果
完成所有性能对比测试后，您可以将测试结果数据导出保存，方便后续的分析和文档整理工作。导出的数据包含各组测试的参数配置和对应的 FPS 性能数据。
建议将不同设备上的测试结果分别保存，建立完整的性能对比数据库，为项目中的技术选型提供充分的数据支撑和参考依据。