Why does my WebGL shader not let me using varyings?

Question

When I try to link my vertex and fragment shaders into a program, WebGL throws Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: textureCoordinates

I have varying vec2 test in both my vertex and fragment shaders, and can't see any reason why the compiler wouldn't be able to find the same varying in both.

Vertex Shader:

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

Fragment Shader:

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

Test code:

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);

What browser are you using? I'm not getting any errors with Chrome for Windows v51.0.2704.103m (64-bit). Here is the exact code I am executing. — Exide

agmcleod agmcleod · Accepted Answer · 2016-07-29T17:39:01

Just a guess, but I wonder if it's because you're not using the textureCoordinates in your fragment shader. The names & types match just fine, so i don't think that's the issue. I've done the same thing here:

Frag:

// 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);
}

Vert:

// 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;
}

Why does my WebGL shader not let me using varyings?

2 Answers