A GskGLShader is a snippet of GLSL that is meant to run in the fragment shader of the rendering pipeline.

A fragment shader gets the coordinates being rendered as input and produces the pixel values for that particular pixel. Additionally, the shader can declare a set of other input arguments, called uniforms (as they are uniform over all the calls to your shader in each instance of use). A shader can also receive up to 4 textures that it can use as input when producing the pixel data.

GskGLShader is usually used with gtk_snapshot_push_gl_shader() to produce a GskGLShaderNode in the rendering hierarchy, and then its input textures are constructed by rendering the child nodes to textures before rendering the shader node itself. (You can pass texture nodes as children if you want to directly use a texture as input).

The actual shader code is GLSL code that gets combined with some other code into the fragment shader. Since the exact capabilities of the GPU driver differs between different OpenGL drivers and hardware, GTK adds some defines that you can use to ensure your GLSL code runs on as many drivers as it can.

If the OpenGL driver is GLES, then the shader language version is set to 100, and GSK_GLES will be defined in the shader.

Otherwise, if the OpenGL driver does not support the 3.2 core profile, then the shader will run with language version 110 for GL2 and 130 for GL3, and GSK_LEGACY will be defined in the shader.

If the OpenGL driver supports the 3.2 code profile, it will be used, the shader language version is set to 150, and GSK_GL3 will be defined in the shader.

The main function the shader must implement is:

 void mainImage(out vec4 fragColor,
                in vec2 fragCoord,
                in vec2 resolution,
                in vec2 uv)

Where the input fragCoord is the coordinate of the pixel we’re currently rendering, relative to the boundary rectangle that was specified in the GskGLShaderNode, and resolution is the width and height of that rectangle. This is in the typical GTK coordinate system with the origin in the top left. uv contains the u and v coordinates that can be used to index a texture at the corresponding point. These coordinates are in the [0..1]x[0..1] region, with 0, 0 being in the lower left corder (which is typical for OpenGL).

The output fragColor should be a RGBA color (with premultiplied alpha) that will be used as the output for the specified pixel location. Note that this output will be automatically clipped to the clip region of the glshader node.

In addition to the function arguments the shader can define up to 4 uniforms for textures which must be called u_textureN (i.e. u_texture1 to u_texture4) as well as any custom uniforms you want of types int, uint, bool, float, vec2, vec3 or vec4.

All textures sources contain premultiplied alpha colors, but if some there are outer sources of colors there is a gsk_premultiply() helper to compute premultiplication when needed.

Note that GTK parses the uniform declarations, so each uniform has to be on a line by itself with no other code, like so:

uniform float u_time;
uniform vec3 u_color;
uniform sampler2D u_texture1;
uniform sampler2D u_texture2;

GTK uses the “gsk” namespace in the symbols it uses in the shader, so your code should not use any symbols with the prefix gsk or GSK. There are some helper functions declared that you can use:

vec4 GskTexture(sampler2D sampler, vec2 texCoords);

This samples a texture (e.g. u_texture1) at the specified coordinates, and contains some helper ifdefs to ensure that it works on all OpenGL versions.

You can compile the shader yourself using gsk_gl_shader_compile(), otherwise the GSK renderer will do it when it handling the glshader node. If errors occurs, the returned error will include the glsl sources, so you can see what GSK was passing to the compiler. You can also set GSK_DEBUG=shaders in the environment to see the sources and other relevant information about all shaders that GSK is handling.

An example shader

uniform float position;
uniform sampler2D u_texture1;
uniform sampler2D u_texture2;

void mainImage(out vec4 fragColor,
               in vec2 fragCoord,
               in vec2 resolution,
               in vec2 uv) {
  vec4 source1 = GskTexture(u_texture1, uv);
  vec4 source2 = GskTexture(u_texture2, uv);

  fragColor = position * source1 + (1.0 - position) * source2;
}