@remotion/transitions 4.0.496 → 4.0.498

package/dist/esm/zoom-in-out.mjs

@@ -7,7 +7,7 @@ import {
   Internals,
   useDelayRender
 } from "remotion";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var HtmlInCanvasPresentation = ({
   children,
   onElementImage,
@@ -23,6 +23,7 @@ var HtmlInCanvasPresentation = ({
     throw new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
   }
   const canvasRef = useRef(null);
+  const outputCanvasRef = useRef(null);
   const canvasSubtreeStyle = useMemo(() => {
     return {
       width: "100%",
@@ -34,7 +35,21 @@ var HtmlInCanvasPresentation = ({
       bottom: 0
     };
   }, []);
-  const [offscreenCanvas] = useState(() => new OffscreenCanvas(1, 1));
+  const outputCanvasStyle = useMemo(() => {
+    return {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    };
+  }, []);
+  const captureCanvasRef = useRef(null);
+  const captureContextRef = useRef(null);
+  const [shaderCanvas] = useState(() => new OffscreenCanvas(1, 1));
   const passedPropsRef = useRef(passedProps);
   passedPropsRef.current = passedProps;
   const memoizedEffects = Internals.useMemoizedEffects({
@@ -43,33 +58,58 @@ var HtmlInCanvasPresentation = ({
   });
   const effectsRef = useRef(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const [instance] = useState(() => shader(offscreenCanvas));
+  const [instance] = useState(() => shader(shaderCanvas));
   useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return () => {
+        instance.cleanup();
+      };
+    }
+    const captureCanvas = canvas.transferControlToOffscreen();
+    const captureContext = captureCanvas.getContext("2d");
+    if (!captureContext) {
+      throw new Error("Failed to create capture canvas context");
+    }
+    captureCanvasRef.current = captureCanvas;
+    captureContextRef.current = captureContext;
     return () => {
       instance.cleanup();
+      captureCanvasRef.current = null;
+      captureContextRef.current = null;
     };
-  }, [offscreenCanvas, instance]);
+  }, [instance]);
   const chainState = Internals.useEffectChainState();
   const { delayRender, continueRender } = useDelayRender();
   const draw = useCallback(async (prevImage, nextImage, progress) => {
-    if (!canvasRef.current) {
+    const outputCanvas = outputCanvasRef.current;
+    if (!outputCanvas) {
       throw new Error("Canvas not found");
     }
     const handle = delayRender("onPaint");
+    const clearOutput = () => {
+      const context = outputCanvas.getContext("2d");
+      if (!context) {
+        throw new Error("Failed to create output canvas context");
+      }
+      context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    };
     if (!prevImage && !nextImage) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
     const width = prevImage?.width ?? nextImage?.width ?? 0;
     const height = prevImage?.height ?? nextImage?.height ?? 0;
     if (width === 0 || height === 0) {
-      continueRender(handle);
       instance.clear();
+      clearOutput();
+      continueRender(handle);
       return;
     }
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
+    shaderCanvas.width = width;
+    shaderCanvas.height = height;
     instance.draw({
       prevImage,
       nextImage,
@@ -80,14 +120,14 @@ var HtmlInCanvasPresentation = ({
     });
     await Internals.runEffectChain({
       state: chainState.get(width, height),
-      source: offscreenCanvas,
+      source: shaderCanvas,
       effects: effectsRef.current ?? [],
       width,
       height,
-      output: canvasRef.current
+      output: outputCanvas
     });
     continueRender(handle);
-  }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+  }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
   const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
   useLayoutEffect(() => {
     if (passThrough) {
@@ -100,11 +140,19 @@ var HtmlInCanvasPresentation = ({
     canvas.layoutSubtree = true;
     const onPaint = () => {
       const firstChild = canvas.firstChild;
-      if (!firstChild) {
+      const captureCanvas = captureCanvasRef.current;
+      const captureContext = captureContextRef.current;
+      if (!firstChild || !captureCanvas || !captureContext) {
         return;
       }
       const elementImage = canvas.captureElementImage(firstChild);
-      onElementImage(elementImage, draw);
+      try {
+        captureContext.reset();
+        captureContext.drawElementImage(elementImage, 0, 0);
+      } finally {
+        elementImage.close();
+      }
+      onElementImage(captureCanvas, draw);
     };
     canvas.addEventListener("paint", onPaint);
     return () => {
@@ -138,20 +186,39 @@ var HtmlInCanvasPresentation = ({
       return;
     }
     const observer = new ResizeObserver(([entry]) => {
-      canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
-      canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+      const outputCanvas = outputCanvasRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      if (!outputCanvas || !captureCanvas) {
+        return;
+      }
+      const width = entry.devicePixelContentBoxSize[0].inlineSize;
+      const height = entry.devicePixelContentBoxSize[0].blockSize;
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      outputCanvas.width = width;
+      outputCanvas.height = height;
+      canvas.requestPaint?.();
     });
     observer.observe(canvas, { box: "device-pixel-content-box" });
+    return () => {
+      observer.disconnect();
+    };
   }, [passThrough]);
   if (passThrough) {
     return children;
   }
-  return /* @__PURE__ */ jsx(AbsoluteFill, {
-    children: /* @__PURE__ */ jsx("canvas", {
-      ref: canvasRef,
-      style: canvasSubtreeStyle,
-      children
-    })
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    children: [
+      /* @__PURE__ */ jsx("canvas", {
+        ref: canvasRef,
+        style: canvasSubtreeStyle,
+        children
+      }),
+      /* @__PURE__ */ jsx("canvas", {
+        ref: outputCanvasRef,
+        style: outputCanvasStyle
+      })
+    ]
   });
 };
 var makeHtmlInCanvasPresentation = (shader) => {
@@ -173,6 +240,11 @@ var makeHtmlInCanvasPresentation = (shader) => {
   };
 };
 
+// src/presentations/upload-element-image.ts
+var uploadElementImage = (gl, elementImage) => {
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+};
+
 // src/presentations/zoom-in-out.tsx
 var VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
@@ -302,13 +374,13 @@ var zoomInOutShader = (canvas) => {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, prevTex);
     if (prevImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+      uploadElementImage(gl, prevImage);
     }
     gl.uniform1i(uPrev, 0);
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, nextTex);
     if (nextImage) {
-      gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+      uploadElementImage(gl, nextImage);
     }
     gl.uniform1i(uNext, 1);
     gl.uniform1f(uTime, effectiveTime);

package/dist/html-in-canvas-presentation.d.ts

@@ -5,8 +5,8 @@ export declare const HtmlInCanvasPresentation: <TPassedProps extends Record<stri
     readonly effects?: EffectsProp | undefined;
 }) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 export type HtmlInCanvasShaderDrawParams<Props> = {
-    prevImage: ElementImage | null;
-    nextImage: ElementImage | null;
+    prevImage: OffscreenCanvas | null;
+    nextImage: OffscreenCanvas | null;
     width: number;
     height: number;
     time: number;

package/dist/html-in-canvas-presentation.js

@@ -9,6 +9,7 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
         throw new Error(remotion_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE);
     }
     const canvasRef = (0, react_1.useRef)(null);
+    const outputCanvasRef = (0, react_1.useRef)(null);
     const canvasSubtreeStyle = (0, react_1.useMemo)(() => {
         return {
             width: '100%',
@@ -20,7 +21,21 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
             bottom: 0,
         };
     }, []);
-    const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
+    const outputCanvasStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            pointerEvents: 'none',
+        };
+    }, []);
+    const captureCanvasRef = (0, react_1.useRef)(null);
+    const captureContextRef = (0, react_1.useRef)(null);
+    const [shaderCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
     const passedPropsRef = (0, react_1.useRef)(passedProps);
     passedPropsRef.current = passedProps;
     const memoizedEffects = remotion_1.Internals.useMemoizedEffects({
@@ -29,34 +44,59 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
     });
     const effectsRef = (0, react_1.useRef)(memoizedEffects);
     effectsRef.current = memoizedEffects;
-    const [instance] = (0, react_1.useState)(() => shader(offscreenCanvas));
+    const [instance] = (0, react_1.useState)(() => shader(shaderCanvas));
     (0, react_1.useLayoutEffect)(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return () => {
+                instance.cleanup();
+            };
+        }
+        const captureCanvas = canvas.transferControlToOffscreen();
+        const captureContext = captureCanvas.getContext('2d');
+        if (!captureContext) {
+            throw new Error('Failed to create capture canvas context');
+        }
+        captureCanvasRef.current = captureCanvas;
+        captureContextRef.current = captureContext;
         return () => {
             instance.cleanup();
+            captureCanvasRef.current = null;
+            captureContextRef.current = null;
         };
-    }, [offscreenCanvas, instance]);
+    }, [instance]);
     const chainState = remotion_1.Internals.useEffectChainState();
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     const draw = (0, react_1.useCallback)(async (prevImage, nextImage, progress) => {
         var _a, _b, _c, _d, _e;
-        if (!canvasRef.current) {
+        const outputCanvas = outputCanvasRef.current;
+        if (!outputCanvas) {
             throw new Error('Canvas not found');
         }
         const handle = delayRender('onPaint');
+        const clearOutput = () => {
+            const context = outputCanvas.getContext('2d');
+            if (!context) {
+                throw new Error('Failed to create output canvas context');
+            }
+            context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+        };
         if (!prevImage && !nextImage) {
-            continueRender(handle);
             instance.clear();
+            clearOutput();
+            continueRender(handle);
             return;
         }
         const width = (_b = (_a = prevImage === null || prevImage === void 0 ? void 0 : prevImage.width) !== null && _a !== void 0 ? _a : nextImage === null || nextImage === void 0 ? void 0 : nextImage.width) !== null && _b !== void 0 ? _b : 0;
         const height = (_d = (_c = prevImage === null || prevImage === void 0 ? void 0 : prevImage.height) !== null && _c !== void 0 ? _c : nextImage === null || nextImage === void 0 ? void 0 : nextImage.height) !== null && _d !== void 0 ? _d : 0;
         if (width === 0 || height === 0) {
-            continueRender(handle);
             instance.clear();
+            clearOutput();
+            continueRender(handle);
             return;
         }
-        offscreenCanvas.width = width;
-        offscreenCanvas.height = height;
+        shaderCanvas.width = width;
+        shaderCanvas.height = height;
         instance.draw({
             prevImage,
             nextImage,
@@ -67,14 +107,14 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
         });
         await remotion_1.Internals.runEffectChain({
             state: chainState.get(width, height),
-            source: offscreenCanvas,
+            source: shaderCanvas,
             effects: (_e = effectsRef.current) !== null && _e !== void 0 ? _e : [],
             width,
             height,
-            output: canvasRef.current,
+            output: outputCanvas,
         });
         continueRender(handle);
-    }, [chainState, instance, offscreenCanvas, continueRender, delayRender]);
+    }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
     const passThrough = bothEnteringAndExiting && presentationDirection === 'exiting';
     (0, react_1.useLayoutEffect)(() => {
         if (passThrough) {
@@ -87,11 +127,20 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
         canvas.layoutSubtree = true;
         const onPaint = () => {
             const firstChild = canvas.firstChild;
-            if (!firstChild) {
+            const captureCanvas = captureCanvasRef.current;
+            const captureContext = captureContextRef.current;
+            if (!firstChild || !captureCanvas || !captureContext) {
                 return;
             }
             const elementImage = canvas.captureElementImage(firstChild);
-            onElementImage(elementImage, draw);
+            try {
+                captureContext.reset();
+                captureContext.drawElementImage(elementImage, 0, 0);
+            }
+            finally {
+                elementImage.close();
+            }
+            onElementImage(captureCanvas, draw);
         };
         canvas.addEventListener('paint', onPaint);
         return () => {
@@ -127,15 +176,31 @@ const HtmlInCanvasPresentation = ({ children, onElementImage, onUnmount, present
         }
         // Size the canvas grid to match the device scale factor to prevent blurriness.
         const observer = new ResizeObserver(([entry]) => {
-            canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
-            canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
+            var _a;
+            const outputCanvas = outputCanvasRef.current;
+            const captureCanvas = captureCanvasRef.current;
+            if (!outputCanvas || !captureCanvas) {
+                return;
+            }
+            const width = entry.devicePixelContentBoxSize[0].inlineSize;
+            const height = entry.devicePixelContentBoxSize[0].blockSize;
+            captureCanvas.width = width;
+            captureCanvas.height = height;
+            outputCanvas.width = width;
+            outputCanvas.height = height;
+            (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
         });
         observer.observe(canvas, { box: 'device-pixel-content-box' });
+        return () => {
+            observer.disconnect();
+        };
     }, [passThrough]);
     if (passThrough) {
         return children;
     }
-    return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, style: canvasSubtreeStyle, children: children }) }));
+    return (jsx_runtime_1.jsxs(remotion_1.AbsoluteFill, { children: [
+            jsx_runtime_1.jsx("canvas", { ref: canvasRef, style: canvasSubtreeStyle, children: children }), jsx_runtime_1.jsx("canvas", { ref: outputCanvasRef, style: outputCanvasStyle })
+        ] }));
 };
 exports.HtmlInCanvasPresentation = HtmlInCanvasPresentation;
 const makeHtmlInCanvasPresentation = (shader) => {

package/dist/presentations/book-flip.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bookFlip = exports.bookFlipShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const DIRECTION_FROM_LEFT = 0;
 const DIRECTION_FROM_RIGHT = 1;
 const DIRECTION_FROM_TOP = 2;
@@ -232,13 +233,13 @@ const bookFlipShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/cross-zoom.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.crossZoom = exports.crossZoomShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const DEFAULT_STRENGTH = 0.4;
 const VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
@@ -176,13 +177,13 @@ const crossZoomShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/crosswarp.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.crosswarp = exports.crosswarpShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
 out vec2 v_uv;
@@ -132,13 +133,13 @@ const crosswarpShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/dissolve.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dissolve = exports.dissolveShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const DEFAULT_LINE_WIDTH = 0.1;
 const DEFAULT_SPREAD_COLOR = '#ff0000';
 const DEFAULT_HOT_COLOR = '#e6e633';
@@ -164,13 +165,13 @@ const dissolveShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         const spread = parseHexColor(spreadColor);

package/dist/presentations/dreamy-zoom.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dreamyZoom = exports.dreamyZoomShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const DEFAULT_ROTATION = 6;
 const DEFAULT_SCALE = 1.2;
 const VERTEX_SHADER = `#version 300 es
@@ -144,13 +145,13 @@ const dreamyZoomShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/film-burn.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.filmBurn = exports.filmBurnShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const DEFAULT_SEED = 2.31;
 const VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
@@ -242,13 +243,13 @@ const filmBurnShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/linear-blur.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.linearBlur = exports.linearBlurShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
 out vec2 v_uv;
@@ -141,13 +142,13 @@ const linearBlurShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/ripple.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ripple = exports.rippleShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const DEFAULT_AMPLITUDE = 100.0;
 const DEFAULT_SPEED = 50.0;
 const VERTEX_SHADER = `#version 300 es
@@ -140,13 +141,13 @@ const rippleShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/swap.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.swap = exports.swapShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const DEFAULT_REFLECTION = 0.4;
 const DEFAULT_PERSPECTIVE = 0.2;
 const DEFAULT_DEPTH = 3.0;
@@ -187,13 +188,13 @@ const swapShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);

package/dist/presentations/upload-element-image.d.ts

@@ -0,0 +1 @@
+export declare const uploadElementImage: (gl: WebGL2RenderingContext, elementImage: OffscreenCanvas) => void;

package/dist/presentations/upload-element-image.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadElementImage = void 0;
+const uploadElementImage = (gl, elementImage) => {
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elementImage);
+};
+exports.uploadElementImage = uploadElementImage;

package/dist/presentations/zoom-blur.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.zoomBlur = exports.zoomBlurShader = void 0;
 const html_in_canvas_presentation_1 = require("../html-in-canvas-presentation");
+const upload_element_image_1 = require("./upload-element-image");
 const VERTEX_SHADER = `#version 300 es
 in vec2 a_pos;
 out vec2 v_uv;
@@ -162,13 +163,13 @@ const zoomBlurShader = (canvas) => {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, prevTex);
         if (prevImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prevImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, prevImage);
         }
         gl.uniform1i(uPrev, 0);
         gl.activeTexture(gl.TEXTURE1);
         gl.bindTexture(gl.TEXTURE_2D, nextTex);
         if (nextImage) {
-            gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, nextImage);
+            (0, upload_element_image_1.uploadElementImage)(gl, nextImage);
         }
         gl.uniform1i(uNext, 1);
         gl.uniform1f(uTime, effectiveTime);