Comment essentiellement "Chroma Key" dans WebGL?

Question

J'essaie de comprendre comment régler l'alpha d'un carré texturé que je dessine en fonction de la couleur. J'utilise une photo d'un Alabama A rouge avec un fond blanc. Je veux être en mesure de basculer pour sortir le rouge et montrer à travers le A et basculer pour sortir le blanc et quitter le A. J'ai 2 carrés texturés. L'un est l'arrière-plan, donc je pensais que je ne pouvais pas faire cela dans le shader de frag, car il le ferait pour les deux images non? Dans mon fichier js principal, je dois être en mesure de basculer la "clé chroma" du rouge au blanc lorsque je clique sur le bouton bascule HTML. Donc, comment puis-je changer l'alpha d'un carré texturé basé sur le pixel, s'il n'y a que 4 vrais points avec des couleurs? Ou 6 points avec 2 étant utilisés deux fois (2 triangles).

En passant, ce n'est qu'en 2D.

Answer 1

la version Terse est d'utiliser rouge ou quelque chose d'autre pour votre alpha

Utilisez le rouge de l'alpha

gl_FragColor = color.rgbr; 

Utilisez quelque chose de pas rouge (par exemple vert) pour l'alpha

gl_FragColor = color.rgbg; 

Maintenant, vous besoin d'un moyen de sélectionner

uniform bool useRed; 

... 

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

Ou peut-être une façon plus créative est de mélanger le rouge et le vert.

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