GLSL webgl lerp normali da offset uv

Question

Ho una mappa di spostamento su un piano 512px * 512px (100x100 segmenti), poiché l'immagine per la mappa di spostamento scorre a sinistra i vertici si agganciano alla posizione di altezza non si fondono uniformemente, ho cercato con la funzione mix() e smooth-step() per trasformare le normali nelle loro posizioni nel tempo, ma ho difficoltà a implementarle.

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


    } 

Utilizzando Three.js 71 con vertex e pixel:

scopo Illustrazione:

Qualsiasi aiuto apprezzato ...

Answer 1

Dal momento che la vostra utilizzando una texture come una mappa di altezza, dovresti assicurarti che:

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

in modo che i valori che si ricevono siano smussati da texel a texel.