react-shadertoy 0.3.0 → 0.6.0

package/dist/index.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Shadertoy: () => Shadertoy,
+  apiToConfig: () => apiToConfig,
+  fetchShader: () => fetchShader,
   useShadertoy: () => useShadertoy
 });
 module.exports = __toCommonJS(index_exports);
@@ -28,6 +30,98 @@ module.exports = __toCommonJS(index_exports);
 // src/useShadertoy.ts
 var import_react = require("react");
 
+// src/api.ts
+var SHADERTOY_BASE = "https://www.shadertoy.com";
+var API_URL = `${SHADERTOY_BASE}/api/v1/shaders`;
+var OUTPUT_ID_TO_PASS = {
+  257: "BufferA",
+  258: "BufferB",
+  259: "BufferC",
+  260: "BufferD"
+};
+var cache = /* @__PURE__ */ new Map();
+async function fetchShader(id, apiKey) {
+  const cached = cache.get(id);
+  if (cached) return cached;
+  const res = await fetch(`${API_URL}/${id}?key=${apiKey}`);
+  if (!res.ok) throw new Error(`Shadertoy API error: ${res.status}`);
+  const data = await res.json();
+  if (data.Error) throw new Error(`Shadertoy API: ${data.Error}`);
+  cache.set(id, data.Shader);
+  return data.Shader;
+}
+function mapWrap(wrap) {
+  if (wrap === "repeat") return "repeat";
+  return "clamp";
+}
+function mapFilter(filter) {
+  if (filter === "nearest") return "nearest";
+  if (filter === "linear") return "linear";
+  return "mipmap";
+}
+function resolveTextureSrc(src) {
+  if (src.startsWith("http")) return src;
+  return SHADERTOY_BASE + src;
+}
+function apiToConfig(shader) {
+  const passes = {};
+  const textures = {};
+  const commonPass = shader.renderpass.find((p) => p.type === "common");
+  const commonCode = commonPass ? commonPass.code + "\n" : "";
+  for (const rp of shader.renderpass) {
+    if (rp.type === "common" || rp.type === "sound") continue;
+    const passName = getPassName(rp);
+    if (!passName) continue;
+    const passConfig = {
+      code: commonCode + rp.code
+    };
+    for (const input of rp.inputs) {
+      const channelKey = `iChannel${input.channel}`;
+      if (channelKey === "code") continue;
+      if (input.ctype === "buffer") {
+        const refPass = OUTPUT_ID_TO_PASS[input.id];
+        if (refPass) {
+          ;
+          passConfig[channelKey] = refPass;
+        }
+      } else if (input.ctype === "texture" || input.ctype === "cubemap") {
+        const texOpts = {
+          src: resolveTextureSrc(input.src),
+          wrap: mapWrap(input.sampler.wrap),
+          filter: mapFilter(input.sampler.filter),
+          vflip: input.sampler.vflip === "true"
+        };
+        passConfig[channelKey] = texOpts;
+        const texKey = `iChannel${input.channel}`;
+        textures[texKey] = texOpts;
+      }
+    }
+    passes[passName] = passConfig;
+  }
+  const meta = {
+    name: shader.info.name,
+    author: shader.info.username,
+    description: shader.info.description,
+    tags: shader.info.tags
+  };
+  return { passes, textures, meta };
+}
+function getPassName(rp) {
+  if (rp.type === "image") return "Image";
+  if (rp.type === "buffer") {
+    for (const out of rp.outputs) {
+      const name = OUTPUT_ID_TO_PASS[out.id];
+      if (name) return name;
+    }
+    return null;
+  }
+  return null;
+}
+function isSinglePass(passes) {
+  const keys = Object.keys(passes);
+  return keys.length === 1 && keys[0] === "Image";
+}
+
 // src/renderer.ts
 var QUAD_VERTICES = new Float32Array([
   -1,
@@ -43,14 +137,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 +160,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 +185,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 +202,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 +220,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,8 +263,19 @@ function dispose(state) {
 }
 
 // src/textures.ts
-function isPOT(v) {
-  return (v & v - 1) === 0 && v > 0;
+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();
@@ -166,12 +287,32 @@ function initTexture(gl, unit) {
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
   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, source, unit) {
+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(
@@ -203,10 +344,7 @@ function createTexture(gl, source, unit) {
           return;
         }
         uploadElement(gl, texture, unit, 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);
-        }
+        applyTextureParameters(gl, img.width, img.height, opts.wrap, opts.filter, opts.vflip);
         state2.width = img.width;
         state2.height = img.height;
         state2.loaded = true;
@@ -229,6 +367,7 @@ function createTexture(gl, source, unit) {
     };
     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 };
@@ -240,6 +379,7 @@ function createTexture(gl, source, unit) {
           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;
@@ -254,6 +394,7 @@ function createTexture(gl, source, unit) {
     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,
@@ -279,6 +420,7 @@ function createTexture(gl, source, unit) {
     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,
@@ -325,63 +467,213 @@ function disposeTextures(gl, textures) {
 }
 
 // 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 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 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;
       }
     }
-    gl.uniform3fv(locations.iChannelResolution, res);
+    bindTextures(gl, pass.locations.iChannel, tempTextures);
+    const channelRes = new Float32Array(12);
+    for (let i = 0; i < 4; i++) {
+      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;
+      }
+    }
+    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,
+  id,
+  apiKey,
   paused = false,
   speed = 1,
   pixelRatio,
@@ -391,11 +683,14 @@ 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);
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
+  const [meta, setMeta] = (0, import_react.useState)(null);
+  const [resolved, setResolved] = (0, import_react.useState)(id ? null : { passes: passesProp, textures: texturesProp, fragmentShader });
   const mouseState = (0, import_react.useRef)({
     x: 0,
     y: 0,
@@ -403,25 +698,68 @@ function useShadertoy({
     clickY: 0,
     pressed: false
   });
+  const sharedState = (0, import_react.useRef)({ time: 0, frame: 0 });
   pausedRef.current = paused;
   speedRef.current = speed;
   (0, import_react.useEffect)(() => {
+    if (!id) return;
+    if (!apiKey) {
+      setError("apiKey is required when using id");
+      onError?.("apiKey is required when using id");
+      return;
+    }
+    let cancelled = false;
+    fetchShader(id, apiKey).then((shader) => {
+      if (cancelled) return;
+      const config = apiToConfig(shader);
+      setMeta(config.meta);
+      if (isSinglePass(config.passes)) {
+        const imagePass = config.passes.Image;
+        setResolved({
+          fragmentShader: imagePass.code,
+          textures: config.textures
+        });
+      } else {
+        setResolved({ passes: config.passes });
+      }
+    }).catch((err) => {
+      if (cancelled) return;
+      const msg = err instanceof Error ? err.message : "Failed to fetch shader";
+      setError(msg);
+      onError?.(msg);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [id, apiKey]);
+  const effectivePasses = resolved?.passes;
+  const effectiveTextures = resolved?.textures ?? texturesProp;
+  const effectiveShader = resolved?.fragmentShader ?? fragmentShader;
+  const isMultipass = !!effectivePasses;
+  (0, import_react.useEffect)(() => {
+    if (id && !resolved) return;
     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) {
+    if (effectiveTextures) {
       for (let i = 0; i < 4; i++) {
-        const src = texturesProp[CHANNEL_KEYS[i]];
+        const src = effectiveTextures[CHANNEL_KEYS2[i]];
         if (src != null) {
-          const { state, promise } = createTexture(result.gl, src, i);
-          result.textures[i] = state;
+          const { state, promise } = createTexture(gl, src, i);
+          externalTextures[i] = state;
           if (promise) texturePromises.push(promise);
         }
       }
@@ -431,41 +769,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;
-        updateDynamicTextures(r.gl, r.textures);
-        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, effectivePasses, 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 = effectiveShader || "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);
+      };
+    }
+  }, [effectiveShader, effectivePasses, effectiveTextures, resolved, onError, onLoad]);
   (0, import_react.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -473,8 +858,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);
@@ -541,14 +932,18 @@ function useShadertoy({
   const resume = (0, import_react.useCallback)(() => {
     pausedRef.current = false;
   }, []);
-  return { canvasRef, isReady, error, pause, resume };
+  return { canvasRef, isReady, error, pause, resume, meta };
 }
 
 // src/Shadertoy.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Shadertoy({
   fragmentShader,
+  passes,
   textures,
+  id,
+  apiKey,
+  showLicense,
   style,
   className,
   paused,
@@ -558,9 +953,12 @@ function Shadertoy({
   onError,
   onLoad
 }) {
-  const { canvasRef } = useShadertoy({
+  const { canvasRef, meta } = useShadertoy({
     fragmentShader,
+    passes,
     textures,
+    id,
+    apiKey,
     paused,
     speed,
     pixelRatio,
@@ -568,6 +966,35 @@ function Shadertoy({
     onError,
     onLoad
   });
+  const shouldShowLicense = showLicense ?? !!id;
+  const hasMeta = shouldShowLicense && meta;
+  if (hasMeta) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", ...style }, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "canvas",
+        {
+          ref: canvasRef,
+          style: { width: "100%", height: "100%", display: "block" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+        position: "absolute",
+        bottom: 8,
+        right: 8,
+        background: "rgba(0,0,0,0.6)",
+        color: "#fff",
+        padding: "4px 10px",
+        borderRadius: 4,
+        fontSize: 12,
+        fontFamily: "system-ui, sans-serif",
+        pointerEvents: "none"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: meta.name }),
+        " by ",
+        meta.author
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "canvas",
     {
@@ -580,5 +1007,7 @@ function Shadertoy({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Shadertoy,
+  apiToConfig,
+  fetchShader,
   useShadertoy
 });