@remotion/three 4.0.501 → 4.0.503

package/dist/cjs/ThreeCanvas.d.ts

@@ -5,4 +5,13 @@ export type ThreeCanvasProps = React.ComponentProps<typeof Canvas> & {
     readonly height: number;
     readonly children: React.ReactNode;
 };
+export type ThreeCanvasFrameRendererProps = {
+    readonly onRendered: () => void;
+};
+type ThreeCanvasInternalsProps = ThreeCanvasProps & {
+    readonly FrameRenderer: React.ComponentType<ThreeCanvasFrameRendererProps>;
+    readonly advanceOnCreated: boolean;
+};
+export declare const ThreeCanvasInternals: (props: ThreeCanvasInternalsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ThreeCanvas: (props: ThreeCanvasProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/ThreeCanvas.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThreeCanvas = void 0;
+exports.ThreeCanvas = exports.ThreeCanvasInternals = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const fiber_1 = require("@react-three/fiber");
 const react_1 = require("react");
@@ -17,7 +17,7 @@ const Scale = ({ width, height, }) => {
     }, [setSize, width, height, set]);
     return null;
 };
-const ManualFrameRenderer = ({ onRendered, }) => {
+const ManualFrameRenderer = ({ onRendered }) => {
     const { advance } = (0, fiber_1.useThree)();
     const frame = (0, remotion_1.useCurrentFrame)();
     (0, react_1.useEffect)(() => {
@@ -26,12 +26,8 @@ const ManualFrameRenderer = ({ onRendered, }) => {
     }, [frame, advance, onRendered]);
     return null;
 };
-/*
- * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotion's useCurrentFrame().
- * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
- */
-const ThreeCanvas = (props) => {
-    const { children, width, height, style, frameloop, onCreated, ...rest } = props;
+const ThreeCanvasInternals = (props) => {
+    const { children, width, height, style, frameloop, onCreated, FrameRenderer, advanceOnCreated, ...rest } = props;
     const { isRendering } = (0, remotion_1.useRemotionEnvironment)();
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     const contexts = remotion_1.Internals.useRemotionContexts();
@@ -46,12 +42,12 @@ const ThreeCanvas = (props) => {
         ...style,
     };
     const remotion_onCreated = (0, react_1.useCallback)((state) => {
-        if (isRendering) {
+        if (isRendering && advanceOnCreated) {
             state.advance(performance.now());
         }
         continueRender(waitForCreated);
         onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
-    }, [onCreated, waitForCreated, continueRender, isRendering]);
+    }, [onCreated, waitForCreated, continueRender, isRendering, advanceOnCreated]);
     (0, react_1.useLayoutEffect)(() => {
         if (!isRendering || frame === 0) {
             return;
@@ -70,7 +66,15 @@ const ThreeCanvas = (props) => {
         }
     }, [continueRender]);
     return (jsx_runtime_1.jsx(SuspenseLoader_1.SuspenseLoader, { children: jsx_runtime_1.jsxs(fiber_1.Canvas, { style: actualStyle, ...rest, frameloop: isRendering ? 'never' : (frameloop !== null && frameloop !== void 0 ? frameloop : 'always'), onCreated: remotion_onCreated, children: [
-                jsx_runtime_1.jsx(Scale, { width: width, height: height }), jsx_runtime_1.jsxs(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: [isRendering && jsx_runtime_1.jsx(ManualFrameRenderer, { onRendered: handleRendered }), children] })
+                jsx_runtime_1.jsx(Scale, { width: width, height: height }), jsx_runtime_1.jsxs(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: [isRendering && jsx_runtime_1.jsx(FrameRenderer, { onRendered: handleRendered }), children] })
             ] }) }));
 };
+exports.ThreeCanvasInternals = ThreeCanvasInternals;
+/*
+ * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotion's useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
+ */
+const ThreeCanvas = (props) => {
+    return (jsx_runtime_1.jsx(exports.ThreeCanvasInternals, { ...props, FrameRenderer: ManualFrameRenderer, advanceOnCreated: true }));
+};
 exports.ThreeCanvas = ThreeCanvas;

package/dist/cjs/webgpu.d.ts

@@ -0,0 +1,3 @@
+import type { ThreeCanvasProps } from './ThreeCanvas';
+export type ThreeWebGPUCanvasProps = Omit<ThreeCanvasProps, 'gl'>;
+export declare const ThreeWebGPUCanvas: (props: ThreeWebGPUCanvasProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/webgpu.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreeWebGPUCanvas = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fiber_1 = require("@react-three/fiber");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const webgpu_1 = require("three/webgpu");
+const ThreeCanvas_1 = require("./ThreeCanvas");
+const waitForGpu = async (renderer) => {
+    var _a, _b, _c;
+    await ((_c = (_b = (_a = renderer.backend) === null || _a === void 0 ? void 0 : _a.device) === null || _b === void 0 ? void 0 : _b.queue) === null || _c === void 0 ? void 0 : _c.onSubmittedWorkDone());
+};
+const WebGPUFrameRenderer = ({ onRendered }) => {
+    const { advance, camera, gl, scene } = (0, fiber_1.useThree)();
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const { cancelRender, continueRender, delayRender } = (0, remotion_1.useDelayRender)();
+    const initializationPromise = (0, react_1.useRef)(null);
+    const frameDelayHandle = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        frameDelayHandle.current = delayRender(`Waiting for WebGPU to render frame ${frame}`);
+        return () => {
+            if (frameDelayHandle.current !== null) {
+                continueRender(frameDelayHandle.current);
+                frameDelayHandle.current = null;
+            }
+        };
+    }, [continueRender, delayRender, frame]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        const renderFrame = async () => {
+            var _a;
+            const renderer = gl;
+            if (!renderer.isWebGPURenderer) {
+                throw new Error('<ThreeWebGPUCanvas> expected a Three.js WebGPURenderer.');
+            }
+            (_a = initializationPromise.current) !== null && _a !== void 0 ? _a : (initializationPromise.current = (async () => {
+                await renderer.compileAsync(scene, camera);
+                // The first WebGPU render initializes material and lighting node bindings
+                // which compileAsync() alone does not make ready for frame capture.
+                await renderer.renderAsync(scene, camera);
+                await waitForGpu(renderer);
+            })());
+            await initializationPromise.current;
+            if (cancelled) {
+                return;
+            }
+            advance(performance.now());
+            await waitForGpu(renderer);
+            if (cancelled) {
+                return;
+            }
+            if (frameDelayHandle.current !== null) {
+                continueRender(frameDelayHandle.current);
+                frameDelayHandle.current = null;
+            }
+            onRendered();
+        };
+        renderFrame().catch((error) => {
+            if (!cancelled) {
+                cancelRender(error);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        advance,
+        camera,
+        cancelRender,
+        continueRender,
+        frame,
+        gl,
+        onRendered,
+        scene,
+    ]);
+    return null;
+};
+const createWebGPURenderer = async (props) => {
+    const renderer = new webgpu_1.WebGPURenderer({
+        alpha: props.alpha,
+        antialias: props.antialias,
+        canvas: props.canvas,
+        depth: props.depth,
+        logarithmicDepthBuffer: props.logarithmicDepthBuffer,
+        powerPreference: props.powerPreference === 'default' ? undefined : props.powerPreference,
+        stencil: props.stencil,
+    });
+    await renderer.init();
+    return renderer;
+};
+/*
+ * @description A wrapper for React Three Fiber's <Canvas /> which uses Three.js's WebGPURenderer and synchronizes with Remotion's useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/three-webgpu-canvas)
+ */
+const ThreeWebGPUCanvas = (props) => {
+    return (jsx_runtime_1.jsx(ThreeCanvas_1.ThreeCanvasInternals, { ...props, gl: createWebGPURenderer, FrameRenderer: WebGPUFrameRenderer, advanceOnCreated: false }));
+};
+exports.ThreeWebGPUCanvas = ThreeWebGPUCanvas;

package/dist/esm/index.mjs

@@ -80,9 +80,7 @@ var Scale = ({
   }, [setSize, width, height, set]);
   return null;
 };
-var ManualFrameRenderer = ({
-  onRendered
-}) => {
+var ManualFrameRenderer = ({ onRendered }) => {
   const { advance } = useThree();
   const frame = useCurrentFrame();
   useEffect(() => {
@@ -91,8 +89,18 @@ var ManualFrameRenderer = ({
   }, [frame, advance, onRendered]);
   return null;
 };
-var ThreeCanvas = (props) => {
-  const { children, width, height, style, frameloop, onCreated, ...rest } = props;
+var ThreeCanvasInternals = (props) => {
+  const {
+    children,
+    width,
+    height,
+    style,
+    frameloop,
+    onCreated,
+    FrameRenderer,
+    advanceOnCreated,
+    ...rest
+  } = props;
   const { isRendering } = useRemotionEnvironment();
   const { delayRender, continueRender } = useDelayRender2();
   const contexts = Internals.useRemotionContexts();
@@ -107,12 +115,12 @@ var ThreeCanvas = (props) => {
     ...style
   };
   const remotion_onCreated = useCallback((state) => {
-    if (isRendering) {
+    if (isRendering && advanceOnCreated) {
       state.advance(performance.now());
     }
     continueRender(waitForCreated);
     onCreated?.(state);
-  }, [onCreated, waitForCreated, continueRender, isRendering]);
+  }, [onCreated, waitForCreated, continueRender, isRendering, advanceOnCreated]);
   useLayoutEffect2(() => {
     if (!isRendering || frame === 0) {
       return;
@@ -144,7 +152,7 @@ var ThreeCanvas = (props) => {
         /* @__PURE__ */ jsxs(Internals.RemotionContextProvider, {
           contexts,
           children: [
-            isRendering && /* @__PURE__ */ jsx2(ManualFrameRenderer, {
+            isRendering && /* @__PURE__ */ jsx2(FrameRenderer, {
               onRendered: handleRendered
             }),
             children
@@ -154,6 +162,13 @@ var ThreeCanvas = (props) => {
     })
   });
 };
+var ThreeCanvas = (props) => {
+  return /* @__PURE__ */ jsx2(ThreeCanvasInternals, {
+    ...props,
+    FrameRenderer: ManualFrameRenderer,
+    advanceOnCreated: true
+  });
+};
 // src/use-offthread-video-texture.ts
 import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect3, useMemo, useState as useState2 } from "react";
 import {

package/dist/esm/webgpu.mjs

@@ -0,0 +1,269 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/webgpu.tsx
+import { useThree as useThree2 } from "@react-three/fiber";
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect3, useRef as useRef2 } from "react";
+import { useCurrentFrame as useCurrentFrame2, useDelayRender as useDelayRender3 } from "remotion";
+import { WebGPURenderer } from "three/webgpu";
+
+// src/ThreeCanvas.tsx
+import { Canvas, useThree } from "@react-three/fiber";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect as useLayoutEffect2,
+  useRef,
+  useState
+} from "react";
+import {
+  Internals,
+  useCurrentFrame,
+  useDelayRender as useDelayRender2,
+  useRemotionEnvironment
+} from "remotion";
+
+// src/SuspenseLoader.tsx
+import { Suspense, useLayoutEffect } from "react";
+import { useDelayRender } from "remotion";
+import { jsx } from "react/jsx-runtime";
+var Unblocker = () => {
+  const { delayRender, continueRender } = useDelayRender();
+  if (typeof document !== "undefined") {
+    useLayoutEffect(() => {
+      const handle = delayRender(`Waiting for <Suspense /> of <ThreeCanvas /> to resolve`);
+      return () => {
+        continueRender(handle);
+      };
+    }, [continueRender, delayRender]);
+  }
+  return null;
+};
+var SuspenseLoader = ({ children }) => {
+  return /* @__PURE__ */ jsx(Suspense, {
+    fallback: /* @__PURE__ */ jsx(Unblocker, {}),
+    children
+  });
+};
+
+// src/validate.ts
+import { NoReactInternals } from "remotion/no-react";
+var validateDimension = NoReactInternals.validateDimension;
+
+// src/ThreeCanvas.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Scale = ({
+  width,
+  height
+}) => {
+  const { set, setSize: threeSetSize } = useThree();
+  const [setSize] = useState(() => threeSetSize);
+  useLayoutEffect2(() => {
+    setSize(width, height);
+    set({ setSize: () => null });
+    return () => set({ setSize });
+  }, [setSize, width, height, set]);
+  return null;
+};
+var ManualFrameRenderer = ({ onRendered }) => {
+  const { advance } = useThree();
+  const frame = useCurrentFrame();
+  useEffect(() => {
+    advance(performance.now());
+    onRendered();
+  }, [frame, advance, onRendered]);
+  return null;
+};
+var ThreeCanvasInternals = (props) => {
+  const {
+    children,
+    width,
+    height,
+    style,
+    frameloop,
+    onCreated,
+    FrameRenderer,
+    advanceOnCreated,
+    ...rest
+  } = props;
+  const { isRendering } = useRemotionEnvironment();
+  const { delayRender, continueRender } = useDelayRender2();
+  const contexts = Internals.useRemotionContexts();
+  const frame = useCurrentFrame();
+  const [waitForCreated] = useState(() => delayRender("Waiting for <ThreeCanvas/> to be created"));
+  const frameDelayHandle = useRef(null);
+  validateDimension(width, "width", "of the <ThreeCanvas /> component");
+  validateDimension(height, "height", "of the <ThreeCanvas /> component");
+  const actualStyle = {
+    width,
+    height,
+    ...style
+  };
+  const remotion_onCreated = useCallback((state) => {
+    if (isRendering && advanceOnCreated) {
+      state.advance(performance.now());
+    }
+    continueRender(waitForCreated);
+    onCreated?.(state);
+  }, [onCreated, waitForCreated, continueRender, isRendering, advanceOnCreated]);
+  useLayoutEffect2(() => {
+    if (!isRendering || frame === 0) {
+      return;
+    }
+    frameDelayHandle.current = delayRender(`Waiting for R3F to render frame ${frame}`);
+    return () => {
+      if (frameDelayHandle.current !== null) {
+        continueRender(frameDelayHandle.current);
+      }
+    };
+  }, [frame, isRendering, delayRender, continueRender]);
+  const handleRendered = useCallback(() => {
+    if (frameDelayHandle.current !== null) {
+      continueRender(frameDelayHandle.current);
+      frameDelayHandle.current = null;
+    }
+  }, [continueRender]);
+  return /* @__PURE__ */ jsx2(SuspenseLoader, {
+    children: /* @__PURE__ */ jsxs(Canvas, {
+      style: actualStyle,
+      ...rest,
+      frameloop: isRendering ? "never" : frameloop ?? "always",
+      onCreated: remotion_onCreated,
+      children: [
+        /* @__PURE__ */ jsx2(Scale, {
+          width,
+          height
+        }),
+        /* @__PURE__ */ jsxs(Internals.RemotionContextProvider, {
+          contexts,
+          children: [
+            isRendering && /* @__PURE__ */ jsx2(FrameRenderer, {
+              onRendered: handleRendered
+            }),
+            children
+          ]
+        })
+      ]
+    })
+  });
+};
+var ThreeCanvas = (props) => {
+  return /* @__PURE__ */ jsx2(ThreeCanvasInternals, {
+    ...props,
+    FrameRenderer: ManualFrameRenderer,
+    advanceOnCreated: true
+  });
+};
+
+// src/webgpu.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var waitForGpu = async (renderer) => {
+  await renderer.backend?.device?.queue?.onSubmittedWorkDone();
+};
+var WebGPUFrameRenderer = ({ onRendered }) => {
+  const { advance, camera, gl, scene } = useThree2();
+  const frame = useCurrentFrame2();
+  const { cancelRender, continueRender, delayRender } = useDelayRender3();
+  const initializationPromise = useRef2(null);
+  const frameDelayHandle = useRef2(null);
+  useLayoutEffect3(() => {
+    frameDelayHandle.current = delayRender(`Waiting for WebGPU to render frame ${frame}`);
+    return () => {
+      if (frameDelayHandle.current !== null) {
+        continueRender(frameDelayHandle.current);
+        frameDelayHandle.current = null;
+      }
+    };
+  }, [continueRender, delayRender, frame]);
+  useEffect2(() => {
+    let cancelled = false;
+    const renderFrame = async () => {
+      const renderer = gl;
+      if (!renderer.isWebGPURenderer) {
+        throw new Error("<ThreeWebGPUCanvas> expected a Three.js WebGPURenderer.");
+      }
+      initializationPromise.current ??= (async () => {
+        await renderer.compileAsync(scene, camera);
+        await renderer.renderAsync(scene, camera);
+        await waitForGpu(renderer);
+      })();
+      await initializationPromise.current;
+      if (cancelled) {
+        return;
+      }
+      advance(performance.now());
+      await waitForGpu(renderer);
+      if (cancelled) {
+        return;
+      }
+      if (frameDelayHandle.current !== null) {
+        continueRender(frameDelayHandle.current);
+        frameDelayHandle.current = null;
+      }
+      onRendered();
+    };
+    renderFrame().catch((error) => {
+      if (!cancelled) {
+        cancelRender(error);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    advance,
+    camera,
+    cancelRender,
+    continueRender,
+    frame,
+    gl,
+    onRendered,
+    scene
+  ]);
+  return null;
+};
+var createWebGPURenderer = async (props) => {
+  const renderer = new WebGPURenderer({
+    alpha: props.alpha,
+    antialias: props.antialias,
+    canvas: props.canvas,
+    depth: props.depth,
+    logarithmicDepthBuffer: props.logarithmicDepthBuffer,
+    powerPreference: props.powerPreference === "default" ? undefined : props.powerPreference,
+    stencil: props.stencil
+  });
+  await renderer.init();
+  return renderer;
+};
+var ThreeWebGPUCanvas = (props) => {
+  return /* @__PURE__ */ jsx3(ThreeCanvasInternals, {
+    ...props,
+    gl: createWebGPURenderer,
+    FrameRenderer: WebGPUFrameRenderer,
+    advanceOnCreated: false
+  });
+};
+export {
+  ThreeWebGPUCanvas
+};

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
 	},
 	"name": "@remotion/three",
-	"version": "4.0.501",
+	"version": "4.0.503",
 	"description": "Include React Three Fiber components in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -21,14 +21,14 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.501"
+		"remotion": "4.0.503"
 	},
 	"peerDependencies": {
 		"@react-three/fiber": ">=8.0.0",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0",
 		"three": ">=0.137.0",
-		"remotion": "4.0.501"
+		"remotion": "4.0.503"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
@@ -37,9 +37,9 @@
 		"@types/web": "0.0.166",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"remotion": "4.0.501",
+		"remotion": "4.0.503",
 		"three": "0.178.0",
-		"@remotion/eslint-config-internal": "4.0.501",
+		"@remotion/eslint-config-internal": "4.0.503",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -61,6 +61,19 @@
 			"module": "./dist/esm/index.mjs",
 			"import": "./dist/esm/index.mjs",
 			"require": "./dist/cjs/index.js"
+		},
+		"./webgpu": {
+			"types": "./dist/cjs/webgpu.d.ts",
+			"module": "./dist/esm/webgpu.mjs",
+			"import": "./dist/esm/webgpu.mjs",
+			"require": "./dist/cjs/webgpu.js"
+		}
+	},
+	"typesVersions": {
+		">=1.0": {
+			"webgpu": [
+				"dist/cjs/webgpu.d.ts"
+			]
 		}
 	},
 	"homepage": "https://www.remotion.dev/docs/three"