来自uv偏移量的three.js – GLSL webgl lerp法线

我在平面512px * 512px(100×100段)的平面上有一个位移图,因为位移图的图像向左滚动顶点到高度位置并不平滑,我一直在看混合()函数和平滑步()将时间变换为他们的位置,但我很难实施它.

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：

插图目的：

任何帮助赞赏…

解决方法

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

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

以便您收到的值平滑到纹素.