12.1 - WebGL Shader Language

WebGL require a shader program for the vertex and fragment manipulation sections of the graphics pipeline. A shader program are written in GLSL (Graphics Library Shader Language). This section provides a general introduction to GLSL.

The GLSL language has gone through many versions. You can see a list of the versions on the GLSL wikipedia page. WebGL 1.0 only supports GLSL 1.0.17. (Remember that WebGL is based on OpenGL ES 2.0, which was designed for computing devices with low power and limited processing.) If you are searching the web for GLSL information and examples, it will be common to find GLSL programs that will not work in WebGL programs because of version issues. You must pay attention to GLSL versions.

Please don’t confuse the WebGL JavaScript API that allows access to the GPU’s graphics pipeline with shader programs written in GLSL. They are both related to the generation of 3D graphics in a browser, but they are very different in purpose and syntax.

Overview of GLSL 1.0.17

The GLSL 1.0 specification is 113 pages. To be an expert in the GLSL language you should study the entire specification. However, the following lessons should provide most of what you need to know about GLSL. The lessons cover:


Graphics Library Shader Language
shader program
a set of instructions written in GLSL that executes on a GPU


WebGL 1.0 API Quick Reference Card - https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

A GLSL online manual (of sorts): http://www.shaderific.com/glsl/

Next Section - 12.2 - GLSL Data Types and Variables