@fjandin/react-shader 0.0.20 → 0.0.30

package/dist/index.cjs

@@ -30,16 +30,10 @@ var __export = (target, all) => {
 var exports_src = {};
 __export(exports_src, {
   useAudio: () => useAudio,
-  generateUtilsFunction: () => generateUtilsFunction,
   generateSimplexNoiseFunctionGpu: () => generateSimplexNoiseFunctionGpu,
-  generateSimplexNoiseFunction: () => generateSimplexNoiseFunction,
   generateSceneCirclesFunctionGpu: () => generateSceneCirclesFunctionGpu,
-  generateSceneCirclesFunction: () => generateSceneCirclesFunction,
   generateDistortionRippleFunctionGpu: () => generateDistortionRippleFunctionGpu,
-  generateDistortionRippleFunction: () => generateDistortionRippleFunction,
   generateColorPaletteFunctionGpu: () => generateColorPaletteFunctionGpu,
-  generateColorPaletteFunction: () => generateColorPaletteFunction,
-  ReactShader: () => ReactShader,
   ReactGpuShader: () => ReactGpuShader
 });
 module.exports = __toCommonJS(exports_src);
@@ -394,10 +388,11 @@ function createStorageBuffer(device, name, binding, data) {
     packingArray[off + 3] = data[i][3];
   }
   device.queue.writeBuffer(buffer, 0, packingArray);
-  return { name, binding, buffer, currentLength: length, dataLength: data.length, packingArray };
+  return { name, binding, buffer, currentLength: length, packingArray };
 }
 function packAndUploadStorageBuffer(device, entry, data) {
   const arr = entry.packingArray;
+  arr.fill(0);
   for (let i = 0;i < data.length; i++) {
     const off = i * 4;
     arr[off] = data[i][0];
@@ -405,8 +400,7 @@ function packAndUploadStorageBuffer(device, entry, data) {
     arr[off + 2] = data[i][2];
     arr[off + 3] = data[i][3];
   }
-  const uploadLength = Math.max(entry.dataLength, 1);
-  device.queue.writeBuffer(entry.buffer, 0, arr, 0, uploadLength * 4);
+  device.queue.writeBuffer(entry.buffer, 0, arr);
 }
 function rebuildBindGroup(state) {
   const entries = [{ binding: 0, resource: { buffer: state.uniformBuffer } }];
@@ -523,18 +517,7 @@ async function initializeWebGPU(canvas, fragmentSource, customUniforms, storageB
     uniformBindGroup,
     uniformLayout,
     bindGroupLayout,
-    storageBuffers,
-    renderPassDescriptor: {
-      colorAttachments: [
-        {
-          view: undefined,
-          clearValue: { r: 0, g: 0, b: 0, a: 1 },
-          loadOp: "clear",
-          storeOp: "store"
-        }
-      ]
-    },
-    submitArray: [null]
+    storageBuffers
   };
 }
 function cleanupWebGPU(state) {
@@ -552,7 +535,6 @@ function useWebGPU(options) {
   const lastFrameTimeRef = import_react2.useRef(0);
   const mouseRef = import_react2.useRef([0, 0]);
   const mouseNormalizedRef = import_react2.useRef([0, 0]);
-  const resolutionRef = import_react2.useRef([0, 0]);
   const mouseLeftDownRef = import_react2.useRef(false);
   const canvasRectRef = import_react2.useRef(null);
   const onErrorRef = import_react2.useRef(options.onError);
@@ -625,18 +607,16 @@ function useWebGPU(options) {
     const allValues = allValuesRef.current;
     allValues.iTime = elapsedTimeRef.current;
     allValues.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
-    resolutionRef.current[0] = canvas.width;
-    resolutionRef.current[1] = canvas.height;
-    allValues.iResolution = resolutionRef.current;
+    allValues.iResolution = [canvas.width, canvas.height];
     allValues.iMouse = mouseRef.current;
     allValues.iMouseNormalized = mouseNormalizedRef.current;
-    const customs = uniformsRef.current;
-    if (customs) {
-      for (const name in customs) {
-        allValues[name] = customs[name];
+    if (uniformsRef.current) {
+      for (const [name, value] of Object.entries(uniformsRef.current)) {
+        allValues[name] = value;
       }
     }
     const uniformData = uniformDataRef.current;
+    uniformData.fill(0);
     for (const field of uniformLayout.fields) {
       const value = allValues[field.name];
       if (value === undefined) {
@@ -651,20 +631,18 @@ function useWebGPU(options) {
       if (!data)
         continue;
       const requiredLength = Math.max(data.length, 1);
-      if (requiredLength > entry.currentLength || requiredLength < entry.currentLength / 2) {
-        const allocLength = Math.max(Math.ceil(requiredLength * 1.5), 1);
+      if (requiredLength !== entry.currentLength) {
         entry.buffer.destroy();
-        const byteSize = allocLength * 16;
+        const byteSize = requiredLength * 16;
         entry.buffer = device.createBuffer({
           label: `storage: ${entry.name}`,
           size: byteSize,
           usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
         });
-        entry.packingArray = new Float32Array(allocLength * 4);
-        entry.currentLength = allocLength;
+        entry.packingArray = new Float32Array(requiredLength * 4);
+        entry.currentLength = requiredLength;
         needsBindGroupRebuild = true;
       }
-      entry.dataLength = data.length;
       packAndUploadStorageBuffer(device, entry, data);
     }
     if (needsBindGroupRebuild) {
@@ -672,14 +650,21 @@ function useWebGPU(options) {
     }
     const commandEncoder = device.createCommandEncoder();
     const textureView = context.getCurrentTexture().createView();
-    state.renderPassDescriptor.colorAttachments[0].view = textureView;
-    const renderPass = commandEncoder.beginRenderPass(state.renderPassDescriptor);
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: textureView,
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          loadOp: "clear",
+          storeOp: "store"
+        }
+      ]
+    });
     renderPass.setPipeline(pipeline);
     renderPass.setBindGroup(0, state.uniformBindGroup);
     renderPass.draw(3);
     renderPass.end();
-    state.submitArray[0] = commandEncoder.finish();
-    device.queue.submit(state.submitArray);
+    device.queue.submit([commandEncoder.finish()]);
     animationFrameRef.current = requestAnimationFrame(render);
   }, []);
   import_react2.useEffect(() => {
@@ -874,721 +859,6 @@ function ReactGpuShader({
     style: CANVAS_STYLE
   }, undefined, false, undefined, this);
 }
-// src/ReactShader.tsx
-var import_react5 = require("react");
-
-// src/hooks/useWebGL.ts
-var import_react4 = require("react");
-
-// src/utils/shader.ts
-function compileShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  if (!shader) {
-    throw new Error(`Failed to create shader of type ${type === gl.VERTEX_SHADER ? "VERTEX" : "FRAGMENT"}`);
-  }
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    const info = gl.getShaderInfoLog(shader);
-    gl.deleteShader(shader);
-    const shaderType = type === gl.VERTEX_SHADER ? "Vertex" : "Fragment";
-    throw new Error(`${shaderType} shader compilation failed:
-${info}`);
-  }
-  return shader;
-}
-function createProgram(gl, vertexShader, fragmentShader) {
-  const program = gl.createProgram();
-  if (!program) {
-    throw new Error("Failed to create WebGL program");
-  }
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const info = gl.getProgramInfoLog(program);
-    gl.deleteProgram(program);
-    throw new Error(`Program linking failed:
-${info}`);
-  }
-  return program;
-}
-function createShaderProgram(gl, vertexSource, fragmentSource) {
-  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
-  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
-  try {
-    return createProgram(gl, vertexShader, fragmentShader);
-  } finally {
-    gl.deleteShader(vertexShader);
-    gl.deleteShader(fragmentShader);
-  }
-}
-
-// src/utils/textures.ts
-function isTextureSource(value) {
-  if (typeof window === "undefined")
-    return false;
-  return value instanceof HTMLImageElement || value instanceof HTMLCanvasElement || value instanceof HTMLVideoElement || typeof ImageBitmap !== "undefined" && value instanceof ImageBitmap || value instanceof ImageData || typeof OffscreenCanvas !== "undefined" && value instanceof OffscreenCanvas;
-}
-function isTextureOptions(value) {
-  return typeof value === "object" && value !== null && "source" in value && isTextureSource(value.source);
-}
-function isTexture(value) {
-  return isTextureSource(value) || isTextureOptions(value);
-}
-function getWrapMode(gl, wrap) {
-  switch (wrap) {
-    case "repeat":
-      return gl.REPEAT;
-    case "mirror":
-      return gl.MIRRORED_REPEAT;
-    default:
-      return gl.CLAMP_TO_EDGE;
-  }
-}
-function getMinFilter(gl, filter) {
-  switch (filter) {
-    case "nearest":
-      return gl.NEAREST;
-    case "mipmap":
-      return gl.LINEAR_MIPMAP_LINEAR;
-    default:
-      return gl.LINEAR;
-  }
-}
-function getMagFilter(gl, filter) {
-  switch (filter) {
-    case "nearest":
-      return gl.NEAREST;
-    default:
-      return gl.LINEAR;
-  }
-}
-function isPowerOfTwo(value) {
-  return (value & value - 1) === 0 && value !== 0;
-}
-function getSourceDimensions(source) {
-  if (source instanceof HTMLImageElement) {
-    return { width: source.naturalWidth, height: source.naturalHeight };
-  }
-  if (source instanceof HTMLVideoElement) {
-    return { width: source.videoWidth, height: source.videoHeight };
-  }
-  if (source instanceof ImageData) {
-    return { width: source.width, height: source.height };
-  }
-  return { width: source.width, height: source.height };
-}
-function createTextureManager(gl) {
-  const maxUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
-  return {
-    cache: new Map,
-    nextUnit: 0,
-    maxUnits
-  };
-}
-function createTexture(gl, source, options = {}) {
-  const texture = gl.createTexture();
-  if (!texture) {
-    throw new Error("Failed to create WebGL texture");
-  }
-  const { wrapS = "clamp", wrapT = "clamp", minFilter = "linear", magFilter = "linear", flipY = true } = options;
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
-  const { width, height } = getSourceDimensions(source);
-  const pot = isPowerOfTwo(width) && isPowerOfTwo(height);
-  const isWebGL2 = "texStorage2D" in gl;
-  const actualMinFilter = minFilter === "mipmap" && (pot || isWebGL2) ? minFilter : minFilter === "mipmap" ? "linear" : minFilter;
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, getWrapMode(gl, wrapS));
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, getWrapMode(gl, wrapT));
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, getMinFilter(gl, actualMinFilter));
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, getMagFilter(gl, magFilter));
-  if (actualMinFilter === "mipmap") {
-    gl.generateMipmap(gl.TEXTURE_2D);
-  }
-  gl.bindTexture(gl.TEXTURE_2D, null);
-  return texture;
-}
-function updateTexture(gl, texture, source, flipY = true) {
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-}
-function needsVideoUpdate(source) {
-  if (!(source instanceof HTMLVideoElement))
-    return false;
-  return !source.paused && !source.ended && source.readyState >= 2;
-}
-function bindTextureUniform(gl, program, name, value, manager, locationCache) {
-  const source = isTextureOptions(value) ? value.source : value;
-  const options = isTextureOptions(value) ? value : {};
-  let entry = manager.cache.get(name);
-  if (entry && entry.source !== source) {
-    gl.deleteTexture(entry.texture);
-    entry = undefined;
-  }
-  if (!entry) {
-    if (manager.nextUnit >= manager.maxUnits) {
-      console.warn(`Maximum texture units (${manager.maxUnits}) exceeded for uniform "${name}"`);
-      return;
-    }
-    const texture = createTexture(gl, source, options);
-    entry = {
-      texture,
-      unit: manager.nextUnit++,
-      source
-    };
-    manager.cache.set(name, entry);
-  }
-  if (needsVideoUpdate(source)) {
-    const flipY = isTextureOptions(value) ? value.flipY ?? true : true;
-    updateTexture(gl, entry.texture, source, flipY);
-  }
-  gl.activeTexture(gl.TEXTURE0 + entry.unit);
-  gl.bindTexture(gl.TEXTURE_2D, entry.texture);
-  let location = locationCache.get(name);
-  if (location === undefined) {
-    location = gl.getUniformLocation(program, name);
-    locationCache.set(name, location);
-  }
-  if (location !== null) {
-    gl.uniform1i(location, entry.unit);
-  }
-}
-function cleanupTextures(gl, manager) {
-  for (const entry of manager.cache.values()) {
-    gl.deleteTexture(entry.texture);
-  }
-  manager.cache.clear();
-  manager.nextUnit = 0;
-}
-
-// src/utils/uniforms.ts
-var MAX_ARRAY_LENGTH = 100;
-function isVec22(value) {
-  return Array.isArray(value) && value.length === 2 && typeof value[0] === "number";
-}
-function isVec32(value) {
-  return Array.isArray(value) && value.length === 3 && typeof value[0] === "number";
-}
-function isVec42(value) {
-  return Array.isArray(value) && value.length === 4 && typeof value[0] === "number";
-}
-function isFloatArray(value) {
-  return Array.isArray(value) && value.length > 4 && typeof value[0] === "number";
-}
-function isVec2Array(value) {
-  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 2;
-}
-function isVec3Array(value) {
-  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 3;
-}
-function isVec4Array(value) {
-  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 4;
-}
-function isArrayUniform(value) {
-  return isFloatArray(value) || isVec2Array(value) || isVec3Array(value) || isVec4Array(value);
-}
-function setUniform(gl, location, value) {
-  if (location === null) {
-    return;
-  }
-  if (typeof value === "number") {
-    gl.uniform1f(location, value);
-  } else if (isVec4Array(value)) {
-    gl.uniform4fv(location, value.flat());
-  } else if (isVec3Array(value)) {
-    gl.uniform3fv(location, value.flat());
-  } else if (isVec2Array(value)) {
-    gl.uniform2fv(location, value.flat());
-  } else if (isFloatArray(value)) {
-    gl.uniform1fv(location, value);
-  } else if (isVec42(value)) {
-    gl.uniform4f(location, value[0], value[1], value[2], value[3]);
-  } else if (isVec32(value)) {
-    gl.uniform3f(location, value[0], value[1], value[2]);
-  } else if (isVec22(value)) {
-    gl.uniform2f(location, value[0], value[1]);
-  }
-}
-function getUniformLocation(gl, program, name) {
-  return gl.getUniformLocation(program, name);
-}
-function setUniforms(gl, program, uniforms, locationCache, textureManager) {
-  for (const [name, value] of Object.entries(uniforms)) {
-    if (isTexture(value)) {
-      if (textureManager) {
-        bindTextureUniform(gl, program, name, value, textureManager, locationCache);
-      }
-      continue;
-    }
-    let location = locationCache.get(name);
-    if (location === undefined) {
-      location = getUniformLocation(gl, program, name);
-      locationCache.set(name, location);
-    }
-    setUniform(gl, location, value);
-    if (isArrayUniform(value)) {
-      const countName = `${name}_count`;
-      let countLocation = locationCache.get(countName);
-      if (countLocation === undefined) {
-        countLocation = getUniformLocation(gl, program, countName);
-        locationCache.set(countName, countLocation);
-      }
-      if (countLocation !== null) {
-        gl.uniform1i(countLocation, value.length);
-      }
-    }
-  }
-}
-function createUniformLocationCache() {
-  return new Map;
-}
-function getUniformType(value) {
-  if (isTexture(value)) {
-    return "sampler2D";
-  }
-  if (typeof value === "number") {
-    return "float";
-  }
-  if (isVec4Array(value)) {
-    return `vec4[${MAX_ARRAY_LENGTH}]`;
-  }
-  if (isVec3Array(value)) {
-    return `vec3[${MAX_ARRAY_LENGTH}]`;
-  }
-  if (isVec2Array(value)) {
-    return `vec2[${MAX_ARRAY_LENGTH}]`;
-  }
-  if (isFloatArray(value)) {
-    return `float[${MAX_ARRAY_LENGTH}]`;
-  }
-  if (isVec42(value)) {
-    return "vec4";
-  }
-  if (isVec32(value)) {
-    return "vec3";
-  }
-  if (isVec22(value)) {
-    return "vec2";
-  }
-  return "float";
-}
-function generateUniformDeclarations(uniforms) {
-  const lines = [];
-  for (const [name, value] of Object.entries(uniforms)) {
-    const type = getUniformType(value);
-    if (type.includes("[")) {
-      const [baseType, arrayPart] = type.split("[");
-      lines.push(`uniform ${baseType} ${name}[${arrayPart};`);
-      lines.push(`uniform int ${name}_count;`);
-    } else {
-      lines.push(`uniform ${type} ${name};`);
-    }
-  }
-  return lines.join(`
-`);
-}
-var UNIFORM_MARKER = "// @UNIFORM_VALUES";
-function injectUniformDeclarations(shaderSource, customUniforms, defaultUniforms) {
-  if (!shaderSource.includes(UNIFORM_MARKER)) {
-    return shaderSource;
-  }
-  const allUniforms = { ...defaultUniforms, ...customUniforms };
-  const declarations = generateUniformDeclarations(allUniforms);
-  return shaderSource.replace(UNIFORM_MARKER, declarations);
-}
-
-// src/hooks/useWebGL.ts
-var DEFAULT_UNIFORM_TYPES = {
-  iTime: 0,
-  iMouse: [0, 0],
-  iMouseNormalized: [0, 0],
-  iMouseLeftDown: 0,
-  iResolution: [0, 0]
-};
-function initializeWebGL(canvas, vertexSource, fragmentSource, customUniforms) {
-  const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
-  if (!gl) {
-    throw new Error("WebGL not supported");
-  }
-  const processedVertex = injectUniformDeclarations(vertexSource, customUniforms, DEFAULT_UNIFORM_TYPES);
-  const processedFragment = injectUniformDeclarations(fragmentSource, customUniforms, DEFAULT_UNIFORM_TYPES);
-  const program = createShaderProgram(gl, processedVertex, processedFragment);
-  const positionBuffer = gl.createBuffer();
-  if (!positionBuffer) {
-    throw new Error("Failed to create position buffer");
-  }
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-  const positions = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
-  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
-  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
-  if (positionAttributeLocation === -1) {
-    throw new Error('Vertex shader must have an "a_position" attribute');
-  }
-  return {
-    gl,
-    program,
-    positionBuffer,
-    positionAttributeLocation,
-    uniformLocationCache: createUniformLocationCache(),
-    textureManager: createTextureManager(gl)
-  };
-}
-function cleanupWebGL(gl, state) {
-  cleanupTextures(gl, state.textureManager);
-  gl.deleteBuffer(state.positionBuffer);
-  gl.deleteProgram(state.program);
-}
-function useWebGL(options) {
-  const canvasRef = import_react4.useRef(null);
-  const stateRef = import_react4.useRef(null);
-  const animationFrameRef = import_react4.useRef(0);
-  const elapsedTimeRef = import_react4.useRef(0);
-  const lastFrameTimeRef = import_react4.useRef(0);
-  const mouseRef = import_react4.useRef([0, 0]);
-  const mouseNormalizedRef = import_react4.useRef([0, 0]);
-  const mouseLeftDownRef = import_react4.useRef(false);
-  const canvasRectRef = import_react4.useRef(null);
-  const contextLostRef = import_react4.useRef(false);
-  const uniformsRef = import_react4.useRef(options.uniforms);
-  const onErrorRef = import_react4.useRef(options.onError);
-  const onFrameRef = import_react4.useRef(options.onFrame);
-  const onClickRef = import_react4.useRef(options.onClick);
-  const onMouseDownRef = import_react4.useRef(options.onMouseDown);
-  const onMouseUpRef = import_react4.useRef(options.onMouseUp);
-  const onMouseMoveRef = import_react4.useRef(options.onMouseMove);
-  const onMouseWheelRef = import_react4.useRef(options.onMouseWheel);
-  const timeScaleRef = import_react4.useRef(options.timeScale ?? 1);
-  const vertexRef = import_react4.useRef(options.vertex);
-  const fragmentRef = import_react4.useRef(options.fragment);
-  const dprRef = import_react4.useRef(window.devicePixelRatio || 1);
-  const defaultUniformsRef = import_react4.useRef({
-    iTime: 0,
-    iMouse: [0, 0],
-    iMouseNormalized: [0, 0],
-    iMouseLeftDown: 0,
-    iResolution: [0, 0]
-  });
-  uniformsRef.current = options.uniforms;
-  onErrorRef.current = options.onError;
-  onFrameRef.current = options.onFrame;
-  onClickRef.current = options.onClick;
-  onMouseDownRef.current = options.onMouseDown;
-  onMouseUpRef.current = options.onMouseUp;
-  onMouseMoveRef.current = options.onMouseMove;
-  onMouseWheelRef.current = options.onMouseWheel;
-  timeScaleRef.current = options.timeScale ?? 1;
-  vertexRef.current = options.vertex;
-  fragmentRef.current = options.fragment;
-  const render = import_react4.useCallback((time) => {
-    if (contextLostRef.current)
-      return;
-    const state = stateRef.current;
-    const canvas = canvasRef.current;
-    if (!state || !canvas)
-      return;
-    const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
-    lastFrameTimeRef.current = time;
-    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
-    const { gl, program, positionAttributeLocation, uniformLocationCache, textureManager } = state;
-    const elapsedTime = elapsedTimeRef.current;
-    const dpr = dprRef.current;
-    const displayWidth = canvas.clientWidth;
-    const displayHeight = canvas.clientHeight;
-    if (displayWidth === 0 || displayHeight === 0) {
-      animationFrameRef.current = requestAnimationFrame(render);
-      return;
-    }
-    const bufferWidth = Math.round(displayWidth * dpr);
-    const bufferHeight = Math.round(displayHeight * dpr);
-    if (canvas.width !== bufferWidth || canvas.height !== bufferHeight) {
-      canvas.width = bufferWidth;
-      canvas.height = bufferHeight;
-      gl.viewport(0, 0, bufferWidth, bufferHeight);
-    }
-    gl.clearColor(0, 0, 0, 1);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    gl.useProgram(program);
-    gl.enableVertexAttribArray(positionAttributeLocation);
-    gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
-    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
-    const defaultUniforms = defaultUniformsRef.current;
-    defaultUniforms.iTime = elapsedTime;
-    defaultUniforms.iMouse = mouseRef.current;
-    defaultUniforms.iMouseNormalized = mouseNormalizedRef.current;
-    defaultUniforms.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
-    defaultUniforms.iResolution = [canvas.width, canvas.height];
-    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache, textureManager);
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-    if (onFrameRef.current) {
-      onFrameRef.current({
-        deltaTime,
-        time: elapsedTime,
-        resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current,
-        mouseNormalized: mouseNormalizedRef.current,
-        mouseLeftDown: mouseLeftDownRef.current
-      });
-    }
-    animationFrameRef.current = requestAnimationFrame(render);
-  }, []);
-  import_react4.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas)
-      return;
-    const initialize = () => {
-      try {
-        stateRef.current = initializeWebGL(canvas, vertexRef.current, fragmentRef.current, uniformsRef.current);
-        elapsedTimeRef.current = 0;
-        lastFrameTimeRef.current = 0;
-        contextLostRef.current = false;
-        animationFrameRef.current = requestAnimationFrame(render);
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error(String(err));
-        if (onErrorRef.current) {
-          onErrorRef.current(error);
-        } else {
-          console.error("WebGL initialization failed:", error);
-        }
-      }
-    };
-    const handleContextLost = (event) => {
-      event.preventDefault();
-      contextLostRef.current = true;
-      cancelAnimationFrame(animationFrameRef.current);
-      stateRef.current = null;
-    };
-    const handleContextRestored = () => {
-      initialize();
-    };
-    const dprMediaQuery = window.matchMedia(`(resolution: ${dprRef.current}dppx)`);
-    const handleDprChange = () => {
-      dprRef.current = window.devicePixelRatio || 1;
-    };
-    dprMediaQuery.addEventListener("change", handleDprChange);
-    canvas.addEventListener("webglcontextlost", handleContextLost);
-    canvas.addEventListener("webglcontextrestored", handleContextRestored);
-    initialize();
-    return () => {
-      dprMediaQuery.removeEventListener("change", handleDprChange);
-      canvas.removeEventListener("webglcontextlost", handleContextLost);
-      canvas.removeEventListener("webglcontextrestored", handleContextRestored);
-      cancelAnimationFrame(animationFrameRef.current);
-      if (stateRef.current) {
-        cleanupWebGL(stateRef.current.gl, stateRef.current);
-        stateRef.current = null;
-      }
-    };
-  }, [render]);
-  import_react4.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas)
-      return;
-    const updateRect = () => {
-      canvasRectRef.current = canvas.getBoundingClientRect();
-    };
-    updateRect();
-    const resizeObserver = new ResizeObserver(updateRect);
-    resizeObserver.observe(canvas);
-    window.addEventListener("scroll", updateRect, { passive: true });
-    const handleMouseMove = (event) => {
-      const rect = canvasRectRef.current;
-      if (!rect)
-        return;
-      const dpr = dprRef.current;
-      const x = (event.clientX - rect.left) * dpr;
-      const y = (rect.height - (event.clientY - rect.top)) * dpr;
-      mouseRef.current = [x, y];
-      const minDimension = Math.min(canvas.width, canvas.height) || 1;
-      mouseNormalizedRef.current = [
-        (mouseRef.current[0] - canvas.width / 2) / minDimension,
-        (mouseRef.current[1] - canvas.height / 2) / minDimension
-      ];
-      onMouseMoveRef.current?.({
-        deltaTime: 0,
-        time: elapsedTimeRef.current,
-        resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current,
-        mouseNormalized: mouseNormalizedRef.current,
-        mouseLeftDown: mouseLeftDownRef.current
-      });
-    };
-    const handleMouseDown = (event) => {
-      if (event.button === 0) {
-        mouseLeftDownRef.current = true;
-      }
-      onMouseDownRef.current?.({
-        deltaTime: 0,
-        time: elapsedTimeRef.current,
-        resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current,
-        mouseNormalized: mouseNormalizedRef.current,
-        mouseLeftDown: mouseLeftDownRef.current
-      });
-    };
-    const handleMouseUp = (event) => {
-      if (event.button === 0) {
-        mouseLeftDownRef.current = false;
-      }
-      onMouseUpRef.current?.({
-        deltaTime: 0,
-        time: elapsedTimeRef.current,
-        resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current,
-        mouseNormalized: mouseNormalizedRef.current,
-        mouseLeftDown: mouseLeftDownRef.current
-      });
-    };
-    const handleClick = () => {
-      if (!onClickRef.current)
-        return;
-      onClickRef.current({
-        deltaTime: 0,
-        time: elapsedTimeRef.current,
-        resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current,
-        mouseNormalized: mouseNormalizedRef.current,
-        mouseLeftDown: mouseLeftDownRef.current
-      });
-    };
-    const handleMouseWheel = (event) => {
-      onMouseWheelRef.current?.({
-        deltaTime: 0,
-        time: elapsedTimeRef.current,
-        resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current,
-        mouseNormalized: mouseNormalizedRef.current,
-        mouseLeftDown: mouseLeftDownRef.current
-      }, event.deltaY);
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mousedown", handleMouseDown);
-    window.addEventListener("mouseup", handleMouseUp);
-    canvas.addEventListener("click", handleClick);
-    window.addEventListener("wheel", handleMouseWheel);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updateRect);
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mousedown", handleMouseDown);
-      window.removeEventListener("mouseup", handleMouseUp);
-      canvas.removeEventListener("click", handleClick);
-      window.removeEventListener("wheel", handleMouseWheel);
-    };
-  }, []);
-  return { canvasRef, mouseRef };
-}
-
-// src/ReactShader.tsx
-var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
-var DEFAULT_VERTEX = `#version 300 es
-precision highp float;
-in vec2 a_position;
-
-void main() {
-  gl_Position = vec4(a_position, 0.0, 1.0);
-}
-`;
-var FULLSCREEN_CONTAINER_STYLE2 = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  width: "100vw",
-  height: "100vh",
-  zIndex: 9000
-};
-var DEFAULT_CONTAINER_STYLE2 = {
-  position: "relative",
-  width: "100%",
-  height: "100%"
-};
-var CANVAS_STYLE2 = {
-  display: "block",
-  width: "100%",
-  height: "100%"
-};
-function ReactShader({
-  className,
-  fragment,
-  vertex = DEFAULT_VERTEX,
-  uniforms,
-  fullscreen = false,
-  timeScale = 1,
-  onFrame,
-  onClick,
-  onMouseMove,
-  onMouseDown,
-  onMouseUp,
-  onMouseWheel
-}) {
-  const [error, setError] = import_react5.useState(null);
-  const handleError = import_react5.useCallback((err) => {
-    setError(err.message);
-    console.error("ReactShader error:", err);
-  }, []);
-  import_react5.useEffect(() => {
-    setError(null);
-  }, [fragment, vertex]);
-  const { canvasRef } = useWebGL({
-    fragment,
-    vertex,
-    uniforms,
-    onError: handleError,
-    onFrame,
-    onClick,
-    onMouseMove,
-    onMouseDown,
-    onMouseUp,
-    onMouseWheel,
-    timeScale
-  });
-  const containerStyle = import_react5.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE2 : DEFAULT_CONTAINER_STYLE2, [fullscreen]);
-  if (error) {
-    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
-      className,
-      style: {
-        ...containerStyle,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#1a1a1a",
-        color: "#ff6b6b",
-        fontFamily: "monospace",
-        fontSize: "12px",
-        padding: "16px",
-        overflow: "auto",
-        boxSizing: "border-box",
-        width: "100%",
-        height: "100%"
-      },
-      children: /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("pre", {
-        style: { margin: 0, whiteSpace: "pre-wrap" },
-        children: error
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("canvas", {
-    ref: canvasRef,
-    className,
-    style: CANVAS_STYLE2
-  }, undefined, false, undefined, this);
-}
-// src/shaders/color-palette.ts
-function generateColorPaletteFunction(name, paletteString) {
-  const paletteArray = paletteString.replace("[[", "").replace("]]", "").split("] [").map((s) => s.split(" "));
-  return `
-        vec3 ${name}( float t ) {
-          vec3 a = vec3(${paletteArray[0].join(",")});
-          vec3 b = vec3(${paletteArray[1].join(",")});
-          vec3 c = vec3(${paletteArray[2].join(",")});
-          vec3 d = vec3(${paletteArray[3].join(",")});
-          return a + b * cos(6.28318 * (c * t + d));
-        }
-      `;
-}
 // src/shaders/color-palette-gpu.ts
 function generateColorPaletteFunctionGpu(name, paletteString) {
   const paletteArray = paletteString.replace("[[", "").replace("]]", "").split("] [").map((s) => s.split(" "));
@@ -1602,29 +872,6 @@ fn ${name}(t: f32) -> vec3f {
 }
 `;
 }
-// src/shaders/distortion-ripple.ts
-function generateDistortionRippleFunction() {
-  return `
-      vec2 DistortionRipple(vec2 uv, vec2 center, float radius, float intensity, float thickness) {
-        // 1. Calculate vector and distance from center
-        vec2 dir = uv - center;
-        float dist = length(dir);
-        
-        // 2. Create a mask so the ripple only exists near the radius Z
-        // Using smoothstep creates a soft edge for the ripple
-        float mask = smoothstep(radius + thickness, radius, dist) * smoothstep(radius - thickness, radius, dist);
-      
-        // 3. Calculate the displacement amount using a Sine wave
-        // We subtract dist from radius to orient the wave correctly
-        float wave = sin((dist - radius) * 20.0); 
-        
-        // 4. Apply intensity and mask, then offset the UV
-        vec2 offset = normalize(dir) * wave * intensity * mask;
-        
-        return offset;
-      }
-    `;
-}
 // src/shaders/distortion-ripple-gpu.ts
 function generateDistortionRippleFunctionGpu() {
   return `
@@ -1648,40 +895,6 @@ fn DistortionRipple(uv: vec2f, center: vec2f, radius: f32, intensity: f32, thick
 }
 `;
 }
-// src/shaders/scene-circles.ts
-function generateSceneCirclesFunction(paletteString = "[[0.5 0.5 0.5] [0.5 0.5 0.5] [1.0 1.0 1.0] [0.263 0.416 0.557]]") {
-  return `
-        ${generateColorPaletteFunction("circlesPalette", paletteString)}
-
-        vec3 SceneCircles(
-            vec2 uv0,
-            float iterations,
-            float fractMultiplier,
-            float time,
-            float waveLength,
-            float edgeBlur,
-            float contrast
-        ) {
-            vec3 col = vec3(0.0);
-            vec2 uv = uv0;
-        
-            for (float i = 0.0; i < iterations; i++) {
-                uv = fract(uv * fractMultiplier) - 0.5;
-            
-                float d = length(uv) * exp(-length(uv0));
-            
-                vec3 color = circlesPalette(length(uv0) + i * 0.4 + time * 0.4);
-            
-                d = sin(d * waveLength + time) / waveLength;
-                d = abs(d);
-                d = pow(edgeBlur / d, contrast);
-            
-                col += color * d;
-            }
-            return col;
-        }
-    `;
-}
 // src/shaders/scene-circles-gpu.ts
 function generateSceneCirclesFunctionGpu(paletteString = "[[0.5 0.5 0.5] [0.5 0.5 0.5] [1.0 1.0 1.0] [0.263 0.416 0.557]]") {
   return `
@@ -1720,190 +933,6 @@ fn SceneCircles(
 }
 `;
 }
-// src/shaders/simplex-noise.ts
-function generateSimplexNoiseFunction() {
-  return `
-
-    vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-    
-    vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-    
-    float mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-    
-    vec4 permute(vec4 x) { return mod289(((x*34.0)+10.0)*x); }
-    
-    float permute(float x) { return mod289(((x*34.0)+10.0)*x); }
-    
-    vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
-    
-    float taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; }
-    
-    vec4 grad4(float j, vec4 ip) {
-      const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
-      vec4 p,s;
-    
-      p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
-      p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
-      s = vec4(lessThan(p, vec4(0.0)));
-      p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
-    
-      return p;
-    }
-    
-    // (sqrt(5) - 1)/4 = F4, used once below
-    #define F4 0.309016994374947451
-    
-    float SimplexNoise4D(vec4 v) {
-      const vec4  C = vec4( 0.138196601125011,  // (5 - sqrt(5))/20  G4
-                            0.276393202250021,  // 2 * G4
-                            0.414589803375032,  // 3 * G4
-                           -0.447213595499958); // -1 + 4 * G4
-    
-      // First corner
-      vec4 i  = floor(v + dot(v, vec4(F4)) );
-      vec4 x0 = v -   i + dot(i, C.xxxx);
-    
-      // Other corners
-    
-      // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
-      vec4 i0;
-      vec3 isX = step( x0.yzw, x0.xxx );
-      vec3 isYZ = step( x0.zww, x0.yyz );
-      //  i0.x = dot( isX, vec3( 1.0 ) );
-      i0.x = isX.x + isX.y + isX.z;
-      i0.yzw = 1.0 - isX;
-      //  i0.y += dot( isYZ.xy, vec2( 1.0 ) );
-      i0.y += isYZ.x + isYZ.y;
-      i0.zw += 1.0 - isYZ.xy;
-      i0.z += isYZ.z;
-      i0.w += 1.0 - isYZ.z;
-    
-      // i0 now contains the unique values 0,1,2,3 in each channel
-      vec4 i3 = clamp( i0, 0.0, 1.0 );
-      vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
-      vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
-    
-      //  x0 = x0 - 0.0 + 0.0 * C.xxxx
-      //  x1 = x0 - i1  + 1.0 * C.xxxx
-      //  x2 = x0 - i2  + 2.0 * C.xxxx
-      //  x3 = x0 - i3  + 3.0 * C.xxxx
-      //  x4 = x0 - 1.0 + 4.0 * C.xxxx
-      vec4 x1 = x0 - i1 + C.xxxx;
-      vec4 x2 = x0 - i2 + C.yyyy;
-      vec4 x3 = x0 - i3 + C.zzzz;
-      vec4 x4 = x0 + C.wwww;
-    
-      // Permutations
-      i = mod289(i);
-      float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
-      vec4 j1 = permute( permute( permute( permute (
-                 i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
-               + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
-               + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
-               + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
-    
-      // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope
-      // 7*7*6 = 294, which is close to the ring size 17*17 = 289.
-      vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
-    
-      vec4 p0 = grad4(j0,   ip);
-      vec4 p1 = grad4(j1.x, ip);
-      vec4 p2 = grad4(j1.y, ip);
-      vec4 p3 = grad4(j1.z, ip);
-      vec4 p4 = grad4(j1.w, ip);
-    
-      // Normalise gradients
-      vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
-      p0 *= norm.x;
-      p1 *= norm.y;
-      p2 *= norm.z;
-      p3 *= norm.w;
-      p4 *= taylorInvSqrt(dot(p4,p4));
-    
-      // Mix contributions from the five corners
-      vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
-      vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);
-      m0 = m0 * m0;
-      m1 = m1 * m1;
-      return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
-                   + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
-    }
-    
-    float SimplexNoise3D(vec3 v) {
-      const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
-      const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
-    
-      // First corner
-      vec3 i  = floor(v + dot(v, C.yyy) );
-      vec3 x0 =   v - i + dot(i, C.xxx) ;
-    
-      // Other corners
-      vec3 g = step(x0.yzx, x0.xyz);
-      vec3 l = 1.0 - g;
-      vec3 i1 = min( g.xyz, l.zxy );
-      vec3 i2 = max( g.xyz, l.zxy );
-    
-      //   x0 = x0 - 0.0 + 0.0 * C.xxx;
-      //   x1 = x0 - i1  + 1.0 * C.xxx;
-      //   x2 = x0 - i2  + 2.0 * C.xxx;
-      //   x3 = x0 - 1.0 + 3.0 * C.xxx;
-      vec3 x1 = x0 - i1 + C.xxx;
-      vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
-      vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
-    
-      // Permutations
-      i = mod289(i);
-      vec4 p = permute( permute( permute(
-                 i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
-               + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
-               + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
-    
-      // Gradients: 7x7 points over a square, mapped onto an octahedron.
-      // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
-      float n_ = 0.142857142857; // 1.0/7.0
-      vec3  ns = n_ * D.wyz - D.xzx;
-    
-      vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
-    
-      vec4 x_ = floor(j * ns.z);
-      vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
-    
-      vec4 x = x_ *ns.x + ns.yyyy;
-      vec4 y = y_ *ns.x + ns.yyyy;
-      vec4 h = 1.0 - abs(x) - abs(y);
-    
-      vec4 b0 = vec4( x.xy, y.xy );
-      vec4 b1 = vec4( x.zw, y.zw );
-    
-      //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
-      //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
-      vec4 s0 = floor(b0)*2.0 + 1.0;
-      vec4 s1 = floor(b1)*2.0 + 1.0;
-      vec4 sh = -step(h, vec4(0.0));
-    
-      vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
-      vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
-    
-      vec3 p0 = vec3(a0.xy,h.x);
-      vec3 p1 = vec3(a0.zw,h.y);
-      vec3 p2 = vec3(a1.xy,h.z);
-      vec3 p3 = vec3(a1.zw,h.w);
-    
-      // Normalise gradients
-      vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
-      p0 *= norm.x;
-      p1 *= norm.y;
-      p2 *= norm.z;
-      p3 *= norm.w;
-    
-      // Mix final noise value
-      vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
-      m = m * m;
-      return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
-                                    dot(p2,x2), dot(p3,x3) ) );
-    }
-    `;
-}
 // src/shaders/simplex-noise-gpu.ts
 function generateSimplexNoiseFunctionGpu() {
   return `
@@ -2079,15 +1108,3 @@ fn SimplexNoise3D(v: vec3f) -> f32 {
 }
 `;
 }
-// src/shaders/utils.ts
-function generateUtilsFunction() {
-  return `
-    vec2 GetUv(vec2 fragCoord, vec2 resolution) {
-      return (fragCoord - 0.5 * resolution) / resolution.y;
-    }
-
-    vec2 GetMouse(vec2 mouse, vec2 resolution) {
-      return (mouse - 0.5 * resolution) / resolution.y;
-    }
-  `;
-}