Three.js GLSL着色器无法编译

Question

我遇到了编译错误：THREE.WebGLShader: Shader couldn't compile.

我试图插入一些从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/

three.js R105