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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将噪声着色器放入我的平面几何体中相关的知识,希望对你有一定的参考价值。

以下链接是我的笔:

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

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

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

任何建议表示赞赏!

答案

改变这一行:

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

以上是关于如何将噪声着色器放入我的平面几何体中的主要内容,如果未能解决你的问题,请参考以下文章

如何使用在质心处计算的光来实现平面着色?

如何在片段着色器中找到 4 个顶点之间的插值位置?

计算片段着色器内平面的法线

OpenGL几何着色器传递纹理坐标

柏林噪声的每顶点法线?

在片段着色器中,为啥我不能使用平面输入整数来索引 sampler2D 的统一数组?