为 glsl validator / webgl / three.js 声明外部全局变量

Question

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

当使用 ShaderMaterial 时，三个像 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查看自动添加了哪些 uniform 和属性，以便您可以根据需要在着色器代码中自行添加它们。

为 glsl validator / webgl / three.js 声明外部全局变量

Declare external global variables for glsl validator / webgl / three.js

static-analysis

glsl

webgl

three.js

glsles

顶点着色器顶部：