为什么我的 WebGL 着色器不允许我使用变量？

Question

当我尝试 link 我的顶点和片段着色器进入程序时，WebGL 抛出 Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: textureCoordinates

我的顶点着色器和片段着色器中都有 varying vec2 test，但看不出编译器无法在两者中找到相同 varying 的任何原因。

顶点着色器：

varying vec2 test;
void main(void) {
   gl_Position = vec4(0.0, 0.0, 0.0, 0.0);
   test = vec2(1.0, 0.0);
}

片段着色器：

precision highp float;
varying vec2 test;
void main(void) {
    gl_FragColor = vec4(test.xy, 0.0, 1.0);
}

测试代码：

const canvas = document.createElement('canvas');
gl = canvas.getContext('webgl')
let vert = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vert, "varying vec2 test;\nvoid main(void) {\n   gl_Position = vec4(0.0, 0.0, 0.0, 0.0);\n   test = vec2(1.0, 0.0);\n}");
gl.compileShader(vert);

let frag = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(frag, "precision highp float;\nvarying vec2 test;\nvoid main() {\n\tgl_FragColor = vec4(test.xy, 0.0, 1.0);\n}");
gl.compileShader(frag);

let program = gl.createProgram();
gl.attachShader(program, vert);
gl.attachShader(program, frag);

gl.linkProgram(program);
gl.useProgram(program);

Answer 1

只是一个猜测，但我想知道这是否是因为您没有在片段着色器中使用纹理坐标。名称和类型匹配得很好，所以我认为这不是问题所在。我在这里做了同样的事情：

片段：

// The fragment shader is the rasterization process of webgl

// use float precision for this shader
precision mediump float;

// the input texture coordinate values from the vertex shader
varying vec2 vTextureCoord;
// the texture data, this is bound via gl.bindTexture()
uniform sampler2D texture;
// the colour uniform
uniform vec3 color;

void main(void) {
  // gl_FragColor is the output colour for a particular pixel.
  // use the texture data, specifying the texture coordinate, and modify it by the colour value.
  gl_FragColor = texture2D(texture, vec2(vTextureCoord.s, vTextureCoord.t)) * vec4(color, 1.0);
}

垂直：

// setup passable attributes for the vertex position & texture coordinates
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

// setup a uniform for our perspective * lookat * model view matrix
uniform mat4 uMatrix;
// setup an output variable for our texture coordinates
varying vec2 vTextureCoord;
void main() {
  // take our final matrix to modify the vertex position to display the data on screen in a perspective way
  // With shader code here, you can modify the look of an image in all sorts of ways
  // the 4th value here is the w coordinate, and it is called Homogeneous coordinates, (x,y,z,w).
  // It effectively allows the perspective math to work. With 3d graphics, it should be set to 1. Less than 1 will appear too big
  // Greater than 1 will appear too small
  gl_Position = uMatrix * vec4(aVertexPosition, 1);
  vTextureCoord = aTextureCoord;
}

Answer 2

问题已通过将 OSX 的 Chrome 从 v51.something 更新为 52.0.2743.82（64 位）奇怪得到解决。

为什么我的 WebGL 着色器不允许我使用变量？

Why does my WebGL shader not let me using varyings?

glsl

webgl

shader

fragment-shader

vertex-shader