Hello, i use some simplex noise to my model , but it hard to me to apply material like shadow and light and reflection using glsl so i want to add noise by modified material , so how i can replace this shader file in my three material
Vertex.txt (3.7 KB)
Fragment.txt (217 Bytes)
You can use a library like this to add your own vertex shaders to pre-existing ThreeJS Materials
Remember! The vertex shader must also recalculate normals properly for the lighting to work.
Did you try to use it plz ??
For using built-in materials you can extend them via onBeforeCompile (which limits uniform capabilities though) or use a plugin i made for which takes care of most work and disguises your new material as a built-in one in order to use all features. It also makes it easy to get shadows work without further/repetitive code patching.
So for your code:
Notice if you want to use textures you can also just use map as usually. Your essential part is:
const deformMaterial = THREE.extendMaterial( THREE.MeshStandardMaterial, {
vertexHeader: `precision highp float;
uniform bool MouseDentro;
uniform float Tiempo;
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r) {
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P) {
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
`,
vertex: {
transformEnd: `
float Amplitud = (MouseDentro == false) ? 0.75 : 2.5;
float Frequencia = (MouseDentro == false) ? 0.43 : 1.0;
float Desplazamiento = Amplitud * cnoise(Frequencia * position + Tiempo);
transformed += normal * Desplazamiento;
`
},
material: {
wireframe: true
},
uniforms: {
MouseDentro: {
mixed: true,
linked: true,
value: true
},
Tiempo: {
mixed: true,
linked: true,
value: 1.0
},
roughness: 0.75,
uTime
}
} );
For shadows:
deformMaterial.customDepthMaterial = THREE.extendMaterial( THREE.MeshDepthMaterial, {
template: deformMaterial
} );
1 Like
What are you referring to?
1 Like
Oh , it is totally working thaank you so so much
1 Like
I have small question plz , if i want to set prop of material like color i set it in
material: {
shininess: 10,
color: 0xff0000
},
it must give red color to mesh right ? but it not
When extending a material you work with a ShaderMaterial, so instead passing it to the material object, you define these type of parameters in uniforms.
uniforms: {
shininess: 10,
diffuse: new THREE.Color( 0xff0000 )
},
It doesn’t automatically convert color values into THREE.Color objects, as there is no predefined purpose for the name of the uniform, but that’s the only exception (color properties).
Edit: @lolia also almost forgot, if you don’t use this uniform yourself but expect it to behave like the regular color property, this is also more of an exception as the uniform of it is called diffuse. I edited it above since it seems like you expect the in-built behaviour.
2 Likes