How to overlay an image over another in P3D

Processing Coding Questions
1

In processing.js, how would you overlay an image over another one in P3D mode?

Here is my code:

    /* @pjs preload="duck.jpg"; */
    /* @pjs preload="a.png"; */ 
    PImage imageDuck;
    PImage imageA;
    
    void setup() {
     	size(500, 500, P3D);
    	imageDuck = loadImage("duck.jpg");
    	imageA = loadImage("a.png");
    }
    
    void draw() {
    	background(255);
    	noStroke();
        image(imageDuck, 0, 0);
    	image(imageA, 0, 0);
    }

So what the code trying to do is to display a duck image, then overlay another image name a.png (with transparent background) on top of it.

When I use the normal size(500, 500); without the P3D mode, the image overlay works perfectly.

However, I am using P3D because the next thing I am going to do is to rotate my images together.

So in this size(500, 500, P3D) mode, I can see my a.png flashed once, then only my duck image shows. If I comment out duck, a.png will show. If I comment out a.png, my duck shows. If I reorder the image() call, still only the duck image shows. I added translate(0,0,-1) or translate(0,0,1) in between my image() calls, no luck, only my duck image shows.

Is this even possible?

1 Like
2

translate(0,0,1); between the 2 images

1 Like
3

What about hint(DISABLE_DEPTH_TEST);?

4

Hey @rainfox !

Do you mind uploading those images so we can test it out?

1 Like
5

Once Pjs spots the 1st /*@pjs */ directive comment block within a sketch, it skips the others! :skull_and_crossbones::warning::skull:
http://ProcessingJS.org/reference/pjs%20directive/

2 Likes
6

I have tried that with no luck as mentioned in the description. Always only duck shows.

7

Thanks for the help. My full testing code is in openprocessing:

https://www.openprocessing.org/sketch/554591

2 Likes
8

Wow, I move them into 1 line, then add a translate(0,0,1) in between, now they show as expected!! Thanks!

2 Likes