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

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

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

Post 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!
User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

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

Post 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?
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

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

Post 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!
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

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

Post by darkfrei »

You can use png optimization tool mo make it smaller.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot] and 20 guests