Presenting a demonstration showcasing the use of a height map in three.js coupled with custom shader(s). Everything appears to be functioning smoothly now. The working demo can be found on this link. Below are the shader scripts:
<script id="vertexShader" type="x-shader/x-vertex">
uniform sampler2D vTexture;
uniform float vScale;
uniform vec3 vLut[ 256 ];
varying vec3 vColor;
void main() {
vec4 heightData = texture2D( vTexture, uv );
// if the map is grayscale it doesn't matter if you use r, g, or b.
float vAmount = heightData.r;
// fetch the color from the lookup table so it gets passed to the fragment shader
int index = int(heightData.r * 255.0);
vColor = vLut[index];
// move the position along the normal
vec3 newPosition = position + normal * vScale * vAmount;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
</script>
The challenge lies in incorrect lighting and shading, suggesting that adjustments are needed. It is suspected that altering the vertex positions in the shader necessitates updating the vertex normals, among other potential solutions. Despite attempts to rectify the issue with various "*needsUpdating=true" methods, a conclusive solution remains elusive. Extensive exploration of three.js documentation and online resources has yet to yield a definitive resolution.
Any guidance or insights on resolving this issue would be greatly appreciated.