How would I draw a Png with its transparency intact

Programming Questions

g1i1ch

How would I draw a Png with its transparency intact

in Programming Questions • 9 months ago

I'm trying to make some leaves in 3d using an image texture of a leaf with transparency, but it's drawing the background color on the transparent parts. It's hard to explain so I took a picture of what's happening for you.

The picture has transparency, how can I get it to draw the transparency?

[update]

Here's code to recreate it,

Copy code

PImage img;
void setup() {
rectMode(CENTER);
size(400,400, P3D);
img = loadImage("leaf.png");
};
void draw() {
background(frameCount%255);
image(img, 20, 20, 150, 150);
translate(50,50,-1);
image(img, 20, 20, 150, 150);
}

The leaf image is here, http://www.burrconstruction.com/img/leaf.png

Here's a thread from a month ago that was never answered https://forum.processing.org/topic/problem-when-displaying-multiple-overlapping-transparent-images

Replies(4)

tfguy44

Re: How would I draw a Png with its transparency intact

9 months ago

Seems to work fine using my version of Processing 1.5.1. The only change I made to your code was to call loadImage() with the URL of the leaf image (since I didn't bother saving it locally). What version of Processing are you using?

g1i1ch

Re: How would I draw a Png with its transparency intact

9 months ago

I'm using the newest version 2.0b7. And that's not fully it, unfortunately :/

See the upper leaf should be over the lower leaf. I do translate(50,50,-1); before drawing the lower one which should put it beneath the first leaf.

Should I fill out a bug report, it looks like this could be a bug

amnon.owed

Re: How would I draw a Png with its transparency intact

9 months ago

This is something related to opengl in general rather than being processing specific. Either google terms like "alpha depth sort" or take a look at these pages:

In your example this would be for Processing 2.0b7:

Copy code

PImage img = loadImage("http://www.burrconstruction.com/img/leaf.png");
void setup() {
size(400, 400, P3D); // P3D is OPENGL in 2.0xx
}
void draw() {
background(frameCount%255);
pushMatrix();
translate(50,50,-1);
image(img, 20, 20, 150, 150);
popMatrix();
image(img, 20, 20, 150, 150);
}

With a thousand objects this would be same idea. You sort them by depth, then draw them from back to front.

In Processing 1.5.1 you had a helper function for this called hint(ENABLE_DEPTH_SORT) which would do the sorting for you. So for Processing 1.5.1 you could use the following code and get the same result:

Copy code

import processing.opengl.*;
PImage img = loadImage("http://www.burrconstruction.com/img/leaf.png");
void setup() {
size(400, 400, OPENGL);
hint(ENABLE_DEPTH_SORT);
}
void draw() {
background(frameCount%255);
image(img, 20, 20, 150, 150);
translate(50, 50, -1);
image(img, 20, 20, 150, 150);
}

While it's still 'present' in 2.0xx, it seems the whole hint() method has been removed from the 2.0xx reference and hint(ENABLE_DEPTH_SORT) seems to be no longer functional.

g1i1ch

Re: How would I draw a Png with its transparency intact

9 months ago

Hmmm, yeah I see now, I checked the code in PGraphics3D. The sorting method is empty and commented out. I guess I'll have to make my own.

Top Reply