1

I am trying to figure out how to set the alpha of a textured square that I draw depending on the color. I am using a picture of a red Alabama A with a white background. I want to be able to toggle it to take out the red and show through the A and toggle it to take out the white and leave the A. I have 2 textured squares. One is the background, So I thought I couldn't do this in the frag shader because it would do it to both images right? In my main js file I need to be able to toggle the "chroma key" from red to white when I click on the toggle HTML button.

So, how do I change the alpha of a textured square based on pixel, if there are only 4 true points with colors? Or 6 points with 2 being used twice (2 triangles).

This is only in 2-D by the way.

EthanSchatz
  • 25
  • 1
  • 8

1 Answers1

0

Terse version is use red or something else for your alpha

Use red of alpha

gl_FragColor = color.rgbr;

Use something not red (for example green) for alpha

gl_FragColor = color.rgbg;

Now you need some way to select

uniform bool useRed;

...

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

Or maybe a more creative way is to blend red and green.

uniform float mixAmount; // 0 = red, 1 = green
...
gl_FragColor = mix(color.rgbr, color.rgbg, mixAmount);
gman
  • 100,619
  • 31
  • 269
  • 393
  • For the record, what is done in the first two examples is called [swizzling](https://www.opengl.org/wiki/Data_Type_%28GLSL%29#Swizzling) – LJᛃ Mar 30 '15 at 14:00
  • Thanks man, gonna try it out today and see what I can come up with. :) Makes total sense though. However, What if i want to alternate between red and white? instead of red and green. color.r for alpha but if not useRed I want it to key out white, but not red. Does that make sense? – EthanSchatz Mar 30 '15 at 17:06
  • And also, is there any way I can make this do this keying out for my texture1 (foreground) but not key out my texture2 (background)? – EthanSchatz Mar 30 '15 at 17:32
  • Red = r1,g0,b0, White = r1,g1,b. That means choosing green as alpha = choosing what is **not** red. You can also choose blue and get the same results. As far as doing one or the other use a different shader to first draw the background, then using blending and your special "select alpha" shader to draw the foreground. – gman Mar 30 '15 at 17:50