Using Custom GLSL Shaders in p5.js for Real‑Time Effects

Problem: Wanting More Than Built‑In Shapes

When a sketch needs a visual effect that p5.js drawing primitives cannot easily produce—such as a per‑pixel color inversion, a ripple, or a procedural texture—you must step beyond the 2D canvas and tap into the GPU directly.

Thesis: p5.js Shader Integration

p5.js exposes the loadShader(), createShader(), and shader() functions so you can attach custom GLSL vertex and fragment shaders to any WebGL‑enabled sketch while still using the familiar p5.js API for setup, animation, and interaction.

Setting Up the WebGL Context

Shaders only work with the WebGL renderer. Enable it by passing WEBGL to createCanvas and optionally check support with detectWebGL().

let myShader;
function preload() {
  // Load vertex and fragment shader files from the sketch folder
  myShader = loadShader('vert.glsl', 'frag.glsl');
}
function setup() {
  createCanvas(400, 400, WEBGL);
  if (!detectWebGL()) {
    console.warn('WebGL not supported on this device');
  }
}
function draw() {
  background(0);
  // Apply the shader to everything drawn after this call
  shader(myShader);
  // Draw a full‑size rectangle so the shader runs over the whole canvas
  rect(0, 0, width, height);
}

Worked Example: Color‑Invert Fragment Shader

The vertex shader simply passes through the position; the fragment shader samples the current framebuffer (provided automatically by p5.js as uSampler) and outputs the inverted color.

Vertex shader (vert.glsl):

attribute vec3 aPosition;
void main() {
  gl_Position = vec4(aPosition, 1.0);
}

Fragment shader (frag.glsl):

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 uResolution;
void main() {
  vec2 uv = gl_FragCoord.xy / uResolution;
  vec3 color = texture2D(uSampler, uv).rgb;
  gl_FragColor = vec4(1.0 - color, 1.0);
}

Because p5.js binds the active texture to uSampler when shader() is called, no extra uniform setup is required for this simple effect.

Trade‑offs and Limitations

• WebGL is required; sketches will not fall back to the 2D renderer.
• GLSL must follow the WebGL 1.0 specification (no newer GLSL features).
• Complex shaders can reduce frame rates on mobile or low‑end GPUs.
• Shader files must be served from the same origin or a CORS‑enabled server.

Actionable Closing

1. Add the WEBGL flag to createCanvas.
2. Place your .vert and .frag files in the sketch directory.
3. Load them in preload with loadShader.
4. Call shader(yourShader) before drawing the geometry you want to affect.
5. Verify WebGL support with detectWebGL() and test performance on target devices.