Png loses alpha when use rotate function,

Processing
#1

How come the png alpha doesn’t work when rotating in P3D?
.png files included below

PImage img1, img2;
int x = 1;

void setup() {
  size(900, 600, P3D);

  img1 = loadImage("circle.png");
  img2 =loadImage("square.png");
}

void draw() {
  background(255);
  translate(width/2, height/2);
  pushMatrix();
  image(img1, 0, 0, 300, 300);
  rotateX(radians(x));
  image(img2, -150, 0, 300, 300);
  popMatrix();

  x++;
}
2 Likes
#2

square

#3

circle

#4

It’s working, but I think square.png is causing the confusion. The image is 300x300 pixels, of which the edges are fully transparent. If these weren’t, the circle would vanish every now and then. The centre of the squared image is opaque though.

Try using this image instead, where the entire image is transparent:

square2

#5

no it’s not… using your file the square is still blocked by the circle png where it should be transparent…

07%20PM
07%20PM2024×1468 91.5 KB

#6

That’s odd, I don’t have that.

screenshotAlpha
screenshotAlpha900×600 3.6 KB

#7

wow… this is odd… maybe a bug for specific version? I am using Processing 3.4 and OSX High Sierra 10.13…

#8

I notice in this picture, your square is already in front of the circle.png. when it’s in the back, it’s not blocked by the alpha of the circle.png?

#9

downloaded 3.5.3, still the same…

#10

You’re right, the moment it gets behind the circle it gets blocked as well. Similar to the screenshot you’ve send. And the circle image is transparent, so that can’t be it

1 Like
#11

Ah, figured out how to fix it. Add the following code in void setup():

hint(ENABLE_DEPTH_SORT);

more info on https://github.com/processing/processing/wiki/Troubleshooting (search for Objects with alpha)

2 Likes
#12

Something similar to this?

3 Likes
#13

Thanks Tiemen, hint(ENABLE_DEPTH_SORT); works on the sketch above, but doesn’t work on my other messier sketch which has 150+ img doing rotating, but Waboqueox’s suggestion does work! when added

hint(DISABLE_DEPTH_TEST);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_DEPTH_MASK);

Thank you Tiemen and Waboqueox

2 Likes
#14

just try to understand a bit more, I added

hint(DISABLE_DEPTH_TEST);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_DEPTH_MASK);

on the sketch above, it works too.
but one suggest hint(DISABLE_DEPTH_SORT);
the other is hint(ENABLE_DEPTH_SORT);
how come they both work…?

#15

https://processing.org/reference/hint_.html :sweat_smile::sweat_smile: checked it a time ago but don’t remember…

If later you don’t need it in your code, don’t forget to add:

hint(ENABLE_DEPTH_TEST);
hint(ENABLE_DEPTH_SORT);
hint(ENABLE_DEPTH_MASK);
1 Like
#16

Will give it read, thanks Waboqueox!

#17
2 Likes
#18

This is very clear visually, thank you hamoid!

#19

Have you tried doing a resetMatrix https://processing.org/reference/resetMatrix_.html
Since the result isn’t clearly in displaying alpha. And you might want to use .svg instead of .png, I don’t know if .png is alpha processed with or without, while .svg is define for alpha masking. Hope this helps.

1 Like