react-shadertoy 0.2.0 → 0.5.0

package/dist/index.js

@@ -43,14 +43,16 @@ var QUAD_VERTICES = new Float32Array([
   1,
   1
 ]);
-var VERTEX_SHADER = `
-attribute vec2 position;
+var VERTEX_SHADER = `#version 300 es
+in vec2 position;
 void main() {
   gl_Position = vec4(position, 0.0, 1.0);
 }
 `;
-function wrapFragmentShader(shader) {
-  return `precision highp float;
+var FRAGMENT_PREAMBLE = `#version 300 es
+precision highp float;
+
+out vec4 _fragColor;
 
 uniform vec3  iResolution;
 uniform float iTime;
@@ -64,13 +66,16 @@ uniform sampler2D iChannel2;
 uniform sampler2D iChannel3;
 uniform vec3  iChannelResolution[4];
 
-// Shadertoy compatibility: texture() is GLSL 300 es, WebGL1 uses texture2D()
-#define texture texture2D
+// Shadertoy compat: older shaders may use texture2D()
+#define texture2D texture
 
-${shader}
+`;
+function wrapFragmentShader(shader) {
+  return FRAGMENT_PREAMBLE + shader + `
 
 void main() {
-  mainImage(gl_FragColor, gl_FragCoord.xy);
+  mainImage(_fragColor, gl_FragCoord.xy);
+  _fragColor.a = 1.0;
 }
 `;
 }
@@ -86,13 +91,7 @@ function compileShader(gl, type, source) {
   }
   return shader;
 }
-function createRenderer(canvas, fragmentShader) {
-  const gl = canvas.getContext("webgl", {
-    antialias: false,
-    alpha: true,
-    premultipliedAlpha: false
-  });
-  if (!gl) return "WebGL not supported";
+function createProgram(gl, fragmentShader) {
   const vert = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
   if (typeof vert === "string") return vert;
   const frag = compileShader(gl, gl.FRAGMENT_SHADER, wrapFragmentShader(fragmentShader));
@@ -109,13 +108,10 @@ function createRenderer(canvas, fragmentShader) {
   }
   gl.deleteShader(vert);
   gl.deleteShader(frag);
-  const buffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-  gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
-  const positionLoc = gl.getAttribLocation(program, "position");
-  gl.enableVertexAttribArray(positionLoc);
-  gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
-  const locations = {
+  return program;
+}
+function getUniformLocations(gl, program) {
+  return {
     iResolution: gl.getUniformLocation(program, "iResolution"),
     iTime: gl.getUniformLocation(program, "iTime"),
     iTimeDelta: gl.getUniformLocation(program, "iTimeDelta"),
@@ -130,6 +126,26 @@ function createRenderer(canvas, fragmentShader) {
     ],
     iChannelResolution: gl.getUniformLocation(program, "iChannelResolution")
   };
+}
+function setupQuad(gl, program) {
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+  const positionLoc = gl.getAttribLocation(program, "position");
+  gl.enableVertexAttribArray(positionLoc);
+  gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+}
+function createRenderer(canvas, fragmentShader) {
+  const gl = canvas.getContext("webgl2", {
+    antialias: false,
+    alpha: true,
+    premultipliedAlpha: false
+  });
+  if (!gl) return "WebGL2 not supported";
+  const program = createProgram(gl, fragmentShader);
+  if (typeof program === "string") return program;
+  setupQuad(gl, program);
+  const locations = getUniformLocations(gl, program);
   gl.useProgram(program);
   return {
     gl,
@@ -153,50 +169,191 @@ function dispose(state) {
 }
 
 // src/textures.ts
-function loadImageTexture(gl, url, unit) {
+function normalizeTextureInput(input) {
+  if (typeof input === "object" && input !== null && "src" in input) {
+    return input;
+  }
+  return { src: input };
+}
+function resolveOptions(opts) {
+  return {
+    src: opts.src,
+    wrap: opts.wrap ?? "clamp",
+    filter: opts.filter ?? "mipmap",
+    vflip: opts.vflip ?? true
+  };
+}
+function initTexture(gl, unit) {
   const texture = gl.createTexture();
   gl.activeTexture(gl.TEXTURE0 + unit);
   gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(
-    gl.TEXTURE_2D,
-    0,
-    gl.RGBA,
-    1,
-    1,
-    0,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
-    new Uint8Array([255, 0, 255, 255])
-  );
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  const state = { texture, width: 1, height: 1, unit, loaded: false };
-  const promise = new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      if (gl.isContextLost()) {
+  return texture;
+}
+function applyTextureParameters(gl, w, h, wrap, filter, vflip) {
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, vflip ? 1 : 0);
+  const wrapMode = wrap === "repeat" ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapMode);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapMode);
+  if (filter === "mipmap") {
+    gl.generateMipmap(gl.TEXTURE_2D);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  } else if (filter === "nearest") {
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  } else {
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  }
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
+}
+function uploadElement(gl, texture, unit, el) {
+  gl.activeTexture(gl.TEXTURE0 + unit);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, el);
+}
+function createTexture(gl, input, unit) {
+  const opts = resolveOptions(normalizeTextureInput(input));
+  const source = opts.src;
+  const texture = initTexture(gl, unit);
+  if (typeof source === "string") {
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([255, 0, 255, 255])
+    );
+    const state2 = {
+      texture,
+      width: 1,
+      height: 1,
+      unit,
+      loaded: false,
+      needsUpdate: false,
+      source
+    };
+    const promise = new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        if (gl.isContextLost()) {
+          resolve();
+          return;
+        }
+        uploadElement(gl, texture, unit, img);
+        applyTextureParameters(gl, img.width, img.height, opts.wrap, opts.filter, opts.vflip);
+        state2.width = img.width;
+        state2.height = img.height;
+        state2.loaded = true;
         resolve();
-        return;
-      }
-      gl.activeTexture(gl.TEXTURE0 + unit);
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-      if (isPOT(img.width) && isPOT(img.height)) {
-        gl.generateMipmap(gl.TEXTURE_2D);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
-      }
-      state.width = img.width;
-      state.height = img.height;
-      state.loaded = true;
-      resolve();
+      };
+      img.onerror = () => reject(new Error(`Failed to load texture: ${source}`));
+      img.src = source;
+    });
+    return { state: state2, promise };
+  }
+  if (source instanceof HTMLImageElement) {
+    const state2 = {
+      texture,
+      width: source.naturalWidth || 1,
+      height: source.naturalHeight || 1,
+      unit,
+      loaded: source.complete,
+      needsUpdate: false,
+      source
     };
-    img.onerror = () => reject(new Error(`Failed to load texture: ${url}`));
-    img.src = url;
-  });
-  return { state, promise };
+    if (source.complete && source.naturalWidth > 0) {
+      uploadElement(gl, texture, unit, source);
+      applyTextureParameters(gl, source.naturalWidth, source.naturalHeight, opts.wrap, opts.filter, opts.vflip);
+      state2.width = source.naturalWidth;
+      state2.height = source.naturalHeight;
+      return { state: state2, promise: null };
+    }
+    const promise = new Promise((resolve, reject) => {
+      source.onload = () => {
+        if (gl.isContextLost()) {
+          resolve();
+          return;
+        }
+        uploadElement(gl, texture, unit, source);
+        applyTextureParameters(gl, source.naturalWidth, source.naturalHeight, opts.wrap, opts.filter, opts.vflip);
+        state2.width = source.naturalWidth;
+        state2.height = source.naturalHeight;
+        state2.loaded = true;
+        resolve();
+      };
+      source.onerror = () => reject(new Error("Failed to load image element"));
+    });
+    return { state: state2, promise };
+  }
+  if (source instanceof HTMLVideoElement) {
+    const w = source.videoWidth || 1;
+    const h = source.videoHeight || 1;
+    if (source.readyState >= 2) {
+      uploadElement(gl, texture, unit, source);
+      applyTextureParameters(gl, w, h, opts.wrap, opts.filter === "mipmap" ? "linear" : opts.filter, opts.vflip);
+    } else {
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        1,
+        1,
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        new Uint8Array([0, 0, 0, 255])
+      );
+    }
+    const state2 = {
+      texture,
+      width: w,
+      height: h,
+      unit,
+      loaded: source.readyState >= 2,
+      needsUpdate: true,
+      source
+    };
+    return { state: state2, promise: null };
+  }
+  uploadElement(gl, texture, unit, source);
+  applyTextureParameters(gl, source.width, source.height, opts.wrap, opts.filter === "mipmap" ? "linear" : opts.filter, opts.vflip);
+  const state = {
+    texture,
+    width: source.width,
+    height: source.height,
+    unit,
+    loaded: true,
+    needsUpdate: true,
+    source
+  };
+  return { state, promise: null };
+}
+function updateDynamicTextures(gl, textures) {
+  for (const tex of textures) {
+    if (!tex || !tex.needsUpdate || !tex.source) continue;
+    if (tex.source instanceof HTMLVideoElement) {
+      const v = tex.source;
+      if (v.readyState < 2) continue;
+      uploadElement(gl, tex.texture, tex.unit, v);
+      tex.width = v.videoWidth;
+      tex.height = v.videoHeight;
+      tex.loaded = true;
+    } else if (tex.source instanceof HTMLCanvasElement) {
+      uploadElement(gl, tex.texture, tex.unit, tex.source);
+      tex.width = tex.source.width;
+      tex.height = tex.source.height;
+    }
+  }
 }
 function bindTextures(gl, locations, textures) {
   for (let i = 0; i < 4; i++) {
@@ -214,67 +371,212 @@ function disposeTextures(gl, textures) {
     if (tex) gl.deleteTexture(tex.texture);
   }
 }
-function isPOT(v) {
-  return (v & v - 1) === 0 && v > 0;
-}
 
 // src/uniforms.ts
-function updateUniforms(state, delta, speed, mouse) {
-  const { gl, locations } = state;
-  state.time += delta * speed;
-  if (locations.iTime) {
-    gl.uniform1f(locations.iTime, state.time);
+function setUniforms(gl, locations, time, delta, frame, width, height, mouse, channelRes) {
+  if (locations.iTime) gl.uniform1f(locations.iTime, time);
+  if (locations.iTimeDelta) gl.uniform1f(locations.iTimeDelta, delta);
+  if (locations.iFrame) gl.uniform1i(locations.iFrame, frame);
+  if (locations.iResolution) gl.uniform3f(locations.iResolution, width, height, 1);
+  if (locations.iMouse) {
+    const mz = mouse.pressed ? mouse.clickX : -Math.abs(mouse.clickX);
+    const mw = mouse.pressed ? mouse.clickY : -Math.abs(mouse.clickY);
+    gl.uniform4f(locations.iMouse, mouse.x, mouse.y, mz, mw);
   }
-  if (locations.iTimeDelta) {
-    gl.uniform1f(locations.iTimeDelta, delta);
+  if (locations.iChannelResolution && channelRes) {
+    gl.uniform3fv(locations.iChannelResolution, channelRes);
   }
+  if (locations.iDate) {
+    const now = /* @__PURE__ */ new Date();
+    const seconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() + now.getMilliseconds() / 1e3;
+    gl.uniform4f(locations.iDate, now.getFullYear(), now.getMonth(), now.getDate(), seconds);
+  }
+}
+function updateUniforms(state, delta, speed, mouse) {
+  state.time += delta * speed;
   state.frame++;
-  if (locations.iFrame) {
-    gl.uniform1i(locations.iFrame, state.frame);
+  const res = new Float32Array(12);
+  for (let i = 0; i < 4; i++) {
+    const tex = state.textures[i];
+    if (tex) {
+      res[i * 3] = tex.width;
+      res[i * 3 + 1] = tex.height;
+      res[i * 3 + 2] = 1;
+    }
   }
-  if (locations.iResolution) {
-    gl.uniform3f(
-      locations.iResolution,
-      gl.drawingBufferWidth,
-      gl.drawingBufferHeight,
-      1
-    );
+  setUniforms(
+    state.gl,
+    state.locations,
+    state.time,
+    delta,
+    state.frame,
+    state.gl.drawingBufferWidth,
+    state.gl.drawingBufferHeight,
+    mouse,
+    res
+  );
+}
+
+// src/multipass.ts
+var PASS_ORDER = ["BufferA", "BufferB", "BufferC", "BufferD", "Image"];
+var CHANNEL_KEYS = ["iChannel0", "iChannel1", "iChannel2", "iChannel3"];
+function isPassName(v) {
+  return typeof v === "string" && PASS_ORDER.includes(v);
+}
+function createPingPongTextures(gl, w, h) {
+  const textures = [];
+  for (let i = 0; i < 2; i++) {
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    textures.push(tex);
   }
-  if (locations.iMouse) {
-    const mz = mouse.pressed ? mouse.clickX : -Math.abs(mouse.clickX);
-    const mw = mouse.pressed ? mouse.clickY : -Math.abs(mouse.clickY);
-    gl.uniform4f(locations.iMouse, mouse.x, mouse.y, mz, mw);
+  return textures;
+}
+function createFBO(gl, texture) {
+  const fbo = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return fbo;
+}
+function createMultipassRenderer(gl, config, externalTextures) {
+  const w = gl.drawingBufferWidth || 1;
+  const h = gl.drawingBufferHeight || 1;
+  const passes = [];
+  for (const name of PASS_ORDER) {
+    const passConfig = config[name];
+    if (!passConfig) continue;
+    const program = createProgram(gl, passConfig.code);
+    if (typeof program === "string") return `${name}: ${program}`;
+    setupQuad(gl, program);
+    const locations = getUniformLocations(gl, program);
+    const isImage = name === "Image";
+    const pingPong = isImage ? null : createPingPongTextures(gl, w, h);
+    const fbo = isImage ? null : createFBO(gl, pingPong[0]);
+    const channelBindings = [null, null, null, null];
+    for (let i = 0; i < 4; i++) {
+      const input = passConfig[CHANNEL_KEYS[i]];
+      if (input == null) continue;
+      if (isPassName(input)) {
+        channelBindings[i] = { passRef: input };
+      } else {
+        channelBindings[i] = externalTextures[i];
+      }
+    }
+    passes.push({
+      name,
+      program,
+      locations,
+      fbo,
+      pingPong,
+      currentIdx: 0,
+      width: w,
+      height: h,
+      channelBindings
+    });
   }
-  if (locations.iChannelResolution) {
-    const res = new Float32Array(12);
+  if (passes.length === 0) return "No passes defined";
+  return passes;
+}
+function renderMultipass(gl, passes, delta, speed, mouse, sharedState) {
+  sharedState.time += delta * speed;
+  sharedState.frame++;
+  const passTextures = {};
+  for (const pass of passes) {
+    const isImage = pass.name === "Image";
+    if (pass.pingPong) {
+      const writeIdx = pass.currentIdx;
+      const readIdx = 1 - writeIdx;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, pass.fbo);
+      gl.framebufferTexture2D(
+        gl.FRAMEBUFFER,
+        gl.COLOR_ATTACHMENT0,
+        gl.TEXTURE_2D,
+        pass.pingPong[writeIdx],
+        0
+      );
+      passTextures[pass.name] = pass.pingPong[readIdx];
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, isImage ? null : pass.fbo);
+    gl.viewport(0, 0, isImage ? gl.drawingBufferWidth : pass.width, isImage ? gl.drawingBufferHeight : pass.height);
+    gl.useProgram(pass.program);
+    const tempTextures = [null, null, null, null];
+    for (let i = 0; i < 4; i++) {
+      const binding = pass.channelBindings[i];
+      if (!binding) continue;
+      if ("passRef" in binding) {
+        const refTex = passTextures[binding.passRef];
+        if (refTex) {
+          gl.activeTexture(gl.TEXTURE0 + i);
+          gl.bindTexture(gl.TEXTURE_2D, refTex);
+          if (pass.locations.iChannel[i]) {
+            gl.uniform1i(pass.locations.iChannel[i], i);
+          }
+        }
+      } else {
+        tempTextures[i] = binding;
+      }
+    }
+    bindTextures(gl, pass.locations.iChannel, tempTextures);
+    const channelRes = new Float32Array(12);
     for (let i = 0; i < 4; i++) {
-      const tex = state.textures[i];
-      if (tex) {
-        res[i * 3] = tex.width;
-        res[i * 3 + 1] = tex.height;
-        res[i * 3 + 2] = 1;
+      const binding = pass.channelBindings[i];
+      if (!binding) continue;
+      if ("passRef" in binding) {
+        const refPass = passes.find((p) => p.name === binding.passRef);
+        if (refPass) {
+          channelRes[i * 3] = refPass.width;
+          channelRes[i * 3 + 1] = refPass.height;
+          channelRes[i * 3 + 2] = 1;
+        }
+      } else {
+        channelRes[i * 3] = binding.width;
+        channelRes[i * 3 + 1] = binding.height;
+        channelRes[i * 3 + 2] = 1;
       }
     }
-    gl.uniform3fv(locations.iChannelResolution, res);
+    const vw = isImage ? gl.drawingBufferWidth : pass.width;
+    const vh = isImage ? gl.drawingBufferHeight : pass.height;
+    setUniforms(gl, pass.locations, sharedState.time, delta, sharedState.frame, vw, vh, mouse, channelRes);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    if (pass.pingPong) {
+      pass.currentIdx = 1 - pass.currentIdx;
+    }
   }
-  if (locations.iDate) {
-    const now = /* @__PURE__ */ new Date();
-    const seconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() + now.getMilliseconds() / 1e3;
-    gl.uniform4f(
-      locations.iDate,
-      now.getFullYear(),
-      now.getMonth(),
-      // 0-based, matches Shadertoy
-      now.getDate(),
-      seconds
-    );
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+}
+function resizeFBOs(gl, passes, w, h) {
+  for (const pass of passes) {
+    if (!pass.pingPong) continue;
+    pass.width = w;
+    pass.height = h;
+    for (let i = 0; i < 2; i++) {
+      gl.bindTexture(gl.TEXTURE_2D, pass.pingPong[i]);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    }
+  }
+}
+function disposeMultipass(gl, passes) {
+  for (const pass of passes) {
+    gl.deleteProgram(pass.program);
+    if (pass.fbo) gl.deleteFramebuffer(pass.fbo);
+    if (pass.pingPong) {
+      gl.deleteTexture(pass.pingPong[0]);
+      gl.deleteTexture(pass.pingPong[1]);
+    }
   }
 }
 
 // src/useShadertoy.ts
-var CHANNEL_KEYS = ["iChannel0", "iChannel1", "iChannel2", "iChannel3"];
+var CHANNEL_KEYS2 = ["iChannel0", "iChannel1", "iChannel2", "iChannel3"];
 function useShadertoy({
   fragmentShader,
+  passes: passesProp,
   textures: texturesProp,
   paused = false,
   speed = 1,
@@ -285,6 +587,7 @@ function useShadertoy({
 }) {
   const canvasRef = (0, import_react.useRef)(null);
   const rendererRef = (0, import_react.useRef)(null);
+  const multipassRef = (0, import_react.useRef)(null);
   const rafRef = (0, import_react.useRef)(0);
   const pausedRef = (0, import_react.useRef)(paused);
   const speedRef = (0, import_react.useRef)(speed);
@@ -297,26 +600,34 @@ function useShadertoy({
     clickY: 0,
     pressed: false
   });
+  const sharedState = (0, import_react.useRef)({ time: 0, frame: 0 });
   pausedRef.current = paused;
   speedRef.current = speed;
+  const isMultipass = !!passesProp;
   (0, import_react.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const result = createRenderer(canvas, fragmentShader);
-    if (typeof result === "string") {
-      setError(result);
-      onError?.(result);
+    sharedState.current = { time: 0, frame: 0 };
+    const gl = canvas.getContext("webgl2", {
+      antialias: false,
+      alpha: true,
+      premultipliedAlpha: false
+    });
+    if (!gl) {
+      const msg = "WebGL2 not supported";
+      setError(msg);
+      onError?.(msg);
       return;
     }
-    rendererRef.current = result;
+    const externalTextures = [null, null, null, null];
     const texturePromises = [];
     if (texturesProp) {
       for (let i = 0; i < 4; i++) {
-        const src = texturesProp[CHANNEL_KEYS[i]];
-        if (typeof src === "string") {
-          const { state, promise } = loadImageTexture(result.gl, src, i);
-          result.textures[i] = state;
-          texturePromises.push(promise);
+        const src = texturesProp[CHANNEL_KEYS2[i]];
+        if (src != null) {
+          const { state, promise } = createTexture(gl, src, i);
+          externalTextures[i] = state;
+          if (promise) texturePromises.push(promise);
         }
       }
     }
@@ -325,40 +636,88 @@ function useShadertoy({
       setError(null);
       onLoad?.();
     };
-    if (texturePromises.length > 0) {
-      Promise.all(texturePromises).then(() => {
-        if (rendererRef.current) markReady();
-      }).catch((err) => {
-        const msg = err instanceof Error ? err.message : "Texture load failed";
-        setError(msg);
-        onError?.(msg);
-      });
-    } else {
-      markReady();
-    }
-    let lastTimestamp = 0;
-    const loop = (timestamp) => {
-      const delta = lastTimestamp ? (timestamp - lastTimestamp) / 1e3 : 0;
-      lastTimestamp = timestamp;
-      if (!pausedRef.current && rendererRef.current) {
-        const r = rendererRef.current;
-        bindTextures(r.gl, r.locations.iChannel, r.textures);
-        updateUniforms(r, delta, speedRef.current, mouseState.current);
-        render(r);
+    const handleError = (msg) => {
+      setError(msg);
+      onError?.(msg);
+    };
+    if (isMultipass) {
+      const passResult = createMultipassRenderer(gl, passesProp, externalTextures);
+      if (typeof passResult === "string") {
+        handleError(passResult);
+        return;
+      }
+      multipassRef.current = passResult;
+      rendererRef.current = null;
+      if (texturePromises.length > 0) {
+        Promise.all(texturePromises).then(() => {
+          if (multipassRef.current) markReady();
+        }).catch((err) => handleError(err instanceof Error ? err.message : "Texture load failed"));
+      } else {
+        markReady();
       }
+      let lastTimestamp = 0;
+      const loop = (timestamp) => {
+        const delta = lastTimestamp ? (timestamp - lastTimestamp) / 1e3 : 0;
+        lastTimestamp = timestamp;
+        if (!pausedRef.current && multipassRef.current) {
+          updateDynamicTextures(gl, externalTextures);
+          renderMultipass(gl, multipassRef.current, delta, speedRef.current, mouseState.current, sharedState.current);
+        }
+        rafRef.current = requestAnimationFrame(loop);
+      };
       rafRef.current = requestAnimationFrame(loop);
-    };
-    rafRef.current = requestAnimationFrame(loop);
-    return () => {
-      cancelAnimationFrame(rafRef.current);
-      if (rendererRef.current) {
-        disposeTextures(rendererRef.current.gl, rendererRef.current.textures);
-        dispose(rendererRef.current);
-        rendererRef.current = null;
+      return () => {
+        cancelAnimationFrame(rafRef.current);
+        if (multipassRef.current) {
+          disposeMultipass(gl, multipassRef.current);
+          multipassRef.current = null;
+        }
+        disposeTextures(gl, externalTextures);
+        gl.getExtension("WEBGL_lose_context")?.loseContext();
+        setIsReady(false);
+      };
+    } else {
+      const shaderCode = fragmentShader || "void mainImage(out vec4 c, in vec2 f){ c = vec4(0); }";
+      const result = createRenderer(canvas, shaderCode);
+      if (typeof result === "string") {
+        handleError(result);
+        return;
       }
-      setIsReady(false);
-    };
-  }, [fragmentShader, texturesProp, onError, onLoad]);
+      rendererRef.current = result;
+      multipassRef.current = null;
+      result.textures = externalTextures;
+      if (texturePromises.length > 0) {
+        Promise.all(texturePromises).then(() => {
+          if (rendererRef.current) markReady();
+        }).catch((err) => handleError(err instanceof Error ? err.message : "Texture load failed"));
+      } else {
+        markReady();
+      }
+      let lastTimestamp = 0;
+      const loop = (timestamp) => {
+        const delta = lastTimestamp ? (timestamp - lastTimestamp) / 1e3 : 0;
+        lastTimestamp = timestamp;
+        if (!pausedRef.current && rendererRef.current) {
+          const r = rendererRef.current;
+          updateDynamicTextures(r.gl, r.textures);
+          bindTextures(r.gl, r.locations.iChannel, r.textures);
+          updateUniforms(r, delta, speedRef.current, mouseState.current);
+          render(r);
+        }
+        rafRef.current = requestAnimationFrame(loop);
+      };
+      rafRef.current = requestAnimationFrame(loop);
+      return () => {
+        cancelAnimationFrame(rafRef.current);
+        if (rendererRef.current) {
+          disposeTextures(rendererRef.current.gl, rendererRef.current.textures);
+          dispose(rendererRef.current);
+          rendererRef.current = null;
+        }
+        setIsReady(false);
+      };
+    }
+  }, [fragmentShader, passesProp, texturesProp, onError, onLoad]);
   (0, import_react.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -366,8 +725,14 @@ function useShadertoy({
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
-        canvas.width = Math.round(width * dpr);
-        canvas.height = Math.round(height * dpr);
+        const w = Math.round(width * dpr);
+        const h = Math.round(height * dpr);
+        canvas.width = w;
+        canvas.height = h;
+        if (multipassRef.current) {
+          const gl = canvas.getContext("webgl2");
+          if (gl) resizeFBOs(gl, multipassRef.current, w, h);
+        }
       }
     });
     observer.observe(canvas);
@@ -441,6 +806,7 @@ function useShadertoy({
 var import_jsx_runtime = require("react/jsx-runtime");
 function Shadertoy({
   fragmentShader,
+  passes,
   textures,
   style,
   className,
@@ -453,6 +819,7 @@ function Shadertoy({
 }) {
   const { canvasRef } = useShadertoy({
     fragmentShader,
+    passes,
     textures,
     paused,
     speed,