My current challenge involves using a customized shader to incorporate gradient colors onto a model. However, I have noticed that the shader lacks clarity when it comes to displaying shadows with well-defined edges (as shown in the first image). It seems to have an unintended "glowing" effect.
I aim to achieve the same level of edge clarity seen in the second image with my custom shader. How can I make this happen?
THREE.ShaderMaterial:
https://i.sstatic.net/7yswp.png
THREE.MeshStandardMaterial:
https://i.sstatic.net/vWb6z.png
The custom shader featuring a gradient:
const mat: THREE.Material = new THREE.ShaderMaterial({
uniforms: {
color1: {
value: new THREE.Color("#01e2f6")
},
color2: {
value: new THREE.Color("#FF6969")
},
color3: {
value: new THREE.Color("#FFF9DE")
},
bMin: {
value: this.mesh.geometry.boundingBox.min
},
bMax: {
value: this.mesh.geometry.boundingBox.max
}
},
vertexShader: `
uniform vec3 bMin;
uniform vec3 bMax;
varying vec2 vUv;
void main() {
vUv.y = (position.y - bMin.y) / (bMax.y - bMin.y);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`,
fragmentShader: `
uniform vec3 color1;
uniform vec3 color2;
uniform vec3 color3;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
gl_FragColor = mix(gl_FragColor, vec4(mix(color2, color3, vUv.y), 1.0), vUv.y);
}
`
});
this.mesh.material = mat;