来自uv offset的GLSL webgl lerp法线

Question

我在一个512px*512px(100x100段)平面上有一个置换贴图,因为置换贴图的图像向左滚动顶点对齐高度位置不能平滑混合,我一直在看mix()函数和smooth-step ()随着时间的推移将法线变形到它们的位置,但我很难实现它.

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


   }

使用具有顶点和像素的Three.js 71:

插图目的:

任何帮助赞赏...

Answer 1

由于您使用纹理作为高度图，因此您应该确保：

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

以便您收到的值在纹素之间进行平滑处理。