CODEWITHSUNDEEP
three.jstransparencydepth-testing
ampawd
ampawd

Reputation: 1010

Workaround of disabling depth testing for transparent objects?

In the scene I've got only transparent objects, thus with enabled depth testing it causes objects hiding each other. I know depth testing doesn't consider any transparency, it just writes to the depth buffer looking at values of z. Then how to render correctly two transparent objects ?

I did this renderer.context.disable(renderer.context.DEPTH_TEST); but nothing changed

illustration of my concrete problem: enter image description here

the cube is MeshLambertMaterial({color: ..., transparent: true, opacity: 0.6})

and the plane is MeshLambertMaterial({color: ..., transparent: true, opacity: 0.4})

cube is rendered after plane, but if the cube is opaque then whole of it will be rendered correctly without any discarding (also look at the points they are also opaque hence are visible).

So how to get it consider transparency and don't care about the order of rendering as well so two transparent objects don't hide each other ?

Upvotes: 0

Views: 3394

Answers (1)

WestLangley
WestLangley

Reputation: 104833

In three.js, you can turn off depth testing by setting

material.depthTest = false;

Don't be surprised if you have artifacts when the camera position is changed.

You might also want to read this answer.

three.js r.80

Upvotes: 3

Related Questions