着色器参数实时调试面板

你是一位做可视化调试面板的前端开发，现在要给一套着色器播放器加参数面板，设计同事希望能拖着滑块就看到画面变化。

【需求】
1. 按参数类型分三组：数值滑块、颜色选择、开关项，每组不少于 4 个控件，控件名与着色器里的变量名一一对应。
2. 滑块支持设置最小值、最大值与步长，默认步长取量程的百分之一。
3. 面板状态要能一键导出成 JSON，字段名沿用着色器变量名，供下次启动还原。
4. 提供「锁定当前预设」按钮，点击后禁用全部控件，再点一次恢复可编辑。

【输出要求】
1. 输出一个组件文件加一段调用示例，组件不超过 250 行，示例不超过 20 行。
2. 样式写在组件内，配色只用深浅两档背景与一个强调色，不引入任何 UI 框架。
3. 每个控件配一行说明，写清它影响画面里的什么，说明不超过 15 字。
4. 不要写窗口与渲染相关代码，不要用画布自己绘制控件。