Shader canvas

Add it

Declare it in prototir.json at the root of your ZIP. Prototir checks the version at upload and adds it to the page's import map.

{
  "modules": [
    "prefab-shader-canvas@0.1.1"
  ]
}

Then import it by name, from 'prefab-shader-canvas', as you would from npm.

Smallest example

import { createShaderCanvas } from 'prefab-shader-canvas';

createShaderCanvas({
  fragment: `
    precision mediump float;
    varying vec2 v_uv;
    uniform float u_time;
    void main() {
      gl_FragColor = vec4(v_uv, 0.5 + 0.5 * sin(u_time), 1.0);
    }`
});

API

createShaderCanvas({ fragment, canvas, onFrame })

fragment

GLSL fragment shader. Uniforms: float u_time (seconds), vec2 u_resolution (px), vec2 u_mouse (px, top-left origin); varying vec2 v_uv in 0..1. Compile errors are thrown with the GLSL log.

canvas

Your own canvas; otherwise a full-window one is added to the page.

onFrame(time)

Called after each frame is drawn.

returns { canvas, destroy() }

destroy() stops the loop and frees the GL program and buffers.

Good to know

• Throws when WebGL is unavailable, so a fallback can be shown.

Versions

Every version stays available, so a prototype keeps working exactly as published. Declare the one you tested with.

• prefab-shader-canvas@0.1.1
• prefab-shader-canvas@0.1.0