为 glsl 验证器/webgl/three.js 声明外部全局变量

Question

我正在使用 three.js 构建一个项目并在外部导入 glsl 文件（使用 glsl-ify-loader）以在 Three ShaderMaterial 中使用。

当使用ShaderMaterial 时，Three 在连接着色器时会将projectionMatrix、modelViewMatrix 等全局变量添加到我的着色器代码预编译中。所以当我编写我的着色器时，我所需要的只是（作为一个简单的例子）：

varying vec3 vNormal;

void main () {
  vNormal = normal;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

...或类似的。

我的问题是我在我的着色器文件上使用了 glsl 验证器，它随后认为预先声明的三个变量未声明。

在 JS 中，你可以使用 eslint 输入 /* global aGlobalVariableHere */ 来安抚 lint 之神。

有没有用 glsl 验证器来做这件事？我找不到任何可以建议我如何去做的资源。

Answer 1

您可以使用THREE.RawShaderMaterial (see docs)，而不是ShaderMaterial。它们是相同的，除了Raw 根本没有为您的着色器添加任何制服或属性，您必须手动完成。那么你的 linter 将不再表现出惊讶：

顶点着色器顶部：

precision highp float;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 cameraPosition;
// ...

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// ...

您可以read this page查看自动添加的制服和属性，以便您可以根据需要在着色器代码中自行添加。