Как по сути "Chroma Key" в WebGL?

Question

Я пытаюсь понять, как установить альфу текстурированного квадрата, который я рисую, в зависимости от цвета. Я использую изображение красной Алабамы А с белым фоном. Я хочу иметь возможность переключать его, чтобы убрать красный цвет и показать через A, и переключить его, чтобы убрать белый и оставить A. У меня есть 2 текстурированных квадрата. Одним из них является фон, поэтому я подумал, что не смогу сделать это в фрагментном шейдере, потому что он будет делать это для обоих изображений, верно? В моем основном js-файле мне нужно иметь возможность переключать "хроматический ключ" с красного на белый, когда я нажимаю на кнопку переключения HTML.

Итак, как мне изменить альфа текстурированного квадрата на основе пикселей, если есть только 4 истинные точки с цветами? Или 6 очков с 2, которые используются дважды (2 треугольника).

Это только в 2-D, кстати.

Answer 1

Краткая версия использует красный или что-то еще для вашей альфы

Используйте красный альфа

gl_FragColor = color.rgbr;

Используйте что-то не красное (например, зеленое) для альфы

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