Question

我正在使用 OpenGL / GLSL 来实现绘图应用。有一个功能，用户通过使用带有图案图像的画笔绘制“蒙版”，同时背景根据画笔位置而变化。看一下要了解的视频：video

我使用了CALayer的蒙版（iOS东西）来实现这种效果（在视频上）。但是这种实现非常昂贵，fps非常低。所以我决定使用OpenGL。对于OpenGL实现，我使用模板缓冲区进行屏蔽，即：

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];

问题：模具缓冲区不能与alpha一起使用，这就是为什么我不能对画笔使用半透明模式的原因。

问题：如何使用 OpenGL / GLSL 但不使用模板缓冲区从视频中实现这种效果？

Answer 1

由于您的背景已经生成（来自评论），因此您可以在着色器中使用2个纹理来绘制每个细分。你需要重绘所有这些，直到用户抬起他的手指。

因此假设您的纹理上有白色足迹，并带有Alpha通道footprintTextureID和背景纹理“backgroundTextureID”。您需要使用activeTexture 1和2绑定两个纹理，并在着色器中将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]）。

好的，假设您正确绑定了所有这些，现在只需要将片段着色器中的颜色相乘以获得混合颜色：

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值，但这只会失去灵活性。在足迹纹理为白色之前，它没有任何区别，因此它是您的选择。

OpenGL / GLSE alpha掩码

1 个答案: