How to fix transparency issue with images with z depths?

Programming Questions

jansensan

How to fix transparency issue with images with z depths?

in Programming Questions • 3 months ago

So I'm having many PImage instances drawn on the canvas and I also apply a z depth to them. Most of them have their transparency is applied properly, but some others seem to not do it properly. I am not sure what to look into to fix this issue. Is there a way so that they all have the same transparency?

Below is a screenshot of what currently happens:

See the Github repo for the code if you will.

-mat.

Replies(6)

PhiLho

Re: How to fix transparency issue with images with z depths?

3 months ago

Note: Processing has the degrees() and the radians() functions built-in...

I am not sure why you use 3D for such flat looking sketch... Or why you use images instead of just drawing the circles.
Anyway, I recall people reporting issues with transparent images in OpenGL, but alas I don't recall if there was a solution.

amnon.owed

Re: How to fix transparency issue with images with z depths?

3 months ago

See: https://forum.processing.org/topic/how-would-i-draw-a-png-with-its-transparency-intact

jansensan

Re: How to fix transparency issue with images with z depths?

3 months ago

@PhiLho

Thanks for the heads up about the built-in utils.

I am using 3D because I intended to eventually some sort of camera focus to blur images that are too far or too near (although it seems I may have to look at another solution). Also, it provided a natural parallax effect with the z depth.

And the circles are not the final result, I am still waiting for an artist to provide me with some 3000 of his drawings. These are just placeholder PNGs to test in the meantime, to not waste time.

@amnon.owed

Thanks for this link. A friend also pointed me to a another article: Alpha-blending and the Z-buffer.

So I've created functions to sort my ArrayList in function of the z value, and then rendered the images in the draw loop, but those results are worse. None of the images have transparency now. I've pushed the code to my repo, if you are interested in taking a look.

I may start looking into creating a parallax effect to mimic the real depth of a z value. It my be necessary to add a blur effect with that too. I'd rather not go that route, let me know what you think. Thanks!

-mat.

PhiLho

Re: How to fix transparency issue with images with z depths?

3 months ago

Thanks for explaining your needs. I suspected what you explained, but I preferred to be sure you didn't overlooked some options... (some people are really newbies here

amnon.owed

Re: How to fix transparency issue with images with z depths?

3 months ago

I have looked at the code on your GitHub and there are multiple problems.

The result is the same for your sortImagesBackToFront() and sortImagesFrontToBack() methods, while the names would suggest opposite results. So one of them is returning an incorrect result.
The one that returns the incorrect result is sortImagesBackToFront(), because it returns the images front to back.
This is unfortunate because we really need backToFront for depth sorting.

Quick solution. Use this in your setup():

sortImagesBackToFront(); // sorts the images front to back
java.util.Collections.reverse(images); // reverse the list

Long term solution. Write a correct method for sortImagesBackToFront(), while realising that back in Processing is directed into the screen which is in coordinate space terms the negative z, while front is out of the screen which is in coordinate space terms positive z. Meaning lower z is back and higher z is front. Meaning sortImagesBackToFront() should return a list from lowest to highest.

Either of these solutions should give a good visual result.

jansensan

Re: How to fix transparency issue with images with z depths?

3 months ago

Thanks for the tip, it seems I had wrongly adapted my sorting method from my other prototype. I made the corrections and now it seems like the images are displayed properly!!

EDIT (June 29th 2013):

I deleted the repository mentioned above, however I did create a tutorial that explained how I managed to use my images with z depth and display their transparency.

https://github.com/jansensan/tutorial-processing-keep-image-transparency-with-z-depth

Top Reply