GLSL webgl lerp normals from uv offset

Question

I have a displacement map on a plane 512px* 512px (100x100 segments) , as the image for the displacement map scrolls left the vertices snap to position of height not blend smoothly, I have been looking at the mix() function and smooth-step() to morph the normals to their positions over time but i having a hard time implementing it.

    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 );


   }

Using Three.js 71 with vertex and pixel:

Illustration purpose:

uv offset Any help appreciated ...

Im still looking into this with not much luck, at the moment i am looking at using other complete methods but ideally want to stay with this approach. — Careen
Please reword/elaborate on your question, I have no idea what you mean by "the displacement map scrolls left the vertices snap to position of height". — Brendan Annable
Can you set up a jsfiddle to play with? You can include the displacement map as outlined here — 2pha
Not very clear question. But: Is your texture sampled nearest maybe? Also normals need to be re-normalized after blending - but it sounds you worry about offsets - I don't see any normals in your shader? — starmole

Frederic Gaudet Frederic Gaudet · Accepted Answer · 2015-08-14T14:54:48

Since you're using a texture as a height map, you should make sure that:

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

so that the values you receive are smoothed texel to texel.

GLSL webgl lerp normals from uv offset

1 Answers