GLSL ES 1.0 and 3.0

The language we will be using to write our shaders is a subset of the GLSL shader language called GLSL ES. This shader language happens to work with WebGL and so is supported by the version of OpenGL ES that has been ported to WebAssembly. The code we are writing will run on both GLSL ES 1.0 and 3.0, which are the two versions of GLSL ES supported by WebAssembly.

If you are wondering why there is no support for GLSL ES 2.0, it's because it doesn't exist. OpenGL ES 1.0 used a fixed function pipeline and so it had no shader language associated with it. When the Khronos Group created OpenGL ES 2.0, they created GLSL ES 1.0 as the shader language to go with it. When they released OpenGL ES 3.0, they decided that they wanted the version number of the shader language to be the same number as the API. Therefore, all the new versions of OpenGL ES will come with a version of GLSL that bears the same version number.

GLSL is a language that is very similar to C. Each shader has a main function that is its entry point. GLSL ES 2.0 only supports two shader types: vertex shaders and fragment shaders. The execution of these shaders is highly parallel. If you are used to thinking along single—threaded lines, you will need to reorder your brain. Shaders are frequently processing thousands of vertices and pixels at the same time.

I briefly discussed the definition of a vertex and a fragment in Chapter 3, Introduction to WebGL. A vertex is a point in space, and a collection of vertices define the geometry that our graphics card uses to render to the screen. A fragment is a pixel candidate. Multiple fragments usually go into determining the pixel output.

Each vertex of the geometry that's passed to a vertex shader is processed by that shader. Values are then passed using a varying variable to a large number of threads that are processing individual pixels through a fragment shader. The fragment shader receives a value that is interpolated between the output of more than one of the vertex shaders. A fragment shader's output is a fragment, which is a pixel candidate. Not all fragments become pixels. Some fragments are dropped, which means they won't render at all. Other fragments are blended to form a completely different pixel color. We created one vertex and one fragment shader in Chapter 3, Introduction to WebGL, for our WebGL application. Let's walk through converting that application into an OpenGL/WebAssembly app. Once we have a working application, we can further discuss shaders and new ways we can write those shaders to improve our 2D WebAssembly game.