CODEWITHSUNDEEP
javascriptopengl-es3dthree.jswebgl
mystery
mystery

Reputation: 19523

Self-transparent object only looks correct from one side

I am using THREE.js with the WebGL renderer and I have a self-transparent object. It's a mesh of a single geometry with a basic material having a texture and transparent: true. It looks right from one side, where transparent parts of itself layer correctly, but not from the other:

The trees on the left look wrong (the map behind them is ignored) while the trees on the right are fine (the map behind them can be seen through). The entire thing you see is a single geometry.

Any ideas how to fix this?

I am currently using a kludge solution of making each transparent face its own object, but this is not ideal.

Upvotes: 4

Views: 926

Answers (1)

mcode
mcode

Reputation: 466

I once had the same problem.

Here is a nice Video for you to understand why this happens:

Udacity Classroom Course

Check out renderer.sortObjects and object.Model.material.depthWrite, they can help you but it's hard to fix it 100% correctly. It will cost a lot of GPU, can you upload your Code to Codepen, pastebin, dropbox or anything (only the necessary stuff) so I can try to fix it for you.

EDIT: Maybe first try to set all the transparent Meshes to:

object.Model.material.depthWrite = false;

EDIT2: Just try the depthWrite = false on the Transparent Objects!

Upvotes: 2

Related Questions