Weird distance reflection (draw) on transparent Glass

Questions
,
1

In this video you can see, that something is wrong with the glass and ground transparency in the distance.

//Light
const light = new THREE.DirectionalLight( 0xffffff, 0.75 );
light.castShadow = false;
scene.add(light);

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.25);
hemiLight.position.set( 0, 20, 0 );
scene.add(hemiLight);

const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0);
dirLight.position.set( 3, 10, 10 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024 * 2, 1024 * 2);
dirLight.shadow.camera.top = 4;
dirLight.shadow.camera.bottom = - 4;
dirLight.shadow.camera.left = - 4;
dirLight.shadow.camera.right = 4;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 40;
dirLight.shadow.bias=-0.002;
scene.add( dirLight );

// Shadow Helper
//var shadowHelper = new THREE.CameraHelper( dirLight.shadow.camera );
//scene.add( shadowHelper );

// Ground 
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 100, 100 ), new THREE.MeshPhongMaterial( { color: 0xeeeeee, shininess: 1, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
ground.position.y = -1;
scene.add( ground );

const grid = new THREE.GridHelper( 1000, 1000, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
grid.position.y = -1.1;
scene.add( grid );

P.S. Please ignore the browser-tabs :wink:

2

Ok i found out, that is has something to do with the start-position of the model and ground. In my project my ground is:

ground.position.y = -1;

So the model need to be

theModel.position.y = -1;

to be on the ground.

I just changed the y positions to 0

ground.position.y = 0;
theModel.position.y = 0;

and this solves my problem. Still want to know is there is a way to fix it, when you use y = -1 positions?

3

Maybe be because webgl cant sort transparent objects. Try set again ground.position.y = -1; etc.
And set theModel.material.renderOrder=-5; or theModel.material.renderOrder=5;

1 Like
4

YEP ! Thank you ! The keyword is renderOrder.
Now i can play with y = -1 positions and still have nice transparency without the glitch.

theModel.traverse(o => {
    if (o.isMesh) {
      o.castShadow = true;
      o.receiveShadow = true;   
      o.needsUpdate = true;
      o.renderOrder = 5; 
    }
  });
1 Like