# Create Two Overlapping Sprite

**URL:** <https://discourse.threejs.org/t/create-two-overlapping-sprite/46794>\
**Category:** Questions\
**Tags:** sprite, textures\
**Created:** [January 12, 2023, 3:43am UTC](https://discourse.threejs.org/t/create-two-overlapping-sprite/46794 "2023-01-12T03:43:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mahadi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mahadi/32/37213_2.png) [@mahadi](https://discourse.threejs.org/u/mahadi)\
**Post date:** [January 12, 2023, 3:43am UTC](https://discourse.threejs.org/t/create-two-overlapping-sprite/46794/1 "2023-01-12T03:43:30Z")

</div>

Hi, I have Two sprite object using transparent png file as texture. They have an intersection point. However, when the intersect sometimes Sprite1 is above, sometimes sprite2 is above. I want to keep anyone of them always above the other one.

N.B. I am always updating sprite1, sprite2, camera in the animation loop. in this order: sprite1, sprite2, camera . I want sprite2 to be always on top of sprite1. I mean the intersection part between them.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 12, 2023, 9:12am UTC](https://discourse.threejs.org/t/create-two-overlapping-sprite/46794/2 "2023-01-12T09:12:54Z")

</div>

Does it work if you define a value for `sprite2.renderOrder`? Try it with a value of `1`.

---

<div class="post-metadata">

**Author:** ![mahadi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mahadi/32/37213_2.png) [@mahadi](https://discourse.threejs.org/u/mahadi)\
**Post date:** [January 12, 2023, 10:25am UTC](https://discourse.threejs.org/t/create-two-overlapping-sprite/46794/3 "2023-01-12T10:25:27Z")

</div>

Hi, it seems partially solve the problem, however it creates another problem. In this case sometimes my sprite1 background seems visible over sprite2. Both of them having transparent background. My scene background is ‘grey’. The color of the sprite is dark grey. But when I set render order, sprite1’s white background sometimes is seen covering sprite2. It’s because when sprite2 rotates, it covers some part of sprite1 and I want that part of sprite1 to be hidden by sprite2.

---

<div class="post-metadata">

**Author:** ![mahadi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mahadi/32/37213_2.png) [@mahadi](https://discourse.threejs.org/u/mahadi)\
**Post date:** [January 20, 2023, 12:53pm UTC](https://discourse.threejs.org/t/create-two-overlapping-sprite/46794/4 "2023-01-20T12:53:16Z")

</div>

Hi, it doesnt work. If i set renderOrder for sprite2=1, the intersection point of them is covered by sprite1.  
Look at this without renderOrder:  
 ![Screenshot 2023-01-20 at 9.49.52 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/0/207bfa9bca83a4b8fb57a5be5c9f176d4421058b.png)  
And this is with renderOrder:  
 ![Screenshot 2023-01-20 at 9.50.43 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/3/c3036fb2b575b43a3c4d96d6acdc7888fc05bd9a.png)  
My background color is grey btw.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 20, 2023, 2:37pm UTC](https://discourse.threejs.org/t/create-two-overlapping-sprite/46794/5 "2023-01-20T14:37:14Z")

</div>

Do you mind setting the `depthWrite` property of the sprites materials to `false`? Does the glitch in the second screenshot go away?

---

<div class="post-metadata">

**Author:** ![mahadi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mahadi/32/37213_2.png) [@mahadi](https://discourse.threejs.org/u/mahadi)\
**Post date:** [January 20, 2023, 3:04pm UTC](https://discourse.threejs.org/t/create-two-overlapping-sprite/46794/6 "2023-01-20T15:04:25Z")

</div>

Hi, this works like a charm…thank you so much