CODEWITHSUNDEEP
htmlthree.js
BrianConnoly
BrianConnoly

Reputation: 11

z-index, renderDepth or depth-sorting on threejs

I'm trying to render some planes with textures and sprites. Everything has transparent PNG textures.

When objects overlap sometimes transparency works incorrectly. I tried to make a screenshot of my problem.

Also tried googling, playing with renderDepth and other strange things, but nothing helped...!

http://postimg.org/image/om69rdbxb/

Upvotes: 0

Views: 2034

Answers (2)

BrianConnoly
BrianConnoly

Reputation: 11

My problem is solved )

It's a little bit strange though... First of all I tried to use sprites. I run into problems that are on first picture. Then I transformed all sprites to planes which were rotated to the player angle every time camera rotates (I have only 4 camera positions, so it isn't big deal).

Everything was nice, but.... sometimes, when a lot of items were in one place, they overlapped each other... I started to google again. Found solution with "alphaTest: 0.5". It worked! The only "thing" that remained... this weren't sprites, so icons were deformed.

15 minutes ago I tried to replace planes with sprites back again and see if it will work. And.... IT'S WORKING! )

Only thing I had to do from the beginning is "alphaTest: 0.5". I still don't know how alphaTest works and why it helped, but it worked )

http://postimg.org/image/o0h9plz9b/

Upvotes: 1

datenwolf
datenwolf

Reputation: 162164

When objects overlap sometimes transparency works incorrectly. I tried to make a screenshot of my problem.

Yes. That's how it is. Depth Testing fails (miserably) when semi-/transparent geometry gets involved. You'll have to sort your objects far to near and draw in that order. Otherwise you'd require something called "order independent transparency" which is still an unsolved problem for rasterizers; there's been some progress though.

Upvotes: 1

Related Questions