@remotion/three 4.0.407 → 4.0.409

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/ThreeCanvas.js +34 -13
  2. package/dist/esm/index.mjs +46 -14
  3. package/package.json +5 -5
package/dist/cjs/ThreeCanvas.js CHANGED
@@ -17,12 +17,13 @@ const Scale = ({ width, height, }) => {
17
17
  }, [setSize, width, height, set]);
18
18
  return null;
19
19
  };
20
- const FiberFrameInvalidator = () => {
21
- const { invalidate } = (0, fiber_1.useThree)();
20
+ const ManualFrameRenderer = ({ onRendered, }) => {
21
+ const { advance } = (0, fiber_1.useThree)();
22
22
  const frame = (0, remotion_1.useCurrentFrame)();
23
23
  (0, react_1.useEffect)(() => {
24
- invalidate();
25
- }, [frame, invalidate]);
24
+ advance(performance.now());
25
+ onRendered();
26
+ }, [frame, advance, onRendered]);
26
27
  return null;
27
28
  };
28
29
  /*
@@ -30,24 +31,44 @@ const FiberFrameInvalidator = () => {
30
31
  * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
31
32
  */
32
33
  const ThreeCanvas = (props) => {
34
+ const { children, width, height, style, frameloop, onCreated, ...rest } = props;
33
35
  const { isRendering } = (0, remotion_1.useRemotionEnvironment)();
34
- // https://r3f.docs.pmnd.rs/advanced/scaling-performance#on-demand-rendering
35
- const shouldUseFrameloopDemand = isRendering;
36
- const { children, width, height, style, onCreated, ...rest } = props;
37
36
  const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
37
+ const contexts = remotion_1.Internals.useRemotionContexts();
38
+ const frame = (0, remotion_1.useCurrentFrame)();
38
39
  const [waitForCreated] = (0, react_1.useState)(() => delayRender('Waiting for <ThreeCanvas/> to be created'));
40
+ const frameDelayHandle = (0, react_1.useRef)(null);
39
41
  (0, validate_1.validateDimension)(width, 'width', 'of the <ThreeCanvas /> component');
40
42
  (0, validate_1.validateDimension)(height, 'height', 'of the <ThreeCanvas /> component');
41
- const contexts = remotion_1.Internals.useRemotionContexts();
42
43
  const actualStyle = {
43
- width: props.width,
44
- height: props.height,
45
- ...(style !== null && style !== void 0 ? style : {}),
44
+ width,
45
+ height,
46
+ ...style,
46
47
  };
47
48
  const remotion_onCreated = (0, react_1.useCallback)((state) => {
49
+ if (isRendering) {
50
+ state.advance(performance.now());
51
+ }
48
52
  continueRender(waitForCreated);
49
53
  onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
50
- }, [onCreated, waitForCreated, continueRender]);
51
- 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] })] }) }));
54
+ }, [onCreated, waitForCreated, continueRender, isRendering]);
55
+ (0, react_1.useLayoutEffect)(() => {
56
+ if (!isRendering || frame === 0) {
57
+ return;
58
+ }
59
+ frameDelayHandle.current = delayRender(`Waiting for R3F to render frame ${frame}`);
60
+ return () => {
61
+ if (frameDelayHandle.current !== null) {
62
+ continueRender(frameDelayHandle.current);
63
+ }
64
+ };
65
+ }, [frame, isRendering, delayRender, continueRender]);
66
+ const handleRendered = (0, react_1.useCallback)(() => {
67
+ if (frameDelayHandle.current !== null) {
68
+ continueRender(frameDelayHandle.current);
69
+ frameDelayHandle.current = null;
70
+ }
71
+ }, [continueRender]);
72
+ return ((0, jsx_runtime_1.jsx)(SuspenseLoader_1.SuspenseLoader, { children: (0, jsx_runtime_1.jsxs)(fiber_1.Canvas, { style: actualStyle, ...rest, frameloop: isRendering ? 'never' : (frameloop !== null && frameloop !== void 0 ? frameloop : '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: [isRendering && (0, jsx_runtime_1.jsx)(ManualFrameRenderer, { onRendered: handleRendered }), children] })] }) }));
52
73
  };
53
74
  exports.ThreeCanvas = ThreeCanvas;
package/dist/esm/index.mjs CHANGED
@@ -24,7 +24,13 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
24
24
 
25
25
  // src/ThreeCanvas.tsx
26
26
  import { Canvas, useThree } from "@react-three/fiber";
27
- import { useCallback, useEffect, useLayoutEffect as useLayoutEffect2, useState } from "react";
27
+ import {
28
+ useCallback,
29
+ useEffect,
30
+ useLayoutEffect as useLayoutEffect2,
31
+ useRef,
32
+ useState
33
+ } from "react";
28
34
  import {
29
35
  Internals,
30
36
  useCurrentFrame,
@@ -74,37 +80,61 @@ var Scale = ({
74
80
  }, [setSize, width, height, set]);
75
81
  return null;
76
82
  };
77
- var FiberFrameInvalidator = () => {
78
- const { invalidate } = useThree();
83
+ var ManualFrameRenderer = ({
84
+ onRendered
85
+ }) => {
86
+ const { advance } = useThree();
79
87
  const frame = useCurrentFrame();
80
88
  useEffect(() => {
81
- invalidate();
82
- }, [frame, invalidate]);
89
+ advance(performance.now());
90
+ onRendered();
91
+ }, [frame, advance, onRendered]);
83
92
  return null;
84
93
  };
85
94
  var ThreeCanvas = (props) => {
95
+ const { children, width, height, style, frameloop, onCreated, ...rest } = props;
86
96
  const { isRendering } = useRemotionEnvironment();
87
- const shouldUseFrameloopDemand = isRendering;
88
- const { children, width, height, style, onCreated, ...rest } = props;
89
97
  const { delayRender, continueRender } = useDelayRender2();
98
+ const contexts = Internals.useRemotionContexts();
99
+ const frame = useCurrentFrame();
90
100
  const [waitForCreated] = useState(() => delayRender("Waiting for <ThreeCanvas/> to be created"));
101
+ const frameDelayHandle = useRef(null);
91
102
  validateDimension(width, "width", "of the <ThreeCanvas /> component");
92
103
  validateDimension(height, "height", "of the <ThreeCanvas /> component");
93
- const contexts = Internals.useRemotionContexts();
94
104
  const actualStyle = {
95
- width: props.width,
96
- height: props.height,
97
- ...style ?? {}
105
+ width,
106
+ height,
107
+ ...style
98
108
  };
99
109
  const remotion_onCreated = useCallback((state) => {
110
+ if (isRendering) {
111
+ state.advance(performance.now());
112
+ }
100
113
  continueRender(waitForCreated);
101
114
  onCreated?.(state);
102
- }, [onCreated, waitForCreated, continueRender]);
115
+ }, [onCreated, waitForCreated, continueRender, isRendering]);
116
+ useLayoutEffect2(() => {
117
+ if (!isRendering || frame === 0) {
118
+ return;
119
+ }
120
+ frameDelayHandle.current = delayRender(`Waiting for R3F to render frame ${frame}`);
121
+ return () => {
122
+ if (frameDelayHandle.current !== null) {
123
+ continueRender(frameDelayHandle.current);
124
+ }
125
+ };
126
+ }, [frame, isRendering, delayRender, continueRender]);
127
+ const handleRendered = useCallback(() => {
128
+ if (frameDelayHandle.current !== null) {
129
+ continueRender(frameDelayHandle.current);
130
+ frameDelayHandle.current = null;
131
+ }
132
+ }, [continueRender]);
103
133
  return /* @__PURE__ */ jsx2(SuspenseLoader, {
104
134
  children: /* @__PURE__ */ jsxs(Canvas, {
105
135
  style: actualStyle,
106
136
  ...rest,
107
- frameloop: shouldUseFrameloopDemand ? "demand" : "always",
137
+ frameloop: isRendering ? "never" : frameloop ?? "always",
108
138
  onCreated: remotion_onCreated,
109
139
  children: [
110
140
  /* @__PURE__ */ jsx2(Scale, {
@@ -114,7 +144,9 @@ var ThreeCanvas = (props) => {
114
144
  /* @__PURE__ */ jsxs(Internals.RemotionContextProvider, {
115
145
  contexts,
116
146
  children: [
117
- shouldUseFrameloopDemand && /* @__PURE__ */ jsx2(FiberFrameInvalidator, {}),
147
+ isRendering && /* @__PURE__ */ jsx2(ManualFrameRenderer, {
148
+ onRendered: handleRendered
149
+ }),
118
150
  children
119
151
  ]
120
152
  })
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
4
4
  },
5
5
  "name": "@remotion/three",
6
- "version": "4.0.407",
6
+ "version": "4.0.409",
7
7
  "description": "Include React Three Fiber components in a Remotion video",
8
8
  "main": "dist/cjs/index.js",
9
9
  "types": "dist/cjs/index.d.ts",
@@ -21,14 +21,14 @@
21
21
  "url": "https://github.com/remotion-dev/remotion/issues"
22
22
  },
23
23
  "dependencies": {
24
- "remotion": "4.0.407"
24
+ "remotion": "4.0.409"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "@react-three/fiber": ">=8.0.0",
28
28
  "react": ">=16.8.0",
29
29
  "react-dom": ">=16.8.0",
30
30
  "three": ">=0.137.0",
31
- "remotion": "4.0.407"
31
+ "remotion": "4.0.409"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@react-three/fiber": "9.2.0",
@@ -37,9 +37,9 @@
37
37
  "@types/web": "0.0.166",
38
38
  "react": "19.2.3",
39
39
  "react-dom": "19.2.3",
40
- "remotion": "4.0.407",
40
+ "remotion": "4.0.409",
41
41
  "three": "0.178.0",
42
- "@remotion/eslint-config-internal": "4.0.407",
42
+ "@remotion/eslint-config-internal": "4.0.409",
43
43
  "eslint": "9.19.0"
44
44
  },
45
45
  "keywords": [