如何在 WebGL 中实现“色度键”？

Question

我试图弄清楚如何根据颜色设置我绘制的纹理正方形的 alpha。我正在使用白色背景的红色阿拉巴马州 A 的图片。我希望能够切换它以取出红色并通过 A 显示并切换它以取出白色并离开 A。我有 2 个带纹理的正方形。一个是背景，所以我认为我不能在碎片着色器中执行此操作，因为它会对两个图像都执行此操作，对吗？在我的主 js 文件中，当我单击切换 HTML 按钮时，我需要能够将“色度键”从红色切换为白色。

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

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

Answer 1

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

使用 alpha 的红色

gl_FragColor = color.rgbr;

对 alpha 使用非红色（例如绿色）的东西

gl_FragColor = color.rgbg;

现在你需要一些方法来选择

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