Experimenting with GLSL

I've been doing some minor experimentation with writing shaders in GLSL instead of doing software rendering like I usually do.

The above effect is generated by the following fragment shader:

precision mediump float;

uniform float u_time;

uniform vec2 u_resolution;

vec3 palette(float t) {
  vec3 a = vec3(0.5, 0.5, 0.5);
  vec3 b = vec3(0.5, 0.5, 0.5);
  vec3 c = vec3(1.0, 1.0, 1.0);
  vec3 d = vec3(0.263, 0.516, 0.557);

  return a + b * cos(6.28318 * (c * t + d));
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord * 2.0 - u_resolution.xy) / u_resolution.y;
  vec2 uv0 = uv;

  vec3 finalColor = vec3(0.0);

  for (float i = 0.0; i < 6.2; i++) {
    uv = fract(uv * 1.42) - 0.5;

    float d = length(uv) * exp(-length(uv0));

    vec3 col = palette(length(uv0) + i * .4 + u_time * .2);

    d = sin(d * 8. + u_time) / 8.;
    d = abs(d);

    d = 0.005 / d;

    finalColor += col * d;
  }

  fragColor = vec4(finalColor, 1.0);
}

void main() {
  mainImage(gl_FragColor, gl_FragCoord.xy);
}

Note: The uniforms are provided by a .wasm compiled from code written in Zig

Adding mouse position input is as easy as providing a uniform vec2 for this purpose.

Peter Hellberg

My name is Peter Hellberg and I’m a Systems Developer in Stockholm, Sweden.