如何将噪声着色器放入我的平面几何体中

Question

以下链接是我的笔：

https://codepen.io/johnhckuo/pen/RxrXxX

这是片段着色器中的代码：

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);

    vec3 worldtoEye = eye - worldPosition;
    vec3 eyeDirection = normalize(worldtoEye);
    vec3 pos = vec3(st.x*5.0, st.y*5.0, u_time*0.5);
    color = vec3(fbm(pos) + 1.0);
    //color = vec3(noise(pos)*0.5 + 1.0);

    vec3 sunLight = vec3(1., 1., 1.);
    color *= (diffuseLight(sunLight) + specularLight(eyeDirection));

    vec3 oceanBlue = vec3(0.109, 0.419, 0.627);
    gl_FragColor = vec4(oceanBlue * color, 1.0);

}

这是平面几何的代码：

  var plane_geometry = new THREE.PlaneBufferGeometry( 2000, 2000, 32 );
  var customMaterial = new THREE.ShaderMaterial( 
    {
      uniforms: uniforms,
      vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent

    }   
  );
  customMaterial.side = THREE.DoubleSide;
  var surface = new THREE.Mesh( plane_geometry, customMaterial );
  surface.position.set(0,0,0);
  scene.add( surface ); 

我创建了一个着色器并试图将它应用到我的飞机上。

但是每当我放大/缩小时，着色器就会被固定到屏幕而不会相应地放大/缩小。

任何建议表示赞赏！

Answer 1

改变这一行：

vec2 st = gl_FragCoord.xy/u_resolution.xy;

至

vec2 st = uVu.xy* 2.0;

并摆弄2.0（决议）

在ShaderFrog上测试vert + frag着色器也很容易，如：https://shaderfrog.com/app/view/1997