Overlaying images with opacity using tint() in P3D

Processing Coding Questions
1

I’m playing around with overlaying two images in 3D space using P3D and tint(). When I bring the opacity of the front image down instead of seeing the image behind I get a black box. (see images below). I trying to create a composite with multiple images over each other. Is there an easier way to do this? Thanks in advance.

void setup() {
  size(2160,1436,P3D); 
  frameRate(30);
  noStroke();
  smooth();
}

//Picture object display function where tint() is called.
 void display(){
    pushMatrix();
    translate(0,0,offSet);
    float xPos = map(imgSize,1,2,0,-width/2);
    float yPos = map(imgSize,1,2,0,-height/2);
    tint(255,imgOpacity);
    image(img,xPos,yPos,img.width*imgSize,img.height*imgSize);
    popMatrix();
  }

36%20AM
Screen Shot 2018-11-30 at 10.28.36 AM.jpg2032×1496 321 KB
51%20AM
Screen Shot 2018-11-30 at 10.28.51 AM.jpg2156×1582 263 KB
02%20AM
Screen Shot 2018-11-30 at 10.29.02 AM.jpg2124×1554 165 KB

1 Like
2

You might want to look at the various hints for disabling depth test / writing.

2 Likes
3

Thanks! hint(ENABLE_DEPTH_SORT) seems to do the trick.

4

Did you try DISABLE_DEPTH_TEST and/or DISABLE_DEPTH_MASK? The way you have is potentially the slower of the options, but it depends what you’re doing. Should have said that in previous message, sorry!

1 Like
5

I tried DISABLE_DEPTH_TEST but I need the z-axis to place the images in 3D space. I just tried DISABLE_DEPTH_MASK and it gives me the same result as DISABLE_DEPTH_TEST. The only reference I am finding for hint() is in processing.js, is there a better place to look?

6

Few threads on here. Not found much in documentation on them. You don’t need depth test for z-axis. But rule 1 is usually stick with what works! :smile:

1 Like