图片调色：怎样用 WebGL 完成实时预览
这是「光屿图片」技术系列的第二篇，介绍图片调色功能。
体验地址：
调色模块涉及 Shader、参数映射和预览交互，大部分实现与重构由 AI 协作完成。我负责确定需要的调节项、比较视觉结果，并检查不同设备上的预览和导出是否一致。
为什么不用 JavaScript 逐像素处理
调色功能包含曝光、对比度、阴影、高光、色温、饱和度、HSL、曲线、清晰度、锐化和暗角等参数。
如果每次拖动滑块都在 JavaScript 中遍历整张图片，预览很容易卡顿。项目因此使用 WebGL Fragment Shader，让 GPU 并行处理像素。
基本流程是：
上传原图纹理
→ 写入调色参数
→ Fragment Shader 处理颜色
→ 输出到预览 Canvas
→ 用户确认后导出
用一张小纹理表达曲线
曲线工具没有在 Shader 中堆叠大量条件判断。CPU 根据控制点生成 256 个采样值，再上传为一张 256 × 1 的纹理。GPU 处理每个颜色通道时，直接查询对应位置。
color = vec3(
texture2D(u_curve, vec2(color.r, .5)).r,
texture2D(u_curve, vec2(color.g, .5)).g,
texture2D(u_curve, vec2(color.b, .5)).b
);
HSL 调整也采用连续权重，让相邻色相之间平滑过渡，减少红、橙、黄等区间边缘出现突变。
怎样保持容易维护
页面只负责滑块状态和预览交互；参数转换、曲线采样和 Shader 渲染放在独立模块中。这样有几个好处：
- 修改页面布局时，不必重写图像算法；
- 新增参数时，有明确的数据和渲染入口；
- 曲线、颜色换算等纯逻辑可以单独测试；
- 导出与预览共用处理规则，减少效果不一致。
为什么这种方案成本低
预览和导出都使用用户设备的 GPU，不需要购买云端 GPU 算力，也不需要维护图片上传、任务并发和服务端图像库。
对图片工具来说，WebGL 不只是做动画的技术。只要提前处理纹理尺寸、内存限制和设备降级，它也可以成为一套成本可控的端内图像引擎。
这也是 AI 辅助开发适合发挥作用的地方：它可以快速生成 Shader 和参数管线，再根据实际画面持续调整；模块化之后，AI 修改某个效果时也不必触碰整个页面。
