@remotion/three 2.4.0-alpha.ec355aba → 2.4.3-alpha.23
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.
- package/LICENSE.md +41 -0
- package/dist/ThreeContext.d.ts +6 -0
- package/dist/ThreeContext.d.ts.map +1 -0
- package/dist/ThreeContext.js +9 -0
- package/dist/ThreeContext.js.map +1 -0
- package/dist/ThreeVideo.d.ts +21 -0
- package/dist/ThreeVideo.d.ts.map +1 -0
- package/dist/ThreeVideo.js +28 -0
- package/dist/ThreeVideo.js.map +1 -0
- package/dist/context-bridge.d.ts +3 -0
- package/dist/context-bridge.d.ts.map +1 -0
- package/dist/context-bridge.js +24 -0
- package/dist/context-bridge.js.map +1 -0
- package/dist/use-video-texture.d.ts.map +1 -1
- package/dist/use-video-texture.js +1 -3
- package/dist/use-video-texture.js.map +1 -1
- package/dist/useVideoTexture.d.ts +10 -0
- package/dist/useVideoTexture.d.ts.map +1 -0
- package/dist/useVideoTexture.js +66 -0
- package/dist/useVideoTexture.js.map +1 -0
- package/dist/utils/TexturedShaderMaterial.d.ts +10 -0
- package/dist/utils/TexturedShaderMaterial.d.ts.map +1 -0
- package/dist/utils/TexturedShaderMaterial.js +19 -0
- package/dist/utils/TexturedShaderMaterial.js.map +1 -0
- package/package.json +5 -3
package/LICENSE.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# Remotion License
|
|
2
|
+
|
|
3
|
+
Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion create videos for free (even commercial), while a company license is required for for-profit organisations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
|
|
4
|
+
|
|
5
|
+
- [Free license](#free-license)
|
|
6
|
+
- [Company license](#company-license)
|
|
7
|
+
|
|
8
|
+
## Free license
|
|
9
|
+
|
|
10
|
+
Copyright © 2021 [Jonny Burger](https://jonny.io)
|
|
11
|
+
|
|
12
|
+
### Eligibility
|
|
13
|
+
|
|
14
|
+
You are eligible to use Remotion for free if you are:
|
|
15
|
+
|
|
16
|
+
- an individual
|
|
17
|
+
- a for-profit organisation with up to 3 employees
|
|
18
|
+
- a non-profit or not-for-profit organisation
|
|
19
|
+
- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
|
|
20
|
+
|
|
21
|
+
### Allowed use cases
|
|
22
|
+
|
|
23
|
+
Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify and the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
|
|
24
|
+
|
|
25
|
+
### Disallowed use cases
|
|
26
|
+
|
|
27
|
+
It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, sublicensing your own derivate of Remotion.
|
|
28
|
+
|
|
29
|
+
### Warranty notice
|
|
30
|
+
|
|
31
|
+
The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
|
|
32
|
+
|
|
33
|
+
### Support
|
|
34
|
+
|
|
35
|
+
Support is provided on a best-we-can-do basis via GitHub Issues.
|
|
36
|
+
|
|
37
|
+
## Company license
|
|
38
|
+
|
|
39
|
+
You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support.
|
|
40
|
+
|
|
41
|
+
Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThreeContext.d.ts","sourceRoot":"","sources":["../src/ThreeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,wBAAwB;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,qDAErB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.RemotionThreeContext = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
exports.RemotionThreeContext = react_1.default.createContext(undefined);
|
|
9
|
+
//# sourceMappingURL=ThreeContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThreeContext.js","sourceRoot":"","sources":["../src/ThreeContext.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAMb,QAAA,oBAAoB,GAAG,eAAK,CAAC,aAAa,CAErD,SAAS,CAAC,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { MaterialNode, MeshProps } from '@react-three/fiber';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { UseVideoTextureOptions } from './useVideoTexture';
|
|
4
|
+
import './utils/TexturedShaderMaterial';
|
|
5
|
+
import { TexturedShaderMaterial, TexturedShaderMaterialParameters } from './utils/TexturedShaderMaterial';
|
|
6
|
+
declare global {
|
|
7
|
+
namespace JSX {
|
|
8
|
+
interface IntrinsicElements {
|
|
9
|
+
texturedShaderMaterial: MaterialNode<TexturedShaderMaterial, [
|
|
10
|
+
TexturedShaderMaterialParameters
|
|
11
|
+
]>;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
export interface ThreeVideoProps extends MeshProps, Pick<UseVideoTextureOptions, 'src' | 'startFrom'> {
|
|
16
|
+
fullViewport?: boolean;
|
|
17
|
+
ignoreDepth?: boolean;
|
|
18
|
+
videoProps?: UseVideoTextureOptions;
|
|
19
|
+
}
|
|
20
|
+
export declare const ThreeVideo: React.ForwardRefExoticComponent<Pick<ThreeVideoProps, string | number> & React.RefAttributes<React.ComponentType<"mesh">>>;
|
|
21
|
+
//# sourceMappingURL=ThreeVideo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThreeVideo.d.ts","sourceRoot":"","sources":["../src/ThreeVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,oBAAoB,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAmB,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,gCAAgC,CAAC;AACxC,OAAO,EACN,sBAAsB,EACtB,gCAAgC,EAChC,MAAM,gCAAgC,CAAC;AAcxC,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,sBAAsB,EAAE,YAAY,CACnC,sBAAsB,EACtB;gBAAC,gCAAgC;aAAC,CAClC,CAAC;SACF;KACD;CACD;AAED,MAAM,WAAW,eAChB,SAAQ,SAAS,EAChB,IAAI,CAAC,sBAAsB,EAAE,KAAK,GAAG,WAAW,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAED,eAAO,MAAM,UAAU,4HAsCtB,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ThreeVideo = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const fiber_1 = require("@react-three/fiber");
|
|
9
|
+
const react_1 = __importDefault(require("react"));
|
|
10
|
+
const three_1 = require("three");
|
|
11
|
+
const useVideoTexture_1 = require("./useVideoTexture");
|
|
12
|
+
require("./utils/TexturedShaderMaterial");
|
|
13
|
+
const vShaderFullViewport = three_1.ShaderLib.basic.vertexShader.replace('#include <project_vertex>', `
|
|
14
|
+
vec4 mvPosition = vec4( transformed, 1.0 );
|
|
15
|
+
#ifdef USE_INSTANCING
|
|
16
|
+
mvPosition = instanceMatrix * mvPosition;
|
|
17
|
+
#endif
|
|
18
|
+
mvPosition = modelViewMatrix * mvPosition;
|
|
19
|
+
gl_Position = vec4(position * 2.0, 1.0);
|
|
20
|
+
`);
|
|
21
|
+
exports.ThreeVideo = react_1.default.forwardRef((props, ref) => {
|
|
22
|
+
const { fullViewport, ignoreDepth, src, startFrom, videoProps, ...rest } = props;
|
|
23
|
+
const [size] = fiber_1.useThree((s) => [s.size]);
|
|
24
|
+
const videoTexture = useVideoTexture_1.useVideoTexture({ src, startFrom, ...videoProps });
|
|
25
|
+
return (jsx_runtime_1.jsxs("mesh", Object.assign({ ref: ref, scale: [size.width, size.height, 1], renderOrder: ignoreDepth ? -2 : undefined }, rest, { children: [jsx_runtime_1.jsx("planeGeometry", { args: [1, 1] }, void 0),
|
|
26
|
+
videoTexture && (jsx_runtime_1.jsx("texturedShaderMaterial", { vertexShader: fullViewport ? vShaderFullViewport : three_1.ShaderLib.basic.vertexShader, fragmentShader: three_1.ShaderLib.basic.fragmentShader, uniforms: three_1.ShaderLib.basic.uniforms, map: videoTexture, depthTest: !ignoreDepth, depthWrite: !ignoreDepth }, void 0))] }), void 0));
|
|
27
|
+
});
|
|
28
|
+
//# sourceMappingURL=ThreeVideo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThreeVideo.js","sourceRoot":"","sources":["../src/ThreeVideo.tsx"],"names":[],"mappings":";;;;;;;AAAA,8CAAuE;AACvE,kDAA0B;AAC1B,iCAAkC;AAClC,uDAA4E;AAC5E,0CAAwC;AAMxC,MAAM,mBAAmB,GAAG,iBAAS,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAC/D,2BAA2B,EAC3B;;;;;;;CAOA,CACA,CAAC;AAsBW,QAAA,UAAU,GAAG,eAAK,CAAC,UAAU,CACzC,CACC,KAAsB,EACtB,GAAoD,EACnD,EAAE;IACH,MAAM,EACL,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,UAAU,EACV,GAAG,IAAI,EACP,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAU,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,iCAAe,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;IACxE,OAAO,CACN,2CACC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACnC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IACrC,IAAI,eAER,qCAAe,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,WAAI;YAC9B,YAAY,IAAI,CAChB,8CACC,YAAY,EACX,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAS,CAAC,KAAK,CAAC,YAAY,EAElE,cAAc,EAAE,iBAAS,CAAC,KAAK,CAAC,cAAc,EAC9C,QAAQ,EAAE,iBAAS,CAAC,KAAK,CAAC,QAAQ,EAClC,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAC,WAAW,EACvB,UAAU,EAAE,CAAC,WAAW,WACvB,CACF,aACK,CACP,CAAC;AACH,CAAC,CACD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context-bridge.d.ts","sourceRoot":"","sources":["../src/context-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,gBAAgB,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,WAmBtE"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useContextBridge = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
function useContextBridge(...contexts) {
|
|
9
|
+
const cRef = react_1.default.useRef([]);
|
|
10
|
+
cRef.current = contexts.map((context) => react_1.default.useContext(context));
|
|
11
|
+
return react_1.default.useMemo(() => ({ children }) => (contexts.reduceRight((acc, Context, i) => value = { cRef, : .current[i] }, children = { acc } / >
|
|
12
|
+
),
|
|
13
|
+
children
|
|
14
|
+
/*
|
|
15
|
+
* done this way in reference to:
|
|
16
|
+
* https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44572#issuecomment-625878049
|
|
17
|
+
* https://github.com/microsoft/TypeScript/issues/14729
|
|
18
|
+
*/
|
|
19
|
+
)),
|
|
20
|
+
[];
|
|
21
|
+
;
|
|
22
|
+
}
|
|
23
|
+
exports.useContextBridge = useContextBridge;
|
|
24
|
+
//# sourceMappingURL=context-bridge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context-bridge.js","sourceRoot":"","sources":["../src/context-bridge.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,SAAgB,gBAAgB,CAAC,GAAG,QAAmC;IACtE,MAAM,IAAI,GAAG,eAAK,CAAC,MAAM,CAA4B,EAAE,CAAC,CAAC;IACzD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,eAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpE,OAAO,eAAK,CAAC,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAiC,EAAe,EAAE,CAClE,CAAC,QAAQ,CAAC,WAAW,CACpB,CAAC,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,CACD,KAAK,GAAC,EAAC,IAAI,EAAA,EAAA,CAAC,OAAO,CAAC,CAAC,CAAC,EAAC,EAAC,QAAQ,GAAC,EAAC,GAAG,EAAC,GAAE;QAC3D,AAD4D,JAAA,CAC3D;QACD,QAAQ;IACR;;;;OAIG;KACQ,CAAgB;QAC7B,EAAE,CAAA;IACF,CAAC;AACH,CAAC;AAnBD,4CAmBC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-video-texture.d.ts","sourceRoot":"","sources":["../src/use-video-texture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAgD,KAAK,EAAE,MAAM,UAAU,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,gBAAgB;QACzB,yBAAyB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;KACrD;CACD;AAED,oBAAY,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAexE,eAAO,MAAM,eAAe,aACjB,MAAM,SAAS,CAAC,gBAAgB,CAAC,KACzC,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"use-video-texture.d.ts","sourceRoot":"","sources":["../src/use-video-texture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAgD,KAAK,EAAE,MAAM,UAAU,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,gBAAgB;QACzB,yBAAyB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;KACrD;CACD;AAED,oBAAY,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAexE,eAAO,MAAM,eAAe,aACjB,MAAM,SAAS,CAAC,gBAAgB,CAAC,KACzC,YAAY,GAAG,IAgEjB,CAAC"}
|
|
@@ -32,9 +32,7 @@ const warnAboutRequestVideoFrameCallback = () => {
|
|
|
32
32
|
console.warn('Browser does not support requestVideoFrameCallback. Cannot display video.');
|
|
33
33
|
};
|
|
34
34
|
const useVideoTexture = (videoRef) => {
|
|
35
|
-
const [loaded] = (0, react_1.useState)(() =>
|
|
36
|
-
return (0, remotion_1.delayRender)();
|
|
37
|
-
});
|
|
35
|
+
const [loaded] = (0, react_1.useState)(() => (0, remotion_1.delayRender)());
|
|
38
36
|
const [videoTexture, setVideoTexture] = (0, react_1.useState)(null);
|
|
39
37
|
const frame = (0, remotion_1.useCurrentFrame)();
|
|
40
38
|
const onReady = (0, react_1.useCallback)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-video-texture.js","sourceRoot":"","sources":["../src/use-video-texture.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,uCAA+E;AAC/E,iCAAqC;AAUrC,IAAI,MAAM,GAAG,KAAK,CAAC;AAEnB,MAAM,kCAAkC,GAAG,GAAG,EAAE;IAC/C,IAAI,MAAM,EAAE;QACX,OAAO,KAAK,CAAC;KACb;IAED,MAAM,GAAG,IAAI,CAAC;IACd,OAAO,CAAC,IAAI,CACX,2EAA2E,CAC3E,CAAC;AACH,CAAC,CAAC;AAEK,MAAM,eAAe,GAAG,CAC9B,QAA2C,EACrB,EAAE;IACxB,MAAM,CAAC,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE
|
|
1
|
+
{"version":3,"file":"use-video-texture.js","sourceRoot":"","sources":["../src/use-video-texture.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,uCAA+E;AAC/E,iCAAqC;AAUrC,IAAI,MAAM,GAAG,KAAK,CAAC;AAEnB,MAAM,kCAAkC,GAAG,GAAG,EAAE;IAC/C,IAAI,MAAM,EAAE;QACX,OAAO,KAAK,CAAC;KACb;IAED,MAAM,GAAG,IAAI,CAAC;IACd,OAAO,CAAC,IAAI,CACX,2EAA2E,CAC3E,CAAC;AACH,CAAC,CAAC;AAEK,MAAM,eAAe,GAAG,CAC9B,QAA2C,EACrB,EAAE;IACxB,MAAM,CAAC,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,IAAA,sBAAW,GAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAsB,IAAI,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,IAAA,0BAAe,GAAE,CAAC;IAEhC,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACtB,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC;SACnC;QAED,MAAM,EAAE,GAAG,IAAI,oBAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC9C,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC;QACvD,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,IAAA,yBAAc,EAAC,MAAM,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACtB,OAAO;SACP;QAED,IAAI,QAAQ,CAAC,OAAO,CAAC,UAAU,IAAI,CAAC,EAAE;YACrC,OAAO,EAAE,CAAC;YACV,OAAO;SACP;QAED,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAChC,YAAY,EACZ,GAAG,EAAE;YACJ,OAAO,EAAE,CAAC;QACX,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACd,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEhC,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,OAAO,EAAE;YACb,OAAO;SACP;QAED,IAAI,CAAC,OAAO,CAAC,yBAAyB,EAAE;YACvC,kCAAkC,EAAE,CAAC;YACrC,OAAO;SACP;QAED,MAAM,KAAK,GAAG,GAAG,EAAE;YAClB,0EAA0E;YAC1E,6BAA6B;QAC9B,CAAC,CAAC;QAEF,OAAO,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE9B,IACC,OAAO,gBAAgB,KAAK,WAAW;QACvC,CAAC,gBAAgB,CAAC,SAAS,CAAC,yBAAyB,EACpD;QACD,IAAA,yBAAc,EAAC,MAAM,CAAC,CAAC;QACvB,OAAO,IAAI,CAAC;KACZ;IAED,OAAO,YAAY,CAAC;AACrB,CAAC,CAAC;AAlEW,QAAA,eAAe,mBAkE1B"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Video } from 'remotion';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLVideoElement {
|
|
5
|
+
requestVideoFrameCallback?: (cb: () => void) => void;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export declare type UseVideoTextureOptions = React.ComponentProps<typeof Video>;
|
|
9
|
+
export declare const useVideoTexture: (videoProps: UseVideoTextureOptions) => any;
|
|
10
|
+
//# sourceMappingURL=useVideoTexture.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useVideoTexture.d.ts","sourceRoot":"","sources":["../src/useVideoTexture.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAgD,KAAK,EAAE,MAAM,UAAU,CAAC;AAI/E,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,gBAAgB;QACzB,yBAAyB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;KACrD;CACD;AAED,oBAAY,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAExE,eAAO,MAAM,eAAe,eAAgB,sBAAsB,QAoDjE,CAAC"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
exports.useVideoTexture = void 0;
|
|
23
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
24
|
+
const fiber_1 = require("@react-three/fiber");
|
|
25
|
+
const react_1 = __importStar(require("react"));
|
|
26
|
+
const remotion_1 = require("remotion");
|
|
27
|
+
const three_1 = require("three");
|
|
28
|
+
const ThreeContext_1 = require("./ThreeContext");
|
|
29
|
+
const useVideoTexture = (videoProps) => {
|
|
30
|
+
const render = fiber_1.useThree((s) => s.invalidate);
|
|
31
|
+
const videoRef = react_1.default.useRef(null);
|
|
32
|
+
const [videoTexture, setVideoTexture] = react_1.default.useState(null);
|
|
33
|
+
const onLoadedData = react_1.useCallback(() => {
|
|
34
|
+
const { current } = videoRef;
|
|
35
|
+
if (!current) {
|
|
36
|
+
throw new Error('No video ref found');
|
|
37
|
+
}
|
|
38
|
+
const vt = new three_1.VideoTexture(current);
|
|
39
|
+
current.width = current.videoWidth;
|
|
40
|
+
current.height = current.videoHeight;
|
|
41
|
+
vt.needsUpdate = true;
|
|
42
|
+
setVideoTexture(vt);
|
|
43
|
+
}, []);
|
|
44
|
+
const frame = remotion_1.useCurrentFrame();
|
|
45
|
+
react_1.default.useEffect(() => {
|
|
46
|
+
const video = videoRef.current;
|
|
47
|
+
if (!video || !videoTexture) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
if (!video.requestVideoFrameCallback) {
|
|
51
|
+
throw new Error('HTMLVideoElement.requestVideoFrameCallback not supported');
|
|
52
|
+
}
|
|
53
|
+
const handle = remotion_1.delayRender();
|
|
54
|
+
// wait for the video to render its next frame
|
|
55
|
+
video.requestVideoFrameCallback(() => {
|
|
56
|
+
// Now force a new render so the latest video frame shows up in the canvas
|
|
57
|
+
render();
|
|
58
|
+
// Allow remotion to continue
|
|
59
|
+
remotion_1.continueRender(handle);
|
|
60
|
+
});
|
|
61
|
+
}, [frame, render, videoTexture]);
|
|
62
|
+
ThreeContext_1.useRemotionThreeDomNode(jsx_runtime_1.jsx(remotion_1.Video, Object.assign({}, videoProps, { ref: videoRef, onLoadedData: onLoadedData, crossOrigin: "anonymous", style: { width: 800, height: 500 } }), void 0));
|
|
63
|
+
return videoTexture;
|
|
64
|
+
};
|
|
65
|
+
exports.useVideoTexture = useVideoTexture;
|
|
66
|
+
//# sourceMappingURL=useVideoTexture.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useVideoTexture.js","sourceRoot":"","sources":["../src/useVideoTexture.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,8CAA8C;AAC9C,+CAA2C;AAC3C,uCAA+E;AAC/E,iCAAqC;AACrC,iDAAyD;AAUlD,MAAM,eAAe,GAAG,CAAC,UAAkC,EAAE,EAAE;IACrE,MAAM,MAAM,GAAG,gBAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAE7C,MAAM,QAAQ,GAAG,eAAK,CAAC,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,eAAK,CAAC,QAAQ,CACrD,IAAI,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,mBAAW,CAAC,GAAG,EAAE;QACrC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,OAAO,EAAE;YACb,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;SACtC;QACD,MAAM,EAAE,GAAG,IAAI,oBAAY,CAAC,OAAO,CAAC,CAAC;QACrC,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC;QACnC,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC;QACrC,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;QACtB,eAAe,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,0BAAe,EAAE,CAAC;IAChC,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;YAC5B,OAAO;SACP;QACD,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE;YACrC,MAAM,IAAI,KAAK,CACd,0DAA0D,CAC1D,CAAC;SACF;QACD,MAAM,MAAM,GAAG,sBAAW,EAAE,CAAC;QAC7B,8CAA8C;QAC9C,KAAK,CAAC,yBAAyB,CAAC,GAAG,EAAE;YACpC,0EAA0E;YAC1E,MAAM,EAAE,CAAC;YACT,6BAA6B;YAC7B,yBAAc,CAAC,MAAM,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAElC,sCAAuB,CACtB,kBAAC,gBAAK,oBACD,UAAU,IACd,GAAG,EAAE,QAAQ,EACb,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAC,WAAW,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,YACjC,CACF,CAAC;IAEF,OAAO,YAAY,CAAC;AACrB,CAAC,CAAC;AApDW,QAAA,eAAe,mBAoD1B"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ShaderMaterial, ShaderMaterialParameters, Texture } from 'three';
|
|
2
|
+
export interface TexturedShaderMaterialParameters extends ShaderMaterialParameters {
|
|
3
|
+
map?: Texture;
|
|
4
|
+
}
|
|
5
|
+
export declare class TexturedShaderMaterial extends ShaderMaterial {
|
|
6
|
+
constructor(params?: TexturedShaderMaterialParameters);
|
|
7
|
+
get map(): Texture | null;
|
|
8
|
+
set map(value: Texture | null);
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=TexturedShaderMaterial.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TexturedShaderMaterial.d.ts","sourceRoot":"","sources":["../../src/utils/TexturedShaderMaterial.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,gCAChB,SAAQ,wBAAwB;IAChC,GAAG,CAAC,EAAE,OAAO,CAAC;CACd;AAED,qBAAa,sBAAuB,SAAQ,cAAc;gBAC7C,MAAM,CAAC,EAAE,gCAAgC;IAIrD,IAAW,GAAG,IAAI,OAAO,GAAG,IAAI,CAE/B;IAED,IAAW,GAAG,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAEnC;CACD"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TexturedShaderMaterial = void 0;
|
|
4
|
+
const fiber_1 = require("@react-three/fiber");
|
|
5
|
+
const three_1 = require("three");
|
|
6
|
+
class TexturedShaderMaterial extends three_1.ShaderMaterial {
|
|
7
|
+
constructor(params) {
|
|
8
|
+
super(params);
|
|
9
|
+
}
|
|
10
|
+
get map() {
|
|
11
|
+
return this.uniforms.map.value;
|
|
12
|
+
}
|
|
13
|
+
set map(value) {
|
|
14
|
+
this.uniforms.map.value = value;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
exports.TexturedShaderMaterial = TexturedShaderMaterial;
|
|
18
|
+
fiber_1.extend({ TexturedShaderMaterial });
|
|
19
|
+
//# sourceMappingURL=TexturedShaderMaterial.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TexturedShaderMaterial.js","sourceRoot":"","sources":["../../src/utils/TexturedShaderMaterial.ts"],"names":[],"mappings":";;;AAAA,8CAA4C;AAC5C,iCAA0E;AAO1E,MAAa,sBAAuB,SAAQ,sBAAc;IACzD,YAAY,MAAyC;QACpD,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,IAAW,GAAG;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;IAChC,CAAC;IAED,IAAW,GAAG,CAAC,KAAqB;QACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;IACjC,CAAC;CACD;AAZD,wDAYC;AAED,cAAM,CAAC,EAAE,sBAAsB,EAAE,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/three",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.3-alpha.23+2641d1571",
|
|
4
4
|
"description": "Utility functions for using react-three-fiber with remotion",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"url": "https://github.com/remotion-dev/remotion"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"remotion": "2.4.
|
|
20
|
+
"remotion": "2.4.3-alpha.23+2641d1571"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@react-three/fiber": ">=6.0.14",
|
|
@@ -32,9 +32,11 @@
|
|
|
32
32
|
"eslint": "^7.4.0",
|
|
33
33
|
"prettier": "^2.0.5",
|
|
34
34
|
"prettier-plugin-organize-imports": "^1.1.1",
|
|
35
|
+
"three": "^0.133.0",
|
|
35
36
|
"typescript": "^4.4.2"
|
|
36
37
|
},
|
|
37
38
|
"publishConfig": {
|
|
38
39
|
"access": "public"
|
|
39
|
-
}
|
|
40
|
+
},
|
|
41
|
+
"gitHead": "2641d1571399611232c61a5ca01dcc388473f2a1"
|
|
40
42
|
}
|