# Overlaying images with opacity using tint() in P3D

**URL:** <https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114>\
**Category:** Coding Questions\
**Created:** [November 30, 2018, 3:49pm UTC](https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114 "2018-11-30T15:49:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![currymike](https://avatars.discourse-cdn.com/v4/letter/c/f08c70/32.png) [@currymike](https://discourse.processing.org/u/currymike)\
**Post date:** [November 30, 2018, 3:49pm UTC](https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114/1 "2018-11-30T15:49:20Z")

</div>

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/45595433c59bde2f32e5aa61445ba99c6b9a0161.jpeg) ![51%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9848ba3732b59af244b950be0157a349d8517578.jpeg) ![02%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3f5da7adc9682e52179fbde9874b4a58e0c81615.jpeg)

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [November 30, 2018, 4:36pm UTC](https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114/2 "2018-11-30T16:36:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![currymike](https://avatars.discourse-cdn.com/v4/letter/c/f08c70/32.png) [@currymike](https://discourse.processing.org/u/currymike)\
**Post date:** [November 30, 2018, 5:50pm UTC](https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114/3 "2018-11-30T17:50:40Z")

</div>

Thanks! hint(ENABLE\_DEPTH\_SORT) seems to do the trick.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [November 30, 2018, 6:14pm UTC](https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114/4 "2018-11-30T18:14:32Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![currymike](https://avatars.discourse-cdn.com/v4/letter/c/f08c70/32.png) [@currymike](https://discourse.processing.org/u/currymike)\
**Post date:** [November 30, 2018, 6:21pm UTC](https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114/5 "2018-11-30T18:21:31Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [November 30, 2018, 6:37pm UTC](https://discourse.processing.org/t/overlaying-images-with-opacity-using-tint-in-p3d/6114/6 "2018-11-30T18:37:17Z")

</div>

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! 😄