Real-Time 3D Graphics with WebGL 2 - Second Edition

No More gl_FragColor

While in GLSL 100 you'd ultimately render the color of the pixel by setting the gl_FragColor inside of the fragment shader, in GLSL 300 ES, you simply expose a value from your fragment shader. Consider, for example, the following in GLSL 100:

void main(void) {  gl_FragColor = vec4(1.0, 0.2, 0.3, 1.0);}

This would be updated by setting a defined custom output variable, as follows:

out vec4 fragColor; void main(void) {  fragColor = vec4(1.0, 0.2, 0.3, 1.0);}

It's important to note that even though we declared a variable called fragColor, you can choose any name not starting with the prefix gl_, due to ambiguity. Throughout this book, we have defined this custom variable as fragColor.