Shader material is transparent

Questions
,
1

8
81023×1142 73.1 KB

While change texture map using shader material it is showing me transparent where is the issue…

gltf.scene.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    const original = child.material;
                    /* original.normalMap.dispose();
                    delete original.normalMap; */
                    //uncomment previous lines to see no normal material
                    const texture = new THREE.ShaderMaterial({
                        vertexShader: `varying mediump vec2 v_uv;
                                        void main(){
	                                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                                        v_uv = uv;
                                        }`,
                        fragmentShader: `varying mediump vec2 v_uv;

uniform sampler2D text;
uniform int textureType;

void main(){
	vec4 texel = texture2D(text, v_uv);
  
  if(textureType == 1){
  	gl_FragColor.rgb = texel.rrr;
  }else if(textureType == 2){
  	gl_FragColor.rgb = texel.ggg;
  }else if(textureType == 3){
  	gl_FragColor.rgb = texel.bbb;
  }else{
  	gl_FragColor.rgb = texel.rgb;
  }
  
  gl_FragColor.a = 1.0;
}`,
                        uniforms: {
                            text: { value: null },
                            textureType: { value: 0 }
                        },transparent:false, depthTest:true,depthWrite:true
                    });
                    const noTextMat = new THREE.ShaderMaterial({
                        vertexShader: `void main(){
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0)
}`,
                        fragmentShader: `void main(){
  float size = 30.0;
  float slope = 10. / 6.;
  float brightness = 0.4;
  
  vec3 color = vec3(step(s * 0.5, mod(gl_FragCoord.x - gl_FragCoord.y / slope, s)) * 0.5 + brightness);
  color *= vec3(1.0, 0.5, 0.5);
  gl_FragColor = vec4(color, 1.0);
}`
                    });

                    child.userData.originalMaterial = child.material;
                    child.userData.textureViewMaterial = texture;
                    child.userData.noTextureMaterial = noTextMat;
                    child.material.envMap = assets.background;
                }

            })

if (value === 'Normal') {
                            if (original.normalMap) {

                                child.material = texture;
                                texture.uniforms.textureType.value = 0;
                                texture.uniforms.text.value = original.normalMap;
                                console.log('Normal map exist');
                            } else {
                                child.material = child.userData.noNormalMapMaterial;
                            }

Above is a piece of a code. Someone guide me where I ddi wrong?

2

You have three different materials, so it’s hard to tell which one is in use, you need a simpler example.

As a wild guess, since both of your ShaderMaterials don’t seem to be transparent, you’re probably still looking at child.material.

3

then how I need to fix this issue? any idea?

4

You need to provide the full working code producing your render and showing the issue on fiddle or codepen, then people here will tell you for sure why it’s transparent and how to fix it. It’s hard to do if you only show a piece of the code.

5

It’s organization code I don’t have permission rn and you have any idea how Roughness Map, AO Map and Metalness Map can be display on GLB?