Implementieren eines 32-Bit-Vertex-Shaders für Höhenkarten in threejs

Ich versuche, das gefundene Heightmap-Shader-Beispiel erneut zu verwenden.Hie in eine, die mit 32-Bit-Genauigkeit statt mit 8 arbeitet. Der Code für die laufende Arbeit befindet sich auf github:https: //github.com/bgourlie/three_heightma

Die Höhenkarte wird in .NET generiert. Die Höhen liegen zwischen 0f und 200f und werden in einen 32-Bit-Farbwert umgewandelt (Unity'sColor struct) mit der folgenden Methode:

private static Color DepthToColor(float height)
{
    var depthBytes = BitConverter.GetBytes(height);
    int enc = BitConverter.ToInt32(depthBytes, 0);
    return new Color((enc >> 24 & 255)/255f, (enc >> 16 & 255)/255f, (enc >> 8 & 255)/255f,
            (enc & 255)/255f);
}

Die Farbdaten werden als PNG codiert. Das Ergebnis sieht folgendermaßen aus:

Der Vertex-Shader nimmt diese Bilddaten auf und wandelt die RBGA-Werte auf den ursprünglichen Höhenwert zurück (unter Verwendung der in meiner Frage beantworteten TechnikHie):

uniform sampler2D bumpTexture; // defined in heightmap.js
varying float vAmount;
varying vec2 vUV;

void main()
{
  vUV = uv;
  vec4 bumpData = texture2D( bumpTexture, uv );
  vAmount = dot(bumpData, vec4(1.0, 255.0, 65025.0, 16581375.0));
  // Uncomment to see a "flatter" version
  //vAmount = dot(bumpData, vec4(1.0, 1.0/255.0, 1.0/65025.0, 1.0/160581375.0));

  // move the position along the normal
  vec3 newPosition = position + normal * vAmount;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}

Das Ergebnis ist definitiv durcheinander:

Ich kann es flacher machen, indem ich diese Zeile ändere:

vAmount = dot(bumpData, vec4(1.0, 1.0/255.0, 1.0/65025.0, 1.0/16581375.0));

Dies gibt mir ein viel flacheres Bild, das zumindest einen schönen Umriss des erzeugten Geländes zeigt, jedoch mit einer fast vollständig flachen Ebene (es gibt leichte, wenn auch nicht wahrnehmbare Abweichungen):

Ich nehme an, ich mache ein paar Dinge falsch, ich weiß nur nicht was. Ich bin nicht sicher, ob ich das ursprüngliche Float richtig codiere. Ich bin nicht sicher, ob ich es im Vertex-Shader richtig dekodiere (der Wert, den ich erhalte, liegt mit Sicherheit außerhalb des Bereichs von 0 ... 200). Ich bin auch nicht sehr erfahren in 3D-Grafik im Allgemeinen. Hinweise darauf, was ich falsch mache oder wie dies im Allgemeinen erreicht werden kann, sind daher sehr willkommen.

Again, der in sich geschlossene Work-in-Progress-Code ist hier zu finden:https: //github.com/bgourlie/three_heightma