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 缓冲区 从视频中实现这种效果？

Answer 1

由于您的背景已经生成（来自 cmets），那么您可以简单地在着色器中使用 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 值，但这只会失去灵活性。在足迹纹理变为白色之前，它没有任何区别，所以它是您的选择。

Answer 2

Stencil 是一个布尔开/关测试，因此正如您所说，它无法应对 alpha。

唯一适用于 Alpha 的 GL 技术是混合，但由于帧之间的颜色变化，您不能简单地将其在单次传递中扁平化为单个图层。

在我看来，这听起来像是您需要在屏幕外缓冲区中维护多个独立图层，然后每帧将它们混合在一起以形成屏幕上显示的内容。这使您可以完全独立于每帧更新每一层的方式。