来自 uv 偏移的 GLSL webgl lerp 法线

Posted 2023-02-27

【中文标题】来自 uv 偏移的 GLSL webgl lerp 法线

【英文标题】：GLSL webgl lerp normals from uv offset

【发布时间】：2015-06-27 06:20:06

【问题描述】：

我在平面 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 与顶点和像素一起使用：

说明目的：

任何帮助表示赞赏...

【问题讨论】：

我仍在研究这个，运气不太好，目前我正在考虑使用其他完整的方法，但理想情况下希望继续使用这种方法。

请改写/详细说明您的问题，我不知道您所说的“置换贴图向左滚动，顶点对齐到高度位置”是什么意思。

@Brendan 更新了图片以获得视觉效果..

你能设置一个jsfiddle来玩吗？您可以包含here

中概述的置换贴图

不是很清楚的问题。但是：你的纹理是最近采样的吗？混合后法线也需要重新归一化 - 但听起来你担心偏移 - 我在你的着色器中看不到任何法线？

【参考方案1】：

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

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

这样您收到的值就会平滑到纹理像素。