ios - OpenGL/GLSE alpha 掩蔽

Question

我正在使用 OpenGL/GLSL 实现一个绘图应用程序。有一个功能，用户可以使用带有图案图像的画笔绘制“蒙版”，同时背景会根据画笔的位置而变化。看看视频就明白了:video

我使用 CALayer 的蒙版(iOS 的东西)来实现这个效果(在视频中)。但是这种实现非常昂贵，fps 非常低。所以我决定为此使用 OpenGL。对于 OpenGL 实现，我使用 Stencil 缓冲区进行屏蔽，即:

glEnable(GL_STENCIL_TEST);
glStencilFunc(GL_ALWAYS, 1, 0);
glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
// Draw mask (brush pattern)
glStencilFunc(GL_EQUAL, 1, 255);
// Draw gradient background
// Display the buffer
glBindRenderbuffer(GL_RENDERBUFFER, viewRenderbuffer);
[context presentRenderbuffer:GL_RENDERBUFFER];

问题:Stencil 缓冲区不适用于 alpha，这就是我不能为画笔使用半透明图案的原因。

问题:如何使用 OpenGL/GLSL 但不使用 Stencil buffer 从视频中获得这种效果？

Answer 1

由于您的背景已经生成(来自评论)，因此您可以简单地在着色器中使用 2 个纹理来绘制每个片段。您将需要重新绘制所有这些，直到用户抬起手指为止。

所以假设您有一个纹理，上面有一个带有 alpha channel footprintTextureID 的白色足迹和一个背景纹理“backgroundTextureID”。您需要使用 activeTexture 1 和 2 绑定(bind)两个纹理，并将 2 作为制服传递到着色器中。

现在在您的顶点着色器中，您需要从该位置生成相对纹理坐标。应该有一行类似于 gl_Position = computedPosition; 所以你需要添加另一个 varying 值:

backgroundTextureCoordinates = vec2((computedPosition.x+1.0)*0.5, (computedPosition.y+1.0)*0.5);

或者如果你需要垂直翻转

backgroundTextureCoordinates = vec2((computedPosition.x+1.0)*0.5, (-computedPosition.y+1.0)*0.5):

(这个等式的原因是输出顶点在区间 [-1,1] 但纹理使用 [0,1]: [-1,1]+1 = [0,2] 然后 [0,2]*0.5 = [0,1]).

好的，假设您正确绑定(bind)了所有这些，您现在只需要在片段着色器中乘以颜色即可获得混合颜色:

uniform sampler2D footprintTexture;
varying lowp vec2 footprintTextureCoordinate;

uniform sampler2D backgroundTexture;
varying lowp vec2 backgroundTextureCoordinates;

void main() {
    lowp vec4 footprintColor = texture2D(footprintTexture, footprintTextureCoordinate);
    lowp vec4 backgroundColor = texture2D(backgroundTexture, backgroundTextureCoordinates);
    gl_FragColor = footprintColor*backgroundColor;
}

如果您愿意，可以乘以足迹中的 alpha 值，但这只会失去灵 active 。在足迹纹理为白色之前，它没有任何区别，因此这是您的选择。