如何在 WebGL 中本质上 "Chroma Key"？

Question

我想知道如何根据颜色设置我绘制的带纹理正方形的 alpha。我使用的是白色背景的红色 Alabama A 的图片。我希望能够切换它以取出红色并通过 A 显示并切换它以取出白色并保留 A。我有 2 个带纹理的正方形。一个是背景，所以我认为我不能在碎片着色器中这样做，因为它会对两个图像都这样做，对吗？在我的主 js 文件中，当我单击切换 HTML 按钮时，我需要能够将 "chroma key" 从红色切换为白色。

那么，如果只有 4 个带颜色的真实点，我该如何更改基于像素的纹理正方形的 alpha？或 6 个点，其中 2 个被使用两次（2 个三角形）。

顺便说一下，这只是二维的。

Answer 1

简洁版本是使用红色或其他颜色作为您的 alpha

使用 alpha 的红色

gl_FragColor = color.rgbr;

使用非红色（例如绿色）作为 alpha

gl_FragColor = color.rgbg;

现在你需要一些方法来 select

uniform bool useRed;

...

gl_FragColor = vec4(color.rgb, useRed ? color.r : color.g);

或者更有创意的方法是混合红色和绿色。

uniform float mixAmount; // 0 = red, 1 = green
...
gl_FragColor = mix(color.rgbr, color.rgbg, mixAmount);