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?