WebGL颜色混合计算

Question

什么是WebGL颜色混合计算算法？我需要用 4 路渐变颜色填充绘制四边形，我决定用 3 路渐变三角形（像这样）来绘制四边形，计算四边形的中心并使用 4 个三角形的这样的点来获得渐变平滑度的最佳结果。为了正确执行此操作，我需要使用与 WebGL 计算 3 路渐变填充的颜色混合相同的方式来计算四边形中心的颜色。这样的计算公式是什么？

Answer 1

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

\n\n

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

\n\n

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

\n\n

0.25 * (color00 + color01 + color10 + color11)\n

\n\n\n\n

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

\n\n

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

\n\n

这将执行与您正在寻找的相同的插值，但使用内置设施。如果需要，您也可以跳过使用纹理，但仍然有 \xe2\x80\x9ctexture\xe2\x80\x9d 坐标，并使用mix上面的公式将坐标映射到四种颜色。

\n\n

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

\n