# How to overlay an image over another in P3D
**URL:** https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959
**Category:** Coding Questions
**Created:** [June 14, 2018, 11:26am UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959 "2018-06-14T11:26:57Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@rainfox](https://discourse.processing.org/u/rainfox)
#### Post date: [June 14, 2018, 11:26am UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/1 "2018-06-14T11:26:57Z")
In processing.js, how would you overlay an image over another one in P3D mode?
Here is my code:
```auto
/* @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?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 14, 2018, 11:31am UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/2 "2018-06-14T11:31:56Z")
translate(0,0,1); between the 2 images
---
### Author:  [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [June 14, 2018, 1:38pm UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/3 "2018-06-14T13:38:51Z")
What about `hint(DISABLE_DEPTH_TEST);`?
---
### Author:  [@nicolaskellum](https://discourse.processing.org/u/nicolaskellum)
#### Post date: [June 14, 2018, 3:36pm UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/4 "2018-06-14T15:36:21Z")
Hey @rainfox !
Do you mind uploading those images so we can test it out?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 14, 2018, 6:54pm UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/5 "2018-06-14T18:54:16Z")
> [@rainfox](#):
>
> ```auto
> /* @pjs preload="duck.jpg"; */
> /* @pjs preload="a.png"; */
>
> ```
Once Pjs spots the 1st `/*@pjs */` directive comment block within a sketch, it skips the others! ☠⚠💀
[http://ProcessingJS.org/reference/pjs%20directive/](http://ProcessingJS.org/reference/pjs%20directive/)
---
### Author:  [@rainfox](https://discourse.processing.org/u/rainfox)
#### Post date: [June 14, 2018, 7:13pm UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/6 "2018-06-14T19:13:06Z")
I have tried that with no luck as mentioned in the description. Always only duck shows.
---
### Author:  [@rainfox](https://discourse.processing.org/u/rainfox)
#### Post date: [June 14, 2018, 7:14pm UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/7 "2018-06-14T19:14:27Z")
Thanks for the help. My full testing code is in openprocessing:
[https://www.openprocessing.org/sketch/554591](https://www.openprocessing.org/sketch/554591)
---
### Author:  [@rainfox](https://discourse.processing.org/u/rainfox)
#### Post date: [June 14, 2018, 7:17pm UTC](https://discourse.processing.org/t/how-to-overlay-an-image-over-another-in-p3d/959/8 "2018-06-14T19:17:11Z")
Wow, I move them into 1 line, then add a translate(0,0,1) in between, now they show as expected!! Thanks!