在 GLSL ES 中更改生命条纹理的颜色答案

【问题标题】：Changing the color of a health bar texture in GLSL ES在 GLSL ES 中更改生命条纹理的颜色
【发布时间】：2015-07-06 12:23:00
【问题描述】：

我正在使用 Android 中的 OpenGL ES 2 创建一个 2D 游戏，其中包含一个健康栏。随着生命值的降低，生命值条会在 5 种颜色之间变化（绿色、黄绿色、黄色、橙色、红色）。生命值条的纹理来自纹理图集，我不想在纹理图集中为每种颜色添加一个条（将来更改这些颜色也会更容易）。

这是我想使用 GLSL 重现的原始绿色。其底色是#77ee9a。

我尝试的是创建一个黑白版本的纹理。此处的基础绿色变为#aeaeae。

然后，我将我想要的颜色与这张黑白图像相乘。我意识到这不会完全正确，所以我取了我想要的绿色（#77ee9a），然后在相乘之前除以它的黑白等效项（#aeaeae）。结果是：

我意识到，除以灰色会导致原始绿色的 rgb 值的绿色部分超过 255，从而在图像的明亮部分周围产生伪影。

我不确定是否有更好的方法来实现这种着色效果，但我希望有一个解决方案可以让我这样做。

如果没有，我可以创建两个纹理，一个是条形的纯白色，另一个是透明效果。然后我可以叠加这些，但在游戏中需要另一个纹理和另一个精灵。

谢谢！

【问题讨论】：

标签： android opengl-es opengl-es-2.0 glsles

【解决方案1】：

您可以使用 GLSL 混合函数计算 2 个单独的渐变：一个从黑色到所选颜色，对应于 0 到 0.68 (#aeaeae) 的灰度值，另一个从所选颜色到白色表示 0.68 到 1.0 的灰度值。

将色调颜色（例如绿色）作为制服传入：

uniform vec4 uTintColor;

读取灰度值并取任意分量（因为它们都相同）。然后计算灰度值在每个梯度中的位置并应用它们。当处于下梯度时，upperGradientCol 等于 uTintColor，因为upperGradientPos 为零，所以upperGradientCol 可以作为下梯度的上界。

// read grey scale value
vec4 texel = texture2D(uTexture, vTexCoord);
float greyValue = texel.r;

// compute position in gradients:
float upperGradientPos = clamp((greyValue - 0.68) / 0.32, 0.0, 1.0);
float lowerGradientPos = clamp(greyValue / 0.68, 0.0, 1.0);

// apply upper gradient from uTintColor up to white:
vec4 upperGradientCol = mix(uTintColor, vec4(1.0, 1.0, 1.0, 1.0), upperGradientPos);
// apply lower gradient from black up to uTintColor:
vec4 lowerGradientCol = mix(vec4(0.0, 0.0, 0.0, 1.0), upperGradientCol, lowerGradientPos);
gl_FragColor = vec4(lowerGradientCol.rgb, texel.a);

为了使其更加通用，您可以传递不同的颜色而不是黑色和白色作为制服，并且与色调对应的灰度值相同（目前硬编码为 0.68）。

【讨论】：

【解决方案2】：

您实际上可以编写一个着色器，因此您只需要 1 个以如下方式修改的纹理：失去的健康越多，得到的灰色越多要获得应使用的“graytexture”的颜色值是：

灰度 = 0,299 × 红色 + 0,587 × 绿色 + 0,114 × 蓝色

所以着色器中的公式如下：

生命值 * 0.711 + 0.299，生命值 * 413 + 0,587，生命值 * 0.886 + 0.114

【讨论】：