The fragment shader is very simple. The first three lines define the precision of the shader. This is mandatory according to the ESSL specification. Similarly, for the vertex shader, we define our input; in this case, just one varying variable, and then we have the main function:
#version 300 es
// Fragment shaders don't have a default precision so we need
// to pick one. mediump is a good default. It means "medium precision"
precision mediump float;
in vec4 vVertexColor;
// we need to declare an output for the fragment shader
out vec4 fragColor;
void main() {
fragColor = vVertexColor;
}
We just need to assign the vVertexColor varying to the fragColor output variable.
No More gl_FragColor
In WebGL 1, your fragment shader would set the gl_FragColor special variable to compute the output of the shader: gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);.
In WebGL 2, ESSL 300 forces you to declare your own output variable and then set it. You can pick any name you want, but names cannot begin with gl_.
In WebGL 1, your fragment shader would set the gl_FragColor special variable to compute the output of the shader: gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);.
In WebGL 2, ESSL 300 forces you to declare your own output variable and then set it. You can pick any name you want, but names cannot begin with gl_.
Remember that the value of the vVertexColor varying will be different from the one calculated in the vertex shader since WebGL will interpolate it by taking the corresponding calculated colors for the vertices surrounding the correspondent fragment (pixel).