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

Questions
1

Hello,

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
Michiel

afbeelding
afbeelding.jpg813×359 105 KB

afbeelding
afbeelding.jpg1225×359 128 KB

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.side=THREE.DoubleSide;
    material1.alphaTest = 0.0;
    material1.blendEquation=THREE.MaxEquation;
    material1.needsUpdate = true;

Demo:
https://industrious-bean.glitch.me/
Full code is on :
https://glitch.com/edit/#!/industrious-bean?path=public/index.html:1:0

2

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

3

links: should work now.

1 Like