@remotion/three 4.0.301 → 4.0.303

package/dist/cjs/ThreeCanvas.js

@@ -17,6 +17,17 @@ const Scale = ({ width, height, }) => {
     }, [setSize, width, height, set]);
     return null;
 };
+const FiberFrameInvalidator = () => {
+    const { invalidate } = (0, fiber_1.useThree)();
+    const frame = (0, remotion_1.useCurrentFrame)();
+    (0, react_1.useEffect)(() => {
+        invalidate();
+    }, [frame, invalidate]);
+    return null;
+};
+const { isRendering } = (0, remotion_1.getRemotionEnvironment)();
+// https://r3f.docs.pmnd.rs/advanced/scaling-performance#on-demand-rendering
+const shouldUseFrameloopDemand = isRendering;
 /*
  * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotion's useCurrentFrame().
  * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
@@ -36,6 +47,6 @@ const ThreeCanvas = (props) => {
         (0, remotion_1.continueRender)(waitForCreated);
         onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
     }, [onCreated, waitForCreated]);
-    return ((0, jsx_runtime_1.jsx)(SuspenseLoader_1.SuspenseLoader, { children: (0, jsx_runtime_1.jsxs)(fiber_1.Canvas, { style: actualStyle, ...rest, onCreated: remotion_onCreated, children: [(0, jsx_runtime_1.jsx)(Scale, { width: width, height: height }), (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: children })] }) }));
+    return ((0, jsx_runtime_1.jsx)(SuspenseLoader_1.SuspenseLoader, { children: (0, jsx_runtime_1.jsxs)(fiber_1.Canvas, { style: actualStyle, ...rest, frameloop: shouldUseFrameloopDemand ? 'demand' : 'always', onCreated: remotion_onCreated, children: [(0, jsx_runtime_1.jsx)(Scale, { width: width, height: height }), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: [shouldUseFrameloopDemand && (0, jsx_runtime_1.jsx)(FiberFrameInvalidator, {}), children] })] }) }));
 };
 exports.ThreeCanvas = ThreeCanvas;

package/dist/cjs/use-video-texture.js

@@ -79,7 +79,7 @@ const useVideoTexture = (videoRef) => {
             setError(err);
         });
     }, [loaded, vidText, videoRef]);
-    react_1.default.useEffect(() => {
+    react_1.default.useLayoutEffect(() => {
         if (!videoRef.current) {
             return;
         }

package/dist/esm/index.mjs

@@ -24,8 +24,14 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/ThreeCanvas.tsx
 import { Canvas, useThree } from "@react-three/fiber";
-import { useCallback, useLayoutEffect as useLayoutEffect2, useState } from "react";
-import { Internals, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
+import { useCallback, useEffect, useLayoutEffect as useLayoutEffect2, useState } from "react";
+import {
+  Internals,
+  continueRender as continueRender2,
+  delayRender as delayRender2,
+  getRemotionEnvironment,
+  useCurrentFrame
+} from "remotion";
 
 // src/SuspenseLoader.tsx
 import { Suspense, useLayoutEffect } from "react";
@@ -68,6 +74,16 @@ var Scale = ({
   }, [setSize, width, height, set]);
   return null;
 };
+var FiberFrameInvalidator = () => {
+  const { invalidate } = useThree();
+  const frame = useCurrentFrame();
+  useEffect(() => {
+    invalidate();
+  }, [frame, invalidate]);
+  return null;
+};
+var { isRendering } = getRemotionEnvironment();
+var shouldUseFrameloopDemand = isRendering;
 var ThreeCanvas = (props) => {
   const { children, width, height, style, onCreated, ...rest } = props;
   const [waitForCreated] = useState(() => delayRender2("Waiting for <ThreeCanvas/> to be created"));
@@ -87,15 +103,19 @@ var ThreeCanvas = (props) => {
     children: /* @__PURE__ */ jsxs(Canvas, {
       style: actualStyle,
       ...rest,
+      frameloop: shouldUseFrameloopDemand ? "demand" : "always",
       onCreated: remotion_onCreated,
       children: [
         /* @__PURE__ */ jsx2(Scale, {
           width,
           height
         }),
-        /* @__PURE__ */ jsx2(Internals.RemotionContextProvider, {
+        /* @__PURE__ */ jsxs(Internals.RemotionContextProvider, {
           contexts,
-          children
+          children: [
+            shouldUseFrameloopDemand && /* @__PURE__ */ jsx2(FiberFrameInvalidator, {}),
+            children
+          ]
         })
       ]
     })
@@ -108,8 +128,8 @@ import {
   cancelRender,
   continueRender as continueRender3,
   delayRender as delayRender3,
-  getRemotionEnvironment,
-  useCurrentFrame,
+  getRemotionEnvironment as getRemotionEnvironment2,
+  useCurrentFrame as useCurrentFrame2,
   useVideoConfig
 } from "remotion";
 import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
@@ -121,7 +141,7 @@ var useInnerVideoTexture = ({
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds
 }) => {
-  const frame = useCurrentFrame();
+  const frame = useCurrentFrame2();
   const { fps } = useVideoConfig();
   const mediaStartsAt = Internals2.useMediaStartsAt();
   const currentTime = useMemo(() => {
@@ -190,8 +210,8 @@ function useOffthreadVideoTexture({
   if (!src) {
     throw new Error("src must be provided to useOffthreadVideoTexture");
   }
-  const { isRendering } = getRemotionEnvironment();
-  if (!isRendering) {
+  const { isRendering: isRendering2 } = getRemotionEnvironment2();
+  if (!isRendering2) {
     throw new Error("useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.");
   }
   return useInnerVideoTexture({
@@ -204,8 +224,8 @@ function useOffthreadVideoTexture({
   });
 }
 // src/use-video-texture.ts
-import React3, { useCallback as useCallback3, useEffect, useState as useState3 } from "react";
-import { continueRender as continueRender4, delayRender as delayRender4, useCurrentFrame as useCurrentFrame2 } from "remotion";
+import React3, { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
+import { continueRender as continueRender4, delayRender as delayRender4, useCurrentFrame as useCurrentFrame3 } from "remotion";
 var warned = false;
 var warnAboutRequestVideoFrameCallback = () => {
   if (warned) {
@@ -224,7 +244,7 @@ var useVideoTexture = (videoRef) => {
   const [videoTexture, setVideoTexture] = useState3(null);
   const [vidText] = useState3(() => import("three/src/textures/VideoTexture.js"));
   const [error, setError] = useState3(null);
-  const frame = useCurrentFrame2();
+  const frame = useCurrentFrame3();
   if (error) {
     throw error;
   }
@@ -242,7 +262,7 @@ var useVideoTexture = (videoRef) => {
       setError(err);
     });
   }, [loaded, vidText, videoRef]);
-  React3.useEffect(() => {
+  React3.useLayoutEffect(() => {
     if (!videoRef.current) {
       return;
     }
@@ -266,7 +286,7 @@ var useVideoTexture = (videoRef) => {
     const ready = () => {};
     current.requestVideoFrameCallback(ready);
   }, [frame, loaded, videoRef]);
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       continueRender4(loaded);
     };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
   },
   "name": "@remotion/three",
-  "version": "4.0.301",
+  "version": "4.0.303",
   "description": "Include React Three Fiber components in a Remotion video",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -16,14 +16,14 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.301"
+    "remotion": "4.0.303"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "three": ">=0.137.0",
-    "remotion": "4.0.301"
+    "remotion": "4.0.303"
   },
   "devDependencies": {
     "@react-three/fiber": "9.1.2",
@@ -34,8 +34,8 @@
     "react-dom": "19.0.0",
     "three": "0.171.0",
     "eslint": "9.19.0",
-    "remotion": "4.0.301",
-    "@remotion/eslint-config-internal": "4.0.301"
+    "remotion": "4.0.303",
+    "@remotion/eslint-config-internal": "4.0.303"
   },
   "keywords": [
     "remotion",