Texture transparency removing any texture below it

Questions
,
1

I’m having a problem when I set 2 meshes with transparent textures on top of the other.

As you can see on the attached screenshot, it creates a transparent square around the Flower (Flower it’s a THREE.Sprite), but for some reason it only affects the ground texture and not the shoes/socks that are also behind this THREE.Sprite.

The floor-ground mesh was made feeding a THREE.BufferGeometry and calculating UV on my own.

Does anyone know how to avoid this transparent square?

Thanks in advance :slight_smile:

image
image739×501 41.4 KB

Edit: For some reason it only happens at certain angle of the camera

image

2

Try setting the depthWrite property of the sprite’s material to false.

3

When I do that, it happens this:

They show behind the floor texture, if I view them from the same angle where the invisible glitch square also appears when I don’t set depthWrite:false.

image

But they look okay if I see them from the angle where it also looks okay without depthWrite:false

image

4

I think it has to do with the way I’m drawing the floor textures, I’m creating them procedurally filling a BufferGeometry manually, creating on my own the Face Indexes, UV Indexes and Vertex orders? And maybe it cannot calculate depthness correctly? I don’t know, but I haven’t figured it out.

And I also have this other bug, Normal texture, not Sprite, is showing behind the BufferGeometry texture

image

5

This bug got fixed by adding: alphaTest:0.1 to the SpriteMaterial :slight_smile:

6

This got fixed by doing:

mesh.material.alphaTest = 0.1;
mesh.material.depthWrite = true;

All problems fixed :slight_smile:

1 Like