WebGL fragment shader won't compile

Question

I am attempting to compile a WebGL fragment shader. I believe the error is in the shader's string, but I am unsure what is wrong and why it doesn't compile.

vertex shader:

const vShader = `
        attribute vec4 vPosition;
        attribute vec4 vColor;

        void main(void){
            gl_Position = vPosition;
            gl_PointSize = 1.0;
        }
    `;

fragment shader:

    const fShader = `
        attribute vec4 vColor;
        precision lowp float;

        void main(){
            gl_FragColor = vColor;
        }
    `;

code to compile

function setShaders(gl, vsSource, fsSource) {
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
  
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
  
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
      return null;
    }
    return program;
}

function loadShader(gl, type, source) {

    const shader = gl.createShader(type);
    
    gl.shaderSource(shader, source);  
    gl.compileShader(shader);
  
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      alert('An error occurred compiling the shaders: ');
      gl.deleteShader(shader);
      return null;
    }

    return shader;
}

The vertex shader compiles but the fragment does not. Am I missing something obvious?

user_5577765 · Answer

attribute is the keyword for vertex shader input variables. The keyword for interface variables between the vertex shader and the fragment shader is varying:

attribute vec4 vPosition;
varying vec4 vColor;

void main() {
    gl_Position = vPosition;
    gl_PointSize = 1.0;
}

varying vec4 vColor;
precision lowp float;

void main() {
    gl_FragColor = vColor;
}

See alos OpenGL ES Shading Language 1.00 Specification - Varying

WebGL fragment shader won't compile

1 Answers