javascript - ThreeJS/WebGL : Pass function into shader

Question

我在着色器外部编写了一个噪声函数，它接收 3D 坐标 (x,y,z) 并在 [0, 1] 中输出一些噪声值。我希望这个函数在我的顶点着色器中可用，以便我可以使用该函数对顶点位置进行动画处理。这是可能的，还是我需要在顶点着色器本身内部编写我的函数。

谢谢

Answer 1

您需要在顶点着色器本身内部提供函数，但是，顶点着色器只是字符串，因此如果您想在多个着色器中使用相同的函数，请执行某种字符串替换或搜索和替换或模板等。

示例:

const noiseSnippet = `
   vec3 noise(float v) {
      ...
   }
`;

const someVertexShaderSource = `
   ${noiseSnippet}

   varying vec2 vUv;

   void main() {
       vUv = uv;
       vec3 p = position + noise(position.x);
       vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
       gl_Position = projectionMatrix * mvPosition;
   }
`;

工作示例:

// from: https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
const noiseSnippet = `
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}
`;

const vs = `
  ${noiseSnippet}

  uniform float time;

  void main() {
    float n = noise(vec3(position) + time) * 2. - 1.;
    vec3 p = position + vec3(0, n * .1, 0);
    vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
    gl_Position = projectionMatrix * mvPosition;
  }
`;
const fs = `
  precision mediump float; 
  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
`;

const camera = new THREE.PerspectiveCamera(40, 1, 1, 3000);
camera.position.z = 4;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const uniforms = {
  time: { value: 0, },
};
const material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vs,
  fragmentShader: fs,
  wireframe: true,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);


function resizeCanvasToMatchDisplaySize(canvas) {
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

function render(time) {
  time *= 0.001;  // convert to seconds
  uniforms.time.value = time * 4.;
  
  resizeCanvasToMatchDisplaySize(renderer.domElement);
  
  mesh.rotation.y = time;
  
  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>