Question

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

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

varying vec3 vNormal;

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

...或类似内容。

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

在JS中，您可以放下/* global aGlobalVariableHere */来安抚皮棉神。

是否有使用glsl验证程序执行此操作？我找不到任何资源建议我该怎么做。

Answer 1

您可以使用THREE.RawShaderMaterial (see docs)代替ShaderMaterial。它们是相同的，除了Raw根本不为着色器添加任何制服或属性，您必须手动进行。然后，您的棉绒将不再表现出惊讶：

顶点着色器顶部：

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来查看会自动添加哪些制服和属性，以便可以在着色器代码中根据需要自己添加它们。

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

1 个答案:

顶点着色器顶部：