GLSL webgl lerp Normalen aus UV-Offset

Question

Ich habe eine Verschiebung Karte auf einer Ebene 512px * 512px (100x100 Segmente), wie das Bild für die Verschiebung Karte scrollt nach links die Scheitelpunkte schnappen Position der Höhe nicht glatt mischen, habe ich gesucht an der mix() -Funktion und glätten-Schritt(), um die Normalen zu ihren Positionen im Laufe der Zeit zu verwandeln, aber ich habe eine harte Zeit, es zu implementieren.

uniform sampler2D heightText; //texture greyscale 512x512 
    uniform float displace;   
    uniform float time; 
    uniform float speed; 

    varying vec2 vUV; 
    varying float scaleDisplace; 

    void main() { 
     vUV = uv; 
     vec2 uvOffset = vUV + vec2(0.1, 0.1)* time; // animates offset 
     vec2 uvCo = vUV + vec2(0.0, 0.0); 
     vec2 texSize = vec2(-0.8, 0.8);  // scales image larger 

     vec4 data = texture2D(heightText, uvOffset + fract(uvCo)*texSize.x); 
     scaleDisplace = data.r; 

     //vec3 possy = normal * displace * scaleDisplace; 

     vec3 morphPossy = mix(position, normal *displace , scaleDisplace)* time ; 

     gl_Position = projectionMatrix * modelViewMatrix * vec4(morphPossy, 1.0); 


    } 

Mit Three.js 71 mit Vertex und Pixel:

Illustration Zweck:

Jede Hilfe willkommen ...

Answer 1

Da Ihr eine Textur als Höhenkarte unterhalten, Sie sollten sicherstellen, dass:

heightText.magFilter = THREE.LinearFilter; // This is the default value. 

, so dass die Werte, die Sie erhalten, Texel zu Texel geglättet werden.