Why do my objects with transparent textures dissapear when I move the viewpoint?


I have built a threejs world with transparency masked textures and glsl shader and this kind of works, The problem is when I move the view perspective, some assets dissapear. ( see pictures below)
I did some research and I think it has to do something with object sorting /alphatest and update of the Z-buffer. but this is all pretty new to me.

I tried to solve it in many ways but am still unsuccesfull.
I hope someone knows how to solve this. Or is this a threejs bug?

Thanks in advance

The material is defined:

 var material1 = new THREE.ShaderMaterial( {

					uniforms: params[ 1 ][ 1 ],
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					fragmentShader: document.getElementById( params[ 1 ][ 0 ] ).textContent

					} );
  material1.transparent =true;
    var blendings = [ "NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending","THREE.CustomBlending" ];
    var blending = blendings[ 5 ];

    material1.blending = THREE[ blending ];
    material1.shading = THREE.FlatShading;
    material1.alphaTest = 0.0;
    material1.needsUpdate = true;

Full code is on :

Your link to glitch.com just leads to the default app.

links: should work now.

1 Like