Question

我试图在webGL中创建一个程序性的水坑，用水涟漪＆＃34;通过顶点位移。我遇到的问题是我得到一个我无法解释的噪音。

下面是第一个传递顶点着色器，我计算顶点位置，然后渲染到纹理，然后在第二遍中使用。

void main()         {           
            float damping = 0.5;
            vNormal = normal;

            // wave radius
            float timemod = 0.55;
            float ttime = mod(time , timemod);

            float frequency = 2.0*PI/waveWidth;
            float phase = frequency * 0.21;

            vec4 v = vec4(position,1.0);
            // Loop through array of start positions
            for(int i = 0; i < 200; i++){

                float cCenterX = ripplePos[i].x;
                float cCenterY = ripplePos[i].y;
                vec2 center = vec2(cCenterX, cCenterY) ;

                if(center.x == 0.0 && center.y == 0.0)
                    center = normalize(center);

                // wave width
                float tolerance = 0.005;

                radius = sqrt(pow( uv.x - center.x , 2.0) + pow( uv.y -center.y, 2.0));
                // Creating a ripple
                float w_height = (tolerance - (min(tolerance,pow(ripplePos[i].z-radius*10.0,2.0)) )) * (1.0-ripplePos[i].z/timemod) *5.82;

                // -2.07 in the end to keep plane at right height. Trial and error solution
                v.z += waveHeight*(1.0+w_height/tolerance) / 2.0 - 2.07;

                vNormal = normal+v.z;
            }
            vPosition = v.xyz;

            gl_Position = projectionMatrix * modelViewMatrix * v;
        }

写入纹理的第一个传递片段着色器：

        void main()
        {
            vec3 p = normalize(vPosition);

            p.x = (p.x+1.0)*0.5;
            p.y = (p.y+1.0)*0.5;


            gl_FragColor = vec4(  normalize(p), 1.0);
        }

第二个顶点着色器是标准直通。

第二遍片段着色器是我尝试计算用于光计算的法线的地方。

void main() {

            float w = 1.0 / 200.0;
            float h = 1.0 / 200.0;

            // Nearest Nieghbours 
            vec3 p0 = texture2D(rttTexture, vUV).xyz;
            vec3 p1 = texture2D(rttTexture, vUV + vec2(-w,  0)).xyz;
            vec3 p2 = texture2D(rttTexture, vUV + vec2( w,  0)).xyz;
            vec3 p3 = texture2D(rttTexture, vUV + vec2( 0,  h)).xyz;
            vec3 p4 = texture2D(rttTexture, vUV + vec2( 0, -h)).xyz;

            vec3 nVec1 = p2 - p0;
            vec3 nVec2 = p3 - p0;

            vec3 vNormal = cross(nVec1, nVec2);

            vec3 N = normalize(vNormal);

             float theZ =  texture2D(rttTexture, vUV).r;
            //gl_FragColor = vec4(1.,.0,1.,1.);
          //gl_FragColor = texture2D(tDiffuse, vUV);
            gl_FragColor = vec4(vec3(N), 1.0);
        }

结果如下：

enter image description here

图像显示法线贴图，我所指的噪声是蓝色的不一致。

这是现场演示： http://oskarhavsvik.se/jonasgerling_water_ripple/waterRTT-clean.html

我感谢任何提示和指示，不仅解决了这个问题。但是这个代码在genereal中，我在这里学习。

Answer 1

经过简单的介绍，您的问题似乎是存储x / y位置。

gl_FragColor = vec4(vec3(p0*0.5+0.5), 1.0);

enter image description here

无论如何都不需要存储它们，因为纹素位置隐含地给出了x / y值。只需将你的正常点改为这样的......

vec3 p2 = vec3(1, 0, texture2D(rttTexture, vUV + vec2(w, 0)).z);

而不是1, 0，您将需要使用适合于显示的四边形相对于波高的尺寸的比例。无论如何，结果现在看起来像这样。

enter image description here

高度/ z似乎是按距离中心的距离缩放的，所以我去寻找normalize()并将其删除......

            vec3 p = vPosition;
            gl_FragColor = vec4(p*0.5+0.5, 1.0);

法线现在看起来像这样......

enter image description here

WebGL从位置纹理计算正常值

1 个答案: