@fjandin/react-shader 0.0.11 → 0.0.14

package/dist/ReactShader.d.ts

@@ -1,3 +1,3 @@
 import type { ReactShaderProps } from "./types";
-export declare function ReactShader({ className, fragment, vertex, uniforms, fullscreen, timeScale, onFrame, onClick, onMouseMove, }: ReactShaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReactShader({ className, fragment, vertex, uniforms, fullscreen, timeScale, onFrame, onClick, onMouseMove, onMouseDown, onMouseUp, }: ReactShaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReactShader.d.ts.map

package/dist/ReactShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAgC/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,GACZ,EAAE,gBAAgB,2CAuDlB"}
+{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAgC/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,2CAyDlB"}

package/dist/example/frontend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAwBpB,wBAAgB,GAAG,4CAwFlB"}
+{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAiHpB,wBAAgB,GAAG,4CAgGlB"}

package/dist/example/glsl/texture-demo.glsl.d.ts

@@ -0,0 +1,2 @@
+export declare const textureFragment: string;
+//# sourceMappingURL=texture-demo.glsl.d.ts.map

package/dist/example/glsl/texture-demo.glsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"texture-demo.glsl.d.ts","sourceRoot":"","sources":["../../../src/example/glsl/texture-demo.glsl.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,QAsC3B,CAAA"}

package/dist/hooks/useWebGL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvD,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EAyRhD"}
+{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAKvD,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EAyRhD"}

package/dist/index.cjs

@@ -88,6 +88,147 @@ function createShaderProgram(gl, vertexSource, fragmentSource) {
   }
 }
 
+// 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 isVec2(value) {
@@ -139,8 +280,14 @@ function setUniform(gl, location, value) {
 function getUniformLocation(gl, program, name) {
   return gl.getUniformLocation(program, name);
 }
-function setUniforms(gl, program, uniforms, locationCache) {
+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);
@@ -164,6 +311,9 @@ function createUniformLocationCache() {
   return new Map;
 }
 function getUniformType(value) {
+  if (isTexture(value)) {
+    return "sampler2D";
+  }
   if (typeof value === "number") {
     return "float";
   }
@@ -247,10 +397,12 @@ function initializeWebGL(canvas, vertexSource, fragmentSource, customUniforms) {
     program,
     positionBuffer,
     positionAttributeLocation,
-    uniformLocationCache: createUniformLocationCache()
+    uniformLocationCache: createUniformLocationCache(),
+    textureManager: createTextureManager(gl)
   };
 }
 function cleanupWebGL(gl, state) {
+  cleanupTextures(gl, state.textureManager);
   gl.deleteBuffer(state.positionBuffer);
   gl.deleteProgram(state.program);
 }
@@ -303,7 +455,7 @@ function useWebGL(options) {
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
     elapsedTimeRef.current += deltaTime * timeScaleRef.current;
-    const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
+    const { gl, program, positionAttributeLocation, uniformLocationCache, textureManager } = state;
     const elapsedTime = elapsedTimeRef.current;
     const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
@@ -331,7 +483,7 @@ function useWebGL(options) {
     defaultUniforms.iMouseNormalized = mouseNormalizedRef.current;
     defaultUniforms.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
     defaultUniforms.iResolution = [canvas.width, canvas.height];
-    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache);
+    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache, textureManager);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
     if (onFrameRef.current) {
       onFrameRef.current({
@@ -516,7 +668,9 @@ function ReactShader({
   timeScale = 1,
   onFrame,
   onClick,
-  onMouseMove
+  onMouseMove,
+  onMouseDown,
+  onMouseUp
 }) {
   const [error, setError] = import_react2.useState(null);
   const handleError = import_react2.useCallback((err) => {
@@ -534,6 +688,8 @@ function ReactShader({
     onFrame,
     onClick,
     onMouseMove,
+    onMouseDown,
+    onMouseUp,
     timeScale
   });
   const containerStyle = import_react2.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);

package/dist/index.d.ts

@@ -4,5 +4,5 @@ export { generateDistortionRippleFunction } from "./shaders/distortion-ripple";
 export { generateSceneCirclesFunction } from "./shaders/scene-circles";
 export { generateSimplexNoiseFunction } from "./shaders/simplex-noise";
 export { generateUtilsFunction } from "./shaders/utils";
-export type { DefaultUniforms, FloatArray, FrameInfo, ReactShaderProps, UniformValue, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
+export type { DefaultUniforms, FloatArray, FrameInfo, ReactShaderProps, TextureMagFilter, TextureMinFilter, TextureOptions, TextureSource, TextureWrap, UniformValue, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -48,6 +48,147 @@ function createShaderProgram(gl, vertexSource, fragmentSource) {
   }
 }
 
+// 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 isVec2(value) {
@@ -99,8 +240,14 @@ function setUniform(gl, location, value) {
 function getUniformLocation(gl, program, name) {
   return gl.getUniformLocation(program, name);
 }
-function setUniforms(gl, program, uniforms, locationCache) {
+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);
@@ -124,6 +271,9 @@ function createUniformLocationCache() {
   return new Map;
 }
 function getUniformType(value) {
+  if (isTexture(value)) {
+    return "sampler2D";
+  }
   if (typeof value === "number") {
     return "float";
   }
@@ -207,10 +357,12 @@ function initializeWebGL(canvas, vertexSource, fragmentSource, customUniforms) {
     program,
     positionBuffer,
     positionAttributeLocation,
-    uniformLocationCache: createUniformLocationCache()
+    uniformLocationCache: createUniformLocationCache(),
+    textureManager: createTextureManager(gl)
   };
 }
 function cleanupWebGL(gl, state) {
+  cleanupTextures(gl, state.textureManager);
   gl.deleteBuffer(state.positionBuffer);
   gl.deleteProgram(state.program);
 }
@@ -263,7 +415,7 @@ function useWebGL(options) {
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
     elapsedTimeRef.current += deltaTime * timeScaleRef.current;
-    const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
+    const { gl, program, positionAttributeLocation, uniformLocationCache, textureManager } = state;
     const elapsedTime = elapsedTimeRef.current;
     const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
@@ -291,7 +443,7 @@ function useWebGL(options) {
     defaultUniforms.iMouseNormalized = mouseNormalizedRef.current;
     defaultUniforms.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
     defaultUniforms.iResolution = [canvas.width, canvas.height];
-    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache);
+    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache, textureManager);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
     if (onFrameRef.current) {
       onFrameRef.current({
@@ -476,7 +628,9 @@ function ReactShader({
   timeScale = 1,
   onFrame,
   onClick,
-  onMouseMove
+  onMouseMove,
+  onMouseDown,
+  onMouseUp
 }) {
   const [error, setError] = useState(null);
   const handleError = useCallback2((err) => {
@@ -494,6 +648,8 @@ function ReactShader({
     onFrame,
     onClick,
     onMouseMove,
+    onMouseDown,
+    onMouseUp,
     timeScale
   });
   const containerStyle = useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);

package/dist/types.d.ts

@@ -5,7 +5,19 @@ export type FloatArray = number[];
 export type Vec2Array = Vec2[];
 export type Vec3Array = Vec3[];
 export type Vec4Array = Vec4[];
-export type UniformValue = number | Vec2 | Vec3 | Vec4 | FloatArray | Vec2Array | Vec3Array | Vec4Array;
+export type TextureSource = HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | ImageData | OffscreenCanvas;
+export type TextureWrap = "repeat" | "clamp" | "mirror";
+export type TextureMinFilter = "nearest" | "linear" | "mipmap";
+export type TextureMagFilter = "nearest" | "linear";
+export interface TextureOptions {
+    source: TextureSource;
+    wrapS?: TextureWrap;
+    wrapT?: TextureWrap;
+    minFilter?: TextureMinFilter;
+    magFilter?: TextureMagFilter;
+    flipY?: boolean;
+}
+export type UniformValue = number | Vec2 | Vec3 | Vec4 | FloatArray | Vec2Array | Vec3Array | Vec4Array | TextureSource | TextureOptions;
 export interface FrameInfo {
     deltaTime: number;
     time: number;
@@ -24,6 +36,8 @@ export interface ReactShaderProps {
     onFrame?: (info: FrameInfo) => void;
     onClick?: (info: FrameInfo) => void;
     onMouseMove?: (info: FrameInfo) => void;
+    onMouseDown?: (info: FrameInfo) => void;
+    onMouseUp?: (info: FrameInfo) => void;
 }
 export interface DefaultUniforms {
     iTime: number;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAA;AACjC,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAE9B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAEvG,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,aAAa,EAAE,OAAO,CAAA;CACvB;AACD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACxC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,gBAAgB,EAAE,IAAI,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAA;AACjC,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAE9B,MAAM,MAAM,aAAa,GACrB,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,eAAe,CAAA;AAEnB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACvD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,GACb,cAAc,CAAA;AAElB,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,aAAa,EAAE,OAAO,CAAA;CACvB;AACD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACtC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,gBAAgB,EAAE,IAAI,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}

package/dist/utils/textures.d.ts

@@ -0,0 +1,23 @@
+import type { TextureOptions, TextureSource } from "../types";
+type WebGLContext = WebGLRenderingContext | WebGL2RenderingContext;
+interface TextureEntry {
+    texture: WebGLTexture;
+    unit: number;
+    source: TextureSource;
+}
+export interface TextureManager {
+    cache: Map<string, TextureEntry>;
+    nextUnit: number;
+    maxUnits: number;
+}
+export declare function isTextureSource(value: unknown): value is TextureSource;
+export declare function isTextureOptions(value: unknown): value is TextureOptions;
+export declare function isTexture(value: unknown): value is TextureSource | TextureOptions;
+export declare function createTextureManager(gl: WebGLContext): TextureManager;
+export declare function createTexture(gl: WebGLContext, source: TextureSource, options?: Partial<TextureOptions>): WebGLTexture;
+export declare function updateTexture(gl: WebGLContext, texture: WebGLTexture, source: TextureSource, flipY?: boolean): void;
+export declare function needsVideoUpdate(source: TextureSource): boolean;
+export declare function bindTextureUniform(gl: WebGLContext, program: WebGLProgram, name: string, value: TextureSource | TextureOptions, manager: TextureManager, locationCache: Map<string, WebGLUniformLocation | null>): void;
+export declare function cleanupTextures(gl: WebGLContext, manager: TextureManager): void;
+export {};
+//# sourceMappingURL=textures.d.ts.map

package/dist/utils/textures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textures.d.ts","sourceRoot":"","sources":["../../src/utils/textures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsC,cAAc,EAAE,aAAa,EAAe,MAAM,UAAU,CAAA;AAE9G,KAAK,YAAY,GAAG,qBAAqB,GAAG,sBAAsB,CAAA;AAElE,UAAU,YAAY;IACpB,OAAO,EAAE,YAAY,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,aAAa,CAAA;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,aAAa,CAUtE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,cAAc,CAOxE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,aAAa,GAAG,cAAc,CAEjF;AAmDD,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,YAAY,GAAG,cAAc,CAOrE;AAED,wBAAgB,aAAa,CAC3B,EAAE,EAAE,YAAY,EAChB,MAAM,EAAE,aAAa,EACrB,OAAO,GAAE,OAAO,CAAC,cAAc,CAAM,GACpC,YAAY,CAqCd;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,UAAO,GAAG,IAAI,CAKhH;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,OAAO,CAG/D;AAED,wBAAgB,kBAAkB,CAChC,EAAE,EAAE,YAAY,EAChB,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,aAAa,GAAG,cAAc,EACrC,OAAO,EAAE,cAAc,EACvB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,GACtD,IAAI,CA+CN;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI,CAM/E"}

package/dist/utils/uniforms.d.ts

@@ -1,9 +1,10 @@
 import type { UniformValue } from "../types";
+import { type TextureManager } from "./textures";
 type WebGLContext = WebGLRenderingContext | WebGL2RenderingContext;
 export declare const MAX_ARRAY_LENGTH = 100;
 export declare function setUniform(gl: WebGLContext, location: WebGLUniformLocation | null, value: UniformValue): void;
 export declare function getUniformLocation(gl: WebGLContext, program: WebGLProgram, name: string): WebGLUniformLocation | null;
-export declare function setUniforms(gl: WebGLContext, program: WebGLProgram, uniforms: Record<string, UniformValue>, locationCache: Map<string, WebGLUniformLocation | null>): void;
+export declare function setUniforms(gl: WebGLContext, program: WebGLProgram, uniforms: Record<string, UniformValue>, locationCache: Map<string, WebGLUniformLocation | null>, textureManager?: TextureManager): void;
 export declare function createUniformLocationCache(): Map<string, WebGLUniformLocation | null>;
 export declare function generateUniformDeclarations(uniforms: Record<string, UniformValue>): string;
 export declare function injectUniformDeclarations(shaderSource: string, customUniforms: Record<string, UniformValue> | undefined, defaultUniforms: Record<string, UniformValue>): string;

package/dist/utils/uniforms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uniforms.d.ts","sourceRoot":"","sources":["../../src/utils/uniforms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAqD,MAAM,UAAU,CAAA;AAE3G,KAAK,YAAY,GAAG,qBAAqB,GAAG,sBAAsB,CAAA;AAElE,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAkCnC,wBAAgB,UAAU,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,CAsB7G;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAErH;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,YAAY,EAChB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EACtC,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,GACtD,IAAI,CAsBN;AAED,wBAAgB,0BAA0B,IAAI,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,CAErF;AA8BD,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,MAAM,CAa1F;AAID,wBAAgB,yBAAyB,CACvC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,SAAS,EACxD,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAC5C,MAAM,CAQR"}
+{"version":3,"file":"uniforms.d.ts","sourceRoot":"","sources":["../../src/utils/uniforms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAqD,MAAM,UAAU,CAAA;AAC3G,OAAO,EAAiC,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA;AAE/E,KAAK,YAAY,GAAG,qBAAqB,GAAG,sBAAsB,CAAA;AAElE,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAkCnC,wBAAgB,UAAU,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,CAsB7G;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAErH;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,YAAY,EAChB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EACtC,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,EACvD,cAAc,CAAC,EAAE,cAAc,GAC9B,IAAI,CA8BN;AAED,wBAAgB,0BAA0B,IAAI,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,CAErF;AAiCD,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,MAAM,CAa1F;AAID,wBAAgB,yBAAyB,CACvC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,SAAS,EACxD,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAC5C,MAAM,CAQR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fjandin/react-shader",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "React component for rendering WebGL shaders",
   "type": "module",
   "main": "./dist/index.cjs",