WebGL fragment shader won't compile - graphics

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?

Answer 1

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