graphics - WebGL 颜色混合计算

Question

什么是WebGL颜色混合计算算法？我需要用 4 向渐变颜色填充绘制四边形，我决定用 3 向渐变三角形（像这样）来绘制它，计算四边形的中心并使用 4 个三角形的这个点来获得渐变平滑度的最佳结果。为了做到这一点，我需要通过与 WebGL 计算 3-way gradient fill 的颜色混合相同的方式来计算四边形中心的颜色。这种计算的公式是什么？

Answer 1

WebGL 对顶点属性使用线性插值。用于在四个角处给定样本的正方形内插值的公式只是应用两次的线性插值。在 GLSL 中，

mix(mix(color00, color01, y), mix(color10, color11, y), x)

如果您对中心点特别感兴趣，这只是

0.25 * (color00 + color01 + color10 + color11)

---

但是，如果您的目标是在一个正方形中平滑地插入四种颜色，那么在 WebGL 应用程序中，您实际上不需要自己执行此计算，也不需要使用四个三角形！

1. 用四种颜色创建一个 2×2 纹理。
2. 将其设置TEXTURE_MAG_FILTER为LINEAR。
3. 使用以通常方式应用的纹理绘制正方形，但纹理坐标范围0.25为0.75.

这执行您正在寻找的相同插值，但使用内置设施。如果你愿意，你也可以跳过使用纹理，但仍然有“纹理”坐标，并使用mix上面的公式将坐标映射到你的四种颜色。

之所以有效，是因为纹理坐标与任意颜色不同，它在 3 个点之间进行线性插值会为您提供非退化结果，然后您可以使用它来查找考虑所有 4 个颜色值的颜色。