Javascript Three.js GLSL着色器无法'；不编译

我收到一个编译错误：

THREE.WebGLShader:Shader无法编译。

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

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

. . .

material=new THREE.ShaderMaterial({
制服：制服，
vertexShader:document.getElementById（'vertexShader_new'）.textContent，
fragmentShader:document.getElementById（'fragmentShader_new'）.textContent
});

在演示中，我已将id改回

vertexShader

和

fragmentShader

，以显示代码的其余部分正在使用更简单的着色器

着色器有什么问题？

---

链接着色器：

代码中有两个问题：

• 必须使用

  RawShaderMaterial

  而不是

  ShaderMaterial

  。否则，定义

  位置

  或

  正常

  等属性是错误的，因为它们是内置属性和制服集的一部分，请参阅
• 您必须在着色器定义中定义所有制服，而不仅仅是其中的两个。否则，制服具有未定义的值，从而产生错误的输出。因此，正确的定义看起来是这样的（请注意，不再需要定义

  类型

  属性）

工作演示：

three.js R105

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