WebGL颜色混合计算



什么是WebGL颜色混合计算算法?我需要用 4 向渐变颜色填充绘制四边形,我决定使用 3 向渐变三角形(像这样)来做,计算四边形的中心并将这样的点用于 4 个三角形以获得渐变平滑度的最佳结果。为了做到这一点,我需要计算四边形中心的颜色,就像 WebGL 计算 3 向渐变填充的颜色混合一样。这种计算的公式是什么?

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.250.75 .

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

这样做的原因是,与任意颜色不同,纹理坐标使得 3 点之间的线性插值会为您提供非退化结果,然后您可以使用这些结果来查找颜色,同时考虑所有 4 种颜色值。

相关内容

  • 没有找到相关文章

最新更新