OpenGL彩色位图字体与白色轮廓

Question

我有一个libgdx游戏，我想使用带有轮廓的位图字体。我希望能够使用setColor（）设置字体颜色，但是，我总是希望轮廓保持白色。对我来说，最好的方法是什么？我假设我应该使用片段着色器进行所需的颜色操作。

我创建了一个如下位图字体，红色代表笔画，绿色代表设置颜色。

然而，我对片段着色器中需要做的事情有点困惑。我对着色器的经验和理解是有限的。我当前的着色器看起来像这样，它根据r正确绘制笔划。我不确定如何添加设置颜色（v_color）以正确地为字体中间着色。

varying vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;

void main()
{
  vec4 textureColour = texture2D(u_texture, v_texCoords);
  vec4 colour = vec4(textureColour.r,
                textureColour.r,
                textureColour.r,
                textureColour.a);
  gl_FragColor = vec4(colour.r, colour.g, colour.b, colour.a);
}

Answer 1

通过定义字体图像的方式，红色数量决定了要使用的轮廓颜色的大小，绿色的数量决定了要使用的内部颜色的多少。因此，在对纹理进行采样后，您可以简单地计算轮廓颜色和内部颜色的加权平均值，采样纹理的r是轮廓颜色的权重，g是权重内部颜色。

着色器中的计算可以进一步简化，因为轮廓颜色是固定的白色。因此r乘以轮廓颜色只是r所有组件的向量：

r * vec4(1.0, 1.0, 1.0, 1.0) = vec4(r, r, r, r) = vec4(r)

使用内部颜色的v_color变化，片段着色器将如下所示：

varying vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;

void main()
{
    vec4 texVal = texture2D(u_texture, v_texCoords);
    gl_FragColor = texVal.g * v_color + texVal.r;
}

如果纹理的r和g组件对于字母外部的部分为零，则此方法有效。如果外部不是黑色，但是纹理的a组件用于掩盖它们，表达式会变得稍微复杂一些：

void main()
{
    vec4 texVal = texture2D(u_texture, v_texCoords);
    gl_FragColor = vec4(texVal.g * v_color.rgb + texVal.r, texVal.a);
}

Answer 2

Aslong你的纹理颜色由这两种RGB颜色组成：红色：＃ff0000和绿色：＃00ff00 就像它们在你的图像中一样，你可以使用以下着色器

varying vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;

void main()
{
  vec4 textureColour = texture2D(u_texture, v_texCoords);
  // normalizing the values
  float rgsum = textureColour.r + textureColour.g;
  float pr = textureColour.r / rgsum;
  float pg = textureColour.g / rgsum;
  // setting the color of the fragment
  gl_FragColor = vec4(vec3(1.0) * pr + v_color.rgb * pg, textureColour.a * v_color.a);
}

---

哦，顺便说一句：BE和AE的混合非常混乱，你应该只使用颜色（或颜色）。