Page 1 of 1

Shader to create transparency? (I need to use JPG)

Posted: Sat Nov 26, 2022 11:50 pm
by alberto_lara
I was able to create a shader that returns magenta as transparent, with a small tolerance margin:

Code: Select all

uniform vec2 imageSize;

bool isMagenta(vec4 pixel) {
  float errorMargin = 0.05;
  if (
    (pixel.r >= (1 - errorMargin) && pixel.r <= 1) &&
    (pixel.g >= 0 && pixel.g <= errorMargin) &&
    (pixel.b >= (1 - errorMargin) && pixel.b <= 1)
  ) {
    return true;
  } else {
    return false;
  }
}

vec4 effect(vec4 loveColor, Image tex, vec2 uv, vec2 screenPos) {
  vec2 uvPx = uv * imageSize; // I don't really know what this or the other next 2 lines do
  vec2 f = fract(uvPx); //
  vec4 pixel = Texel(tex, uv);
  vec4 transparent = vec4(0, 0, 0, 0);

  if (isMagenta(pixel)) {
    return transparent;
  } else {
    return pixel;
  }
}
What I want to achieve now is is something similar but using anti aliasing, so I need this:

Image

To be this:

Image

I'm guessing GLSL has something out of the box for this but I'm a total noob on it, any help would be appreciated. Thanks!

Re: Shader to create transparency? (I need to use JPG)

Posted: Sun Nov 27, 2022 12:13 am
by pgimeno
If your image is black and white, then yes it can be done. But in general it's not possible to tell apart the magenta used for transparency and partially blended with other colours, from the colour of parts of the image.

Not sure why you're limited to JPEG, but maybe you can have a separate greyscale image with the alpha?

Re: Shader to create transparency? (I need to use JPG)

Posted: Sun Nov 27, 2022 12:30 am
by alberto_lara
This is for a game I'm creating and I'll need quite a few hi res images, so that's why I need JPG, PNG would make it way too "heavy" (we're talking about digital art). I think I'll stick to no AA then. Thanks!

Re: Shader to create transparency? (I need to use JPG)

Posted: Sun Nov 27, 2022 3:55 pm
by darkfrei
You can use png optimization tool mo make it smaller.