CODEWITHSUNDEEP
3dthree.js
Gil Birman
Gil Birman

Reputation: 35900

Why do transparent materials result in occlusion?

I have a threejs scene with several meshes (planes) that all have transparent materials. The renderer has transparency turned on, and you can tell this is the case because the <body> has a blue-to-black gradient style.

<body style="background: linear-gradient(to bottom, #1e5799 0%,#000000 100%);">

Here's how I create the plane geometry:

const geometry = new THREE.PlaneBufferGeometry( 15, 15, 1 );

Then they are rotated so that they are intersecting.

Notice that in some places, they are composited such that two materials are blended together, but in other places part of one plane occludes part of the other. My understanding is that one plane is considered to be "in front" of the other plane which determines the order in which they are drawn. However, why is it that a plane with transparency occludes the other?.

Ie., even if it is impossible to draw intersecting planes in the correct order, I still expected them to be composited incorrectly, but instead they are occluded.

screenshot

Upvotes: 2

Views: 417

Answers (3)

Falk Thiele
Falk Thiele

Reputation: 4494

On your material set depthWrite to false: material.depthWrite = false;

When you set it to false, the material has no effect on the depth buffer anymore. Im sorry I cant explain this further, its just personal experience.

Three.js r73

Upvotes: 3

gaitat
gaitat

Reputation: 12632

Use the material alphaTest property to remove these artifacts.

Upvotes: 0

WacławJasper
WacławJasper

Reputation: 3364

Short answer is that depth testing and alpha blending doesnt work well together. If the quad drawn first is closer, then the depth buffer will be written for the entire quad regions, regardless of the alpha values. The particles drawn after that are further fails the depth test and so that they are not drawn.

The partial solution to this is usually an alpha test in the fragment shader. If (color.a < 0.01) {discard;} Or disable depth test.

Upvotes: 2

Related Questions