Hello I am trying to make transformation animation using shaders , the thing that it is rendering really in weird way after applying them, even I tried before it to play with the opacity when I change the opacity from 0 to 1 in causes render problems like this.:
and the original is like this:
my shader code is like this : import { useFrame } from “@react-three/fiber”;
import { easing } from “maath”;
import * as React from “react”;
import * as THREE from “three”;
import CSM from “three-custom-shader-material”;
import {patchShaders} from “gl-noise”;
const vertexShader = /* glsl */ varying vec2 custom_vUv; varying vec3 custom_vPosition; void main() { custom_vUv = uv; vec4 worldPosition = modelMatrix * vec4(position, 1.0); custom_vPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); };
const fragmentShader = patchShaders(/* glsl */ `
varying vec2 custom_vUv;
varying vec3 custom_vPosition;
uniform float uThickness;
uniform vec3 uColor;
uniform float uProgress;
void main() {
gln_tFBMOpts opts = gln_tFBMOpts(1.0, 0.3, 2.0, 5.0, 1.0, 5, false, false);
// Use the world position instead of the UV for a better effect working on all objects
float noise = gln_sfbm(custom_vPosition, opts);
noise = gln_normalize(noise);
float progress = uProgress;
float alpha = step(1.0 - progress, noise);
float border = step((1.0 - progress) - uThickness, noise) - alpha;
csm_DiffuseColor.a = alpha + border;
csm_DiffuseColor.rgb = mix(csm_DiffuseColor.rgb, uColor, border);
}`);
export function DissolveMaterial({
baseMaterial,
thickness = 0.1,
color = “#eb5a13”,
intensity = 50,
duration = 1.2,
visible = true,
onFadeOut,
}) {
const uniforms = React.useRef({
uThickness: { value: 0.1 },
uColor: { value: new THREE.Color(“#eb5a13”).multiplyScalar(20) },
uProgress: { value: 0 },
});
React.useEffect(() => {
uniforms.current.uThickness.value = thickness;
uniforms.current.uColor.value.set(color).multiplyScalar(intensity);
}, [thickness, color, intensity]);
useFrame((_state, delta) => {
easing.damp(
uniforms.current.uProgress,
"value",
visible ? 1 : 0,
duration,
delta
);
if (uniforms.current.uProgress.value < 0.1 && onFadeOut) {
onFadeOut();
}
});
return (
<>
<CSM
baseMaterial={baseMaterial}
vertexShader={vertexShader}
fragmentShader={fragmentShader}
uniforms={uniforms.current}
toneMapped={false}
transparent
/>
</>
);
}
and here is how I put the shaders in the meshes:
<mesh geometry={nodes.Aset_nature_rock_S_vjcqahi_00_LOD4002.geometry} material={materials.Aset_nature_rock_S_vjcqahi_00_LOD0SG} position={[0.11, 0, -0.15]} rotation={[Math.PI / 2, 0, 0.79]} scale={0} >
I will be thankful for your help