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

Question

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

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

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

Answer 1

简洁的版本是使用红色或其他东西作为你的阿尔法

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