javascript - Three.js GLSL 着色器无法编译

Question

我收到编译错误:THREE.WebGLShader:着色器无法编译。

我尝试插入一些从shaderfrog.com获取的着色器，但它们似乎无法编译。

我使用了一个示例文件，并将新的顶点着色器和片段着色器添加到了 dom 中。

<script id="vertexShader_new" type="x-shader/x-vertex">
  . . .
</script>

material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader_new').textContent,
    fragmentShader: document.getElementById('fragmentShader_new').textContent
});

我在演示中将 id 改回了 vertexShader 和 fragmentShader，以表明代码的其余部分正在使用更简单的着色器。

着色器出了什么问题？ 与着色器的链接:Molten Noise shader

Answer 1

您的代码中有两个问题:

• 您必须使用 RawShaderMaterial 而不是 ShaderMaterial。否则，定义 position 或 normal 等属性是错误的，因为它们是内置属性和制服集的一部分，请参阅 docs .

• 您必须在着色器定义中定义所有制服，而不仅仅是其中两个。否则，制服具有未定义的值，这会产生错误的输出。因此，正确的制服定义如下所示(请注意，不再需要定义 type 属性)。

  uniforms = {
      color1: { value: new THREE.Color( 0xff0000 ) },
      color2: { value: new THREE.Color( 0x00ff00 ) },
      color3: { value: new THREE.Color( 0x0000ff ) },
      iterations: { value: 1 },
      permutations: { value: 10 },
      brightness: { value: 1 },
      time: { value: 1 },
      speed: { value: 0.02 },
      uvScale: { value: new THREE.Vector2(1, 1) }
  };
  

工作演示:https://jsfiddle.net/qb6u8vjp/5/

三.js R105