react-shadertoy 0.2.0 → 0.3.0

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CSSProperties, RefObject } from 'react';
 
-/** Texture source: URL string for image loading */
-type TextureSource = string;
+/** Texture source: URL string, or an HTML element for dynamic textures */
+type TextureSource = string | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
 /** Texture inputs mapped to Shadertoy channels */
 type TextureInputs = {
     iChannel0?: TextureSource;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CSSProperties, RefObject } from 'react';
 
-/** Texture source: URL string for image loading */
-type TextureSource = string;
+/** Texture source: URL string, or an HTML element for dynamic textures */
+type TextureSource = string | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
 /** Texture inputs mapped to Shadertoy channels */
 type TextureInputs = {
     iChannel0?: TextureSource;

package/dist/index.js

@@ -153,50 +153,159 @@ function dispose(state) {
 }
 
 // src/textures.ts
-function loadImageTexture(gl, url, unit) {
+function isPOT(v) {
+  return (v & v - 1) === 0 && v > 0;
+}
+function initTexture(gl, unit) {
   const texture = gl.createTexture();
   gl.activeTexture(gl.TEXTURE0 + unit);
   gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(
-    gl.TEXTURE_2D,
-    0,
-    gl.RGBA,
-    1,
-    1,
-    0,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
-    new Uint8Array([255, 0, 255, 255])
-  );
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  const state = { texture, width: 1, height: 1, unit, loaded: false };
-  const promise = new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      if (gl.isContextLost()) {
+  return texture;
+}
+function 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) {
+  const texture = initTexture(gl, unit);
+  if (typeof source === "string") {
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([255, 0, 255, 255])
+    );
+    const state2 = {
+      texture,
+      width: 1,
+      height: 1,
+      unit,
+      loaded: false,
+      needsUpdate: false,
+      source
+    };
+    const promise = new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        if (gl.isContextLost()) {
+          resolve();
+          return;
+        }
+        uploadElement(gl, texture, unit, img);
+        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);
+        }
+        state2.width = img.width;
+        state2.height = img.height;
+        state2.loaded = true;
         resolve();
-        return;
-      }
-      gl.activeTexture(gl.TEXTURE0 + unit);
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-      if (isPOT(img.width) && isPOT(img.height)) {
-        gl.generateMipmap(gl.TEXTURE_2D);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
-      }
-      state.width = img.width;
-      state.height = img.height;
-      state.loaded = true;
-      resolve();
+      };
+      img.onerror = () => reject(new Error(`Failed to load texture: ${source}`));
+      img.src = source;
+    });
+    return { state: state2, promise };
+  }
+  if (source instanceof HTMLImageElement) {
+    const state2 = {
+      texture,
+      width: source.naturalWidth || 1,
+      height: source.naturalHeight || 1,
+      unit,
+      loaded: source.complete,
+      needsUpdate: false,
+      source
     };
-    img.onerror = () => reject(new Error(`Failed to load texture: ${url}`));
-    img.src = url;
-  });
-  return { state, promise };
+    if (source.complete && source.naturalWidth > 0) {
+      uploadElement(gl, texture, unit, source);
+      state2.width = source.naturalWidth;
+      state2.height = source.naturalHeight;
+      return { state: state2, promise: null };
+    }
+    const promise = new Promise((resolve, reject) => {
+      source.onload = () => {
+        if (gl.isContextLost()) {
+          resolve();
+          return;
+        }
+        uploadElement(gl, texture, unit, source);
+        state2.width = source.naturalWidth;
+        state2.height = source.naturalHeight;
+        state2.loaded = true;
+        resolve();
+      };
+      source.onerror = () => reject(new Error("Failed to load image element"));
+    });
+    return { state: state2, promise };
+  }
+  if (source instanceof HTMLVideoElement) {
+    const w = source.videoWidth || 1;
+    const h = source.videoHeight || 1;
+    if (source.readyState >= 2) {
+      uploadElement(gl, texture, unit, source);
+    } else {
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        1,
+        1,
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        new Uint8Array([0, 0, 0, 255])
+      );
+    }
+    const state2 = {
+      texture,
+      width: w,
+      height: h,
+      unit,
+      loaded: source.readyState >= 2,
+      needsUpdate: true,
+      source
+    };
+    return { state: state2, promise: null };
+  }
+  uploadElement(gl, texture, unit, source);
+  const state = {
+    texture,
+    width: source.width,
+    height: source.height,
+    unit,
+    loaded: true,
+    needsUpdate: true,
+    source
+  };
+  return { state, promise: null };
+}
+function updateDynamicTextures(gl, textures) {
+  for (const tex of textures) {
+    if (!tex || !tex.needsUpdate || !tex.source) continue;
+    if (tex.source instanceof HTMLVideoElement) {
+      const v = tex.source;
+      if (v.readyState < 2) continue;
+      uploadElement(gl, tex.texture, tex.unit, v);
+      tex.width = v.videoWidth;
+      tex.height = v.videoHeight;
+      tex.loaded = true;
+    } else if (tex.source instanceof HTMLCanvasElement) {
+      uploadElement(gl, tex.texture, tex.unit, tex.source);
+      tex.width = tex.source.width;
+      tex.height = tex.source.height;
+    }
+  }
 }
 function bindTextures(gl, locations, textures) {
   for (let i = 0; i < 4; i++) {
@@ -214,9 +323,6 @@ function disposeTextures(gl, textures) {
     if (tex) gl.deleteTexture(tex.texture);
   }
 }
-function isPOT(v) {
-  return (v & v - 1) === 0 && v > 0;
-}
 
 // src/uniforms.ts
 function updateUniforms(state, delta, speed, mouse) {
@@ -313,10 +419,10 @@ function useShadertoy({
     if (texturesProp) {
       for (let i = 0; i < 4; i++) {
         const src = texturesProp[CHANNEL_KEYS[i]];
-        if (typeof src === "string") {
-          const { state, promise } = loadImageTexture(result.gl, src, i);
+        if (src != null) {
+          const { state, promise } = createTexture(result.gl, src, i);
           result.textures[i] = state;
-          texturePromises.push(promise);
+          if (promise) texturePromises.push(promise);
         }
       }
     }
@@ -342,6 +448,7 @@ function useShadertoy({
       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);

package/dist/index.mjs

@@ -126,50 +126,159 @@ function dispose(state) {
 }
 
 // src/textures.ts
-function loadImageTexture(gl, url, unit) {
+function isPOT(v) {
+  return (v & v - 1) === 0 && v > 0;
+}
+function initTexture(gl, unit) {
   const texture = gl.createTexture();
   gl.activeTexture(gl.TEXTURE0 + unit);
   gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(
-    gl.TEXTURE_2D,
-    0,
-    gl.RGBA,
-    1,
-    1,
-    0,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
-    new Uint8Array([255, 0, 255, 255])
-  );
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  const state = { texture, width: 1, height: 1, unit, loaded: false };
-  const promise = new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      if (gl.isContextLost()) {
+  return texture;
+}
+function 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) {
+  const texture = initTexture(gl, unit);
+  if (typeof source === "string") {
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([255, 0, 255, 255])
+    );
+    const state2 = {
+      texture,
+      width: 1,
+      height: 1,
+      unit,
+      loaded: false,
+      needsUpdate: false,
+      source
+    };
+    const promise = new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        if (gl.isContextLost()) {
+          resolve();
+          return;
+        }
+        uploadElement(gl, texture, unit, img);
+        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);
+        }
+        state2.width = img.width;
+        state2.height = img.height;
+        state2.loaded = true;
         resolve();
-        return;
-      }
-      gl.activeTexture(gl.TEXTURE0 + unit);
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-      if (isPOT(img.width) && isPOT(img.height)) {
-        gl.generateMipmap(gl.TEXTURE_2D);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
-      }
-      state.width = img.width;
-      state.height = img.height;
-      state.loaded = true;
-      resolve();
+      };
+      img.onerror = () => reject(new Error(`Failed to load texture: ${source}`));
+      img.src = source;
+    });
+    return { state: state2, promise };
+  }
+  if (source instanceof HTMLImageElement) {
+    const state2 = {
+      texture,
+      width: source.naturalWidth || 1,
+      height: source.naturalHeight || 1,
+      unit,
+      loaded: source.complete,
+      needsUpdate: false,
+      source
     };
-    img.onerror = () => reject(new Error(`Failed to load texture: ${url}`));
-    img.src = url;
-  });
-  return { state, promise };
+    if (source.complete && source.naturalWidth > 0) {
+      uploadElement(gl, texture, unit, source);
+      state2.width = source.naturalWidth;
+      state2.height = source.naturalHeight;
+      return { state: state2, promise: null };
+    }
+    const promise = new Promise((resolve, reject) => {
+      source.onload = () => {
+        if (gl.isContextLost()) {
+          resolve();
+          return;
+        }
+        uploadElement(gl, texture, unit, source);
+        state2.width = source.naturalWidth;
+        state2.height = source.naturalHeight;
+        state2.loaded = true;
+        resolve();
+      };
+      source.onerror = () => reject(new Error("Failed to load image element"));
+    });
+    return { state: state2, promise };
+  }
+  if (source instanceof HTMLVideoElement) {
+    const w = source.videoWidth || 1;
+    const h = source.videoHeight || 1;
+    if (source.readyState >= 2) {
+      uploadElement(gl, texture, unit, source);
+    } else {
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        1,
+        1,
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        new Uint8Array([0, 0, 0, 255])
+      );
+    }
+    const state2 = {
+      texture,
+      width: w,
+      height: h,
+      unit,
+      loaded: source.readyState >= 2,
+      needsUpdate: true,
+      source
+    };
+    return { state: state2, promise: null };
+  }
+  uploadElement(gl, texture, unit, source);
+  const state = {
+    texture,
+    width: source.width,
+    height: source.height,
+    unit,
+    loaded: true,
+    needsUpdate: true,
+    source
+  };
+  return { state, promise: null };
+}
+function updateDynamicTextures(gl, textures) {
+  for (const tex of textures) {
+    if (!tex || !tex.needsUpdate || !tex.source) continue;
+    if (tex.source instanceof HTMLVideoElement) {
+      const v = tex.source;
+      if (v.readyState < 2) continue;
+      uploadElement(gl, tex.texture, tex.unit, v);
+      tex.width = v.videoWidth;
+      tex.height = v.videoHeight;
+      tex.loaded = true;
+    } else if (tex.source instanceof HTMLCanvasElement) {
+      uploadElement(gl, tex.texture, tex.unit, tex.source);
+      tex.width = tex.source.width;
+      tex.height = tex.source.height;
+    }
+  }
 }
 function bindTextures(gl, locations, textures) {
   for (let i = 0; i < 4; i++) {
@@ -187,9 +296,6 @@ function disposeTextures(gl, textures) {
     if (tex) gl.deleteTexture(tex.texture);
   }
 }
-function isPOT(v) {
-  return (v & v - 1) === 0 && v > 0;
-}
 
 // src/uniforms.ts
 function updateUniforms(state, delta, speed, mouse) {
@@ -286,10 +392,10 @@ function useShadertoy({
     if (texturesProp) {
       for (let i = 0; i < 4; i++) {
         const src = texturesProp[CHANNEL_KEYS[i]];
-        if (typeof src === "string") {
-          const { state, promise } = loadImageTexture(result.gl, src, i);
+        if (src != null) {
+          const { state, promise } = createTexture(result.gl, src, i);
           result.textures[i] = state;
-          texturePromises.push(promise);
+          if (promise) texturePromises.push(promise);
         }
       }
     }
@@ -315,6 +421,7 @@ function useShadertoy({
       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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-shadertoy",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Run Shadertoy GLSL shaders in React. Copy-paste and it works.",
   "author": "Wrennly (https://github.com/wrennly)",
   "license": "MIT",