Fragment Shaders

This is a little showcase I made to show some fragment shaders I wrote; most of them solutions for exercises for the excellent Book of Shaders.
The shaders are rendered using WebGL and Javascript; I also use the glmatrix library for linear algebra.
The code is editable live and the preview will be updated once the compile button below is activated, or if auto-recompile is enabled, whenever the code is edited. Reset resets to the last successfully compiled code. Save saves the fragment shader as a GLSL file on the harddrive.
A view below the preview shows uniforms and their values: u_time: float is the time since page load. u_mouse: vec2 is the mouse position on the canvas. u_resolution: vec2 is the canvas resolution.

  • Canvas width (u_resolution.x):
  • Canvas height (u_resolution.y):
  • Mouse X (u_mouse.x):
  • Mouse Y (u_mouse.y):
  • Time (u_time):