I am experimenting with coloring the fragments in my shader based on their position between the highest and lowest vertex. Take a look at the shaders below:
<script type="x-shader/x-vertex" id="vertexshader">
uniform float span;
attribute float displacement;
varying vec3 vNormal;
varying float color_according_to_z;
float z_actual;
void main() {
vNormal = normal;
vec3 newPosition = position + normal * vec3(0.0, 0.0, displacement);
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
z_actual = gl_Position.z + span / 2.0;
color_according_to_z = 1.0 / span * z_actual;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform float span;
varying float color_according_to_z;
void main()
{
gl_FragColor = vec4(color_according_to_z, 0.5, 0.5, 1.0);
}
</script>
Below is the render function I am using:
function render() {
requestAnimationFrame(render);
plane.rotation.x = global_x_rotation;
plane.rotation.z = global_z_rotation;
for(var i = attributes.displacement.value.length - 1; i >= 0; i--) {
attributes.displacement.value[i] = attributes.displacement.value[i] - 0.5 + Math.random();
};
uniforms.lowest = attributes.displacement.value.min();
uniforms.highest = attributes.displacement.value.max();
uniforms.span = uniforms.highest - uniforms.lowest;
attributes.displacement.needsUpdate = true;
uniforms.lowest.needsUpdate = true;
uniforms.highest.needsUpdate = true;
uniforms.span.needsUpdate = true;
renderer.render(scene, camera);
}
I constantly adjust the displacement value and update the span between the highest and lowest vertices accordingly.
The challenge now lies in determining how to shade a fragment based on its proximity to the highest or lowest point, which I am still working on.