ShadeMaterial goes behind other material mesh

Hi, I made the room with monitor.

and I bake them all in one except the monitor display part for change display texture.

First, I tried just switching texture and it works well. I can switch screen but I wanted more.

So I decided to put shader-material for fadein and fadeout for texture.

But some reason I can’t see display texture after when I change display material to shaderMaterial.

before display material to shaderMaterial

after display material to shaderMaterial

And when I hide all other mesh except display mesh, I can see the display mesh with shader material

I’ll show the code of shader material

import gsap from "gsap";
import * as THREE from "three";

export const newfadeShaderMaterial = (defaultTexture: THREE.Texture | null): THREE.ShaderMaterial => {
  return new THREE.ShaderMaterial({
    uniforms: {
      t1: { value: defaultTexture },
      t2: { value: null },
      transition: { value: 0 },
    },
    vertexShader: `
        varying vec2 vUv;
      void main() {
          vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
      }
    `,
    fragmentShader: `
        uniform sampler2D t1;
      uniform sampler2D t2;
      uniform float transition;
      varying vec2 vUv;
      void main(){
          vec4 tex1 = texture2D(t1, vUv);
        vec4 tex2 = texture2D(t2, vUv);
        
        gl_FragColor = mix(tex1, tex2, transition);
      
      }
    `,
  });
};

export function textureFade(
  shaderMaterial: THREE.ShaderMaterial,
  from: THREE.Texture | null,
  to: THREE.Texture | null
) {
  shaderMaterial.uniforms.t1.value = from;
  shaderMaterial.uniforms.t2.value = to;
  gsap.fromTo(
    shaderMaterial.uniforms.transition,
    { value: 0 },
    {
      value: 1,
      duration: 2,
      repeatRefresh: true,
    }
  );
}

I have no idea what is going on…
Is it impossible to use shaderMaterial with just MeshPhongMaterial?

Change this line

gl_FragColor = mix(tex1, tex2, transition);

to

gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);

check if your computer screen is purple, if it’s not, your shader might not be in use or didn’t compile.

If it is, change the line to

gl_FragColor = texture2D(t1, vUv);

check if you see the texture, make sure it’s not transparent.

If you do, change t1 to t2, check the second texture. If you see both, there is something wrong with your textureFade function.

I checked it
스크란샷 2022-07-07 α„‹α…©α„Œα…₯ᆫ 11.44.19

but in some reason the ShaderMaterial seems gose below the other MeshStandardMaterial

스크란샷 2022-07-07 α„‹α…©α„Œα…₯ᆫ 11.44.40

I can’t see purple plane if i change visibilty of other mesh. I can see purple plane when I hide the all meshes except display mesh

I think I found the reason. when I use logarithmicDepthBuffer: true for renderer.

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true
  });

this symptom occur. when I just remove that line. it works well

That’s strange, I don’t think using logarithmic buffer should change the result. Maybe something to do with early depth test? There might be a problem with the code rather then the log buffer.

But if it works, … oh well :wink:

1 Like