Three.js GLSL 着色器无法编译答案

【问题标题】：Three.js GLSL shader couldn't compileThree.js GLSL 着色器无法编译
【发布时间】：2019-06-10 23:31:28
【问题描述】：

我收到一个编译错误：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

【问题讨论】：

标签： javascript three.js glsl

【解决方案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

【讨论】：