在 OpenGL 2 中使用蒙版去饱和纹理答案

【问题标题】：Desaturate texture using mask in OpenGL 2在 OpenGL 2 中使用蒙版去饱和纹理
【发布时间】：2014-10-29 04:41:02
【问题描述】：

我有一个非常大的纹理用作背景，我想对其中的一小部分应用过滤器，“小部分”由我拥有的另一个纹理的 alpha 层定义（仍然是 RGB8888），我不确定这样做的最佳方法是什么。我想保留我已经用于其他精灵的相同（非常简单）着色器，它类似于基本着色器，即：

precision mediump float;
uniform sampler2D uTexture;
varying vec2 vTexPos;
void main() {
  gl_FragColor = texture2D(uTexture, vTexPos);
}

所以，我有一些问题

如何将过滤器仅应用于“蒙版”区域并避免绘制其他区域？
如果我在加载后再次绘制大纹理以将其应用到屏幕的一小部分，是否会降低性能？
我可以将第二个纹理映射到着色器并使用类似“if uTexture2 != null”之类的东西 -> 应用为遮罩吗？与使用第二个着色器相比，这会给我带来任何性能提升吗？
两种纹理都是预乘的，我应该如何处理 Alpha 遮罩？

id 喜欢做的事情是这样的（原始、掩码、结果）：

我的环境是Android 4.0，我用的是GLES20。

【问题讨论】：

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

【解决方案1】：

您需要使用附加蒙版纹理采样器的颜色测试，以及一些基于条件的去饱和过滤器。

这个片段着色器应该可以工作：

precision mediump float;
uniform sampler2D uTexture;
uniform sampler2D uMask;
varying vec2 vTexPos;

void main() {
    vec4 mask = texture2D(uMask, vTexPos);
    if(mask.r < 0.9) { // black mask
        gl_FragColor = texture2D(uTexture, vTexPos);
    } else { // white mask
        vec4 texelColor = texture2D(uTexture, vTexPos); // original color
        vec4 scaledColor = texelColor * vec4(0.3, 0.59, 0.11, 1.0); // weights calculation
        float luminance = scaledColor.r + scaledColor.g + scaledColor.b; // greyscale
        gl_FragColor = vec4(luminance, luminance, luminance, texelColor.a); // final color with original alpha value
    }
}

去饱和代码来自这篇很棒的文章： http://franzzle.wordpress.com/2013/03/25/use-a-opengl-es-2-0-shader-to-show-a-desaturated-sprite-in-cocos2d-2-0/

【讨论】：