New Way to Live-Code GLSL Shaders in GeeXLab 0.16+

GeeXLab 0.16.x comes with a new way to live-code GLSL shaders: they can be live-coded from a file using any text editor. Live-coding of GLSL shaders is available since the dark ages of GeeXLab but only via built-in tools. These tools do their job but are far from being as programmer friendly as a good text editor. So the new way to live code GLSL shaders is simple: edit a GLSL shader in a separate file (like toon-shader-frag.glsl) in your favorite text editor and tell GeeXLab to reload this shader as soon as changes are detected. That’s all.

This new technique is nice because it’s simple and above all, this technique is cross-platform. So live coding GLSL shaders is now available on Windows, Linux, macOS and Raspberry Pi! This simple technique is already in use for lice-coding script files.

Here is a selection of some free text editors HERE. Some are limited to Windows (Notepad++), other are cross-platform (Geany, CudaText, Atom).

To live-code a shader from a file, you have to specify a new XML attribute in the gpu_program XML node: livecodeng_from_file_{shader_type} where shader_type can be vs (vertex shader), ps (pixel shader), gs (geometry shader), tcs (tess control shader), tes (tess eval shader) or cs (compute shader).

In the following code snippet, the GPU program has a vertex shader and a pixel shader. The vertex shader is embedded in the XML node using the raw_data_vs element while the pixel shader is stored in a separate file (live-coding-03_ps.glsl). The attribute livecoding_from_file_ps="1" instructs GeeXLab to reload the shader as soon as a change is detected in the pixel shader file. I also added a new attribute, livecoding_from_file_update_delay that specifies the interval in seconds between two file checks. Then an interval of 0.25 second means 4 file checks per second. This check interval is the same for all shaders of a GPU program.

The pixel shader file live-coding-03_ps.glsl:

#version 120
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main(void)
{
  vec2 uv = 2.0 * (gl_FragCoord.xy / resolution.xy) - 1.0;
  float col=0.0;
  float i=1.0;
  vec2 spec = vec2(0.1, 0.6);
  uv.x += sin(i*20.0 + spec.x*5.0*time*6.0 + uv.y*1.5) * spec.y;
  col += abs(0.044/uv.x) * spec.y;
  gl_FragColor = vec4(col, col, col, 1.0);
}

Remark: There is no restriction about the extension of the shader file: just use the extension you want (*.glsl, *.frag, *.vert, *.myshaderext, etc.). GeeXLab does not check the shader file extension.

A demo of live-coding using this new technique is available in the code sample pack: gl-21/live-coding/live-coding-03.xml. Load live-coding-03.xml in GeeXLab, open the pixel shader live-coding-03_ps.glsl in a text editor and you’re ready to live-hack the pixel shader!