@remotion/svg-3d-engine 4.0.251 → 4.0.252
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/.turbo/turbo-make.log +2 -1
- package/bundle.ts +1 -0
- package/dist/cjs/elements.d.ts +2 -8
- package/dist/cjs/elements.js +6 -22
- package/dist/cjs/extrude-element.d.ts +3 -7
- package/dist/cjs/extrude-element.js +7 -30
- package/dist/cjs/index.d.ts +1 -2
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/map-face.d.ts +1 -7
- package/dist/cjs/map-face.js +2 -12
- package/dist/cjs/matrix.d.ts +3 -1
- package/dist/cjs/matrix.js +11 -1
- package/dist/esm/index.mjs +20 -1353
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/elements.ts +7 -35
- package/src/extrude-element.ts +9 -46
- package/src/index.ts +2 -1
- package/src/map-face.ts +0 -21
- package/src/matrix.ts +11 -1
package/.turbo/turbo-make.log
CHANGED
package/bundle.ts
CHANGED
package/dist/cjs/elements.d.ts
CHANGED
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
import type { FaceType } from './map-face';
|
|
2
|
-
import type { MatrixTransform4D
|
|
2
|
+
import type { MatrixTransform4D } from './matrix';
|
|
3
3
|
export type ThreeDElement = {
|
|
4
4
|
faces: FaceType[];
|
|
5
5
|
id: string;
|
|
6
6
|
description: string;
|
|
7
|
-
centerPoint: Vector4D;
|
|
8
7
|
};
|
|
9
|
-
export declare const
|
|
10
|
-
face: FaceType[];
|
|
11
|
-
centerPoint: Vector4D;
|
|
12
|
-
description: string;
|
|
13
|
-
}) => ThreeDElement;
|
|
14
|
-
export declare const transformElement: (element: ThreeDElement, transformations: MatrixTransform4D[]) => ThreeDElement;
|
|
8
|
+
export declare const transformFaces: (faces: FaceType[], transformations: MatrixTransform4D[]) => FaceType[];
|
package/dist/cjs/elements.js
CHANGED
|
@@ -1,26 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
const make_id_1 = require("./make-id");
|
|
3
|
+
exports.transformFaces = void 0;
|
|
5
4
|
const map_face_1 = require("./map-face");
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
id: (0, make_id_1.makeId)(),
|
|
11
|
-
centerPoint,
|
|
12
|
-
description,
|
|
13
|
-
};
|
|
5
|
+
const transformFaces = (faces, transformations) => {
|
|
6
|
+
return faces.map((face) => {
|
|
7
|
+
return (0, map_face_1.transformFace)(face, transformations);
|
|
8
|
+
});
|
|
14
9
|
};
|
|
15
|
-
exports.
|
|
16
|
-
const transformElement = (element, transformations) => {
|
|
17
|
-
return {
|
|
18
|
-
...element,
|
|
19
|
-
faces: element.faces.map((face) => {
|
|
20
|
-
return (0, map_face_1.transformFace)(face, transformations);
|
|
21
|
-
}),
|
|
22
|
-
id: (0, make_id_1.makeId)(),
|
|
23
|
-
centerPoint: transformations.reduce((point, transformation) => (0, matrix_1.multiplyMatrix)(transformation, point), element.centerPoint),
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
exports.transformElement = transformElement;
|
|
10
|
+
exports.transformFaces = transformFaces;
|
|
@@ -1,19 +1,15 @@
|
|
|
1
1
|
import type { Instruction } from '@remotion/paths';
|
|
2
|
-
import type {
|
|
2
|
+
import type { FaceType } from './map-face';
|
|
3
3
|
import type { MatrixTransform4D } from './matrix';
|
|
4
4
|
type ExtrudeElementOptions = {
|
|
5
5
|
depth: number;
|
|
6
6
|
sideColor: string;
|
|
7
|
-
frontFaceColor: string;
|
|
8
|
-
backFaceColor: string;
|
|
9
7
|
points: Instruction[];
|
|
10
|
-
strokeWidth: number;
|
|
11
8
|
description?: string;
|
|
12
|
-
strokeColor: string;
|
|
13
9
|
crispEdges: boolean;
|
|
14
10
|
};
|
|
15
|
-
export declare const extrudeElement: ({ depth, sideColor,
|
|
11
|
+
export declare const extrudeElement: ({ depth, sideColor, points, crispEdges, }: ExtrudeElementOptions) => FaceType[];
|
|
16
12
|
export declare const extrudeAndTransformElement: (options: ExtrudeElementOptions & {
|
|
17
13
|
transformations: MatrixTransform4D;
|
|
18
|
-
}) =>
|
|
14
|
+
}) => FaceType[];
|
|
19
15
|
export {};
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.extrudeAndTransformElement = exports.extrudeElement = void 0;
|
|
4
|
-
const paths_1 = require("@remotion/paths");
|
|
5
|
-
const elements_1 = require("./elements");
|
|
6
4
|
const fix_z_1 = require("./fix-z");
|
|
7
5
|
const map_face_1 = require("./map-face");
|
|
8
6
|
const matrix_1 = require("./matrix");
|
|
@@ -44,22 +42,15 @@ const inverseInstruction = (instruction, comingFrom) => {
|
|
|
44
42
|
}
|
|
45
43
|
throw new Error('Unknown instruction type');
|
|
46
44
|
};
|
|
47
|
-
const extrudeElement = ({ depth, sideColor,
|
|
48
|
-
const boundingBox = paths_1.PathInternals.getBoundingBoxFromInstructions((0, paths_1.reduceInstructions)(points));
|
|
49
|
-
const centerX = (boundingBox.x2 - boundingBox.x1) / 2 + boundingBox.x1;
|
|
50
|
-
const centerY = (boundingBox.y2 - boundingBox.y1) / 2 + boundingBox.y1;
|
|
45
|
+
const extrudeElement = ({ depth, sideColor, points, crispEdges, }) => {
|
|
51
46
|
const threeD = (0, fix_z_1.turnInto3D)(points);
|
|
52
47
|
const instructions = {
|
|
53
48
|
centerPoint: [0, 0, 0, 1],
|
|
54
49
|
points: (0, subdivide_instructions_1.subdivideInstructions)((0, subdivide_instructions_1.subdivideInstructions)((0, subdivide_instructions_1.subdivideInstructions)(threeD))),
|
|
55
|
-
strokeWidth,
|
|
56
|
-
strokeColor,
|
|
57
50
|
color: 'black',
|
|
58
|
-
description: description !== null && description !== void 0 ? description : 'extruded',
|
|
59
51
|
crispEdges,
|
|
60
52
|
};
|
|
61
|
-
const unscaledBackFace = (0, map_face_1.transformFace)(instructions, []);
|
|
62
|
-
const unscaledFrontFace = (0, map_face_1.transformFace)(instructions, [(0, matrix_1.translateZ)(-depth)]);
|
|
53
|
+
const unscaledBackFace = (0, map_face_1.transformFace)(instructions, [(0, matrix_1.translateZ)(depth / 2)]);
|
|
63
54
|
const inbetween = unscaledBackFace.points.map((t, i) => {
|
|
64
55
|
const nextInstruction = i === unscaledBackFace.points.length - 1
|
|
65
56
|
? unscaledBackFace.points[0]
|
|
@@ -99,30 +90,16 @@ const extrudeElement = ({ depth, sideColor, frontFaceColor, backFaceColor, point
|
|
|
99
90
|
points: newInstructions,
|
|
100
91
|
color: sideColor,
|
|
101
92
|
centerPoint: [0, 0, 0, 1],
|
|
102
|
-
strokeWidth: 0,
|
|
103
|
-
strokeColor: 'black',
|
|
104
|
-
description: description + 'inbetween',
|
|
105
93
|
crispEdges: true,
|
|
106
94
|
};
|
|
107
95
|
});
|
|
108
|
-
|
|
109
|
-
...unscaledFrontFace,
|
|
110
|
-
color: frontFaceColor,
|
|
111
|
-
description: description + '(front)',
|
|
112
|
-
};
|
|
113
|
-
const scaledBackFace = {
|
|
114
|
-
...unscaledBackFace,
|
|
115
|
-
color: backFaceColor,
|
|
116
|
-
description: description + '(back)',
|
|
117
|
-
};
|
|
118
|
-
return (0, elements_1.makeElement)({
|
|
119
|
-
face: [...inbetween, scaledFrontFace, scaledBackFace],
|
|
120
|
-
centerPoint: [centerX, centerY, 0, 1],
|
|
121
|
-
description,
|
|
122
|
-
});
|
|
96
|
+
return inbetween;
|
|
123
97
|
};
|
|
124
98
|
exports.extrudeElement = extrudeElement;
|
|
125
99
|
const extrudeAndTransformElement = (options) => {
|
|
126
|
-
|
|
100
|
+
const inbetween = (0, exports.extrudeElement)(options);
|
|
101
|
+
return inbetween.map((face) => ({
|
|
102
|
+
...(0, map_face_1.transformFace)(face, [options.transformations]),
|
|
103
|
+
}));
|
|
127
104
|
};
|
|
128
105
|
exports.extrudeAndTransformElement = extrudeAndTransformElement;
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export { MatrixTransform4D } from './matrix';
|
|
2
2
|
export type { ThreeDReducedInstruction } from './3d-svg';
|
|
3
3
|
export { threeDIntoSvgPath } from './3d-svg';
|
|
4
|
-
export { transformElement } from './elements';
|
|
5
4
|
export { extrudeAndTransformElement, extrudeElement } from './extrude-element';
|
|
6
5
|
export { transformPath } from './map-face';
|
|
7
|
-
export { interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, rotateZ, scaled, translateX, translateY, translateZ, } from './matrix';
|
|
6
|
+
export { interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, rotateZ, scaleX, scaleY, scaled, translateX, translateY, translateZ, } from './matrix';
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.translateZ = exports.translateY = exports.translateX = exports.scaled = exports.rotateZ = exports.rotateY = exports.rotateX = exports.reduceMatrices = exports.makeMatrix3dTransform = exports.interpolateMatrix4d = exports.transformPath = exports.extrudeElement = exports.extrudeAndTransformElement = exports.
|
|
3
|
+
exports.translateZ = exports.translateY = exports.translateX = exports.scaled = exports.scaleY = exports.scaleX = exports.rotateZ = exports.rotateY = exports.rotateX = exports.reduceMatrices = exports.makeMatrix3dTransform = exports.interpolateMatrix4d = exports.transformPath = exports.extrudeElement = exports.extrudeAndTransformElement = exports.threeDIntoSvgPath = void 0;
|
|
4
4
|
var _3d_svg_1 = require("./3d-svg");
|
|
5
5
|
Object.defineProperty(exports, "threeDIntoSvgPath", { enumerable: true, get: function () { return _3d_svg_1.threeDIntoSvgPath; } });
|
|
6
|
-
var elements_1 = require("./elements");
|
|
7
|
-
Object.defineProperty(exports, "transformElement", { enumerable: true, get: function () { return elements_1.transformElement; } });
|
|
8
6
|
var extrude_element_1 = require("./extrude-element");
|
|
9
7
|
Object.defineProperty(exports, "extrudeAndTransformElement", { enumerable: true, get: function () { return extrude_element_1.extrudeAndTransformElement; } });
|
|
10
8
|
Object.defineProperty(exports, "extrudeElement", { enumerable: true, get: function () { return extrude_element_1.extrudeElement; } });
|
|
@@ -17,6 +15,8 @@ Object.defineProperty(exports, "reduceMatrices", { enumerable: true, get: functi
|
|
|
17
15
|
Object.defineProperty(exports, "rotateX", { enumerable: true, get: function () { return matrix_1.rotateX; } });
|
|
18
16
|
Object.defineProperty(exports, "rotateY", { enumerable: true, get: function () { return matrix_1.rotateY; } });
|
|
19
17
|
Object.defineProperty(exports, "rotateZ", { enumerable: true, get: function () { return matrix_1.rotateZ; } });
|
|
18
|
+
Object.defineProperty(exports, "scaleX", { enumerable: true, get: function () { return matrix_1.scaleX; } });
|
|
19
|
+
Object.defineProperty(exports, "scaleY", { enumerable: true, get: function () { return matrix_1.scaleY; } });
|
|
20
20
|
Object.defineProperty(exports, "scaled", { enumerable: true, get: function () { return matrix_1.scaled; } });
|
|
21
21
|
Object.defineProperty(exports, "translateX", { enumerable: true, get: function () { return matrix_1.translateX; } });
|
|
22
22
|
Object.defineProperty(exports, "translateY", { enumerable: true, get: function () { return matrix_1.translateY; } });
|
package/dist/cjs/map-face.d.ts
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import { type ThreeDReducedInstruction } from './3d-svg';
|
|
2
|
-
import type { ThreeDElement } from './elements';
|
|
3
2
|
import type { MatrixTransform4D, Vector4D } from './matrix';
|
|
4
3
|
export type FaceType = {
|
|
5
4
|
color: string;
|
|
6
5
|
points: ThreeDReducedInstruction[];
|
|
7
6
|
centerPoint: Vector4D;
|
|
8
|
-
strokeWidth: number;
|
|
9
|
-
strokeColor: string;
|
|
10
|
-
description: string;
|
|
11
7
|
crispEdges: boolean;
|
|
12
8
|
};
|
|
13
9
|
export declare const translateSvgInstruction: (instruction: ThreeDReducedInstruction, x: number, y: number, z: number) => ThreeDReducedInstruction;
|
|
@@ -20,12 +16,10 @@ export declare const transformFaces: ({ faces, transformations, }: {
|
|
|
20
16
|
faces: FaceType[];
|
|
21
17
|
transformations: MatrixTransform4D[];
|
|
22
18
|
}) => FaceType[];
|
|
23
|
-
export declare const
|
|
24
|
-
export declare const makeFace: ({ points, strokeWidth, strokeColor, fill, description, crispEdges, }: {
|
|
19
|
+
export declare const makeFace: ({ points, fill, crispEdges, }: {
|
|
25
20
|
points: string | ThreeDReducedInstruction[];
|
|
26
21
|
strokeWidth: number;
|
|
27
22
|
strokeColor: string;
|
|
28
23
|
fill: string;
|
|
29
|
-
description: string;
|
|
30
24
|
crispEdges: boolean;
|
|
31
25
|
}) => FaceType;
|
package/dist/cjs/map-face.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeFace = exports.
|
|
3
|
+
exports.makeFace = exports.transformFaces = exports.transformFace = exports.transformPath = exports.translateSvgInstruction = void 0;
|
|
4
4
|
const paths_1 = require("@remotion/paths");
|
|
5
5
|
const _3d_svg_1 = require("./3d-svg");
|
|
6
|
-
const elements_1 = require("./elements");
|
|
7
6
|
const fix_z_1 = require("./fix-z");
|
|
8
7
|
const matrix_1 = require("./matrix");
|
|
9
8
|
const translateSvgInstruction = (instruction, x, y, z) => {
|
|
@@ -113,21 +112,12 @@ const transformFaces = ({ faces, transformations, }) => {
|
|
|
113
112
|
});
|
|
114
113
|
};
|
|
115
114
|
exports.transformFaces = transformFaces;
|
|
116
|
-
const
|
|
117
|
-
return elements.map((element) => {
|
|
118
|
-
return (0, elements_1.transformElement)(element, transformations);
|
|
119
|
-
});
|
|
120
|
-
};
|
|
121
|
-
exports.transformElements = transformElements;
|
|
122
|
-
const makeFace = ({ points, strokeWidth, strokeColor, fill, description, crispEdges, }) => {
|
|
115
|
+
const makeFace = ({ points, fill, crispEdges, }) => {
|
|
123
116
|
const centerPoint = [0, 0, 0, 1];
|
|
124
117
|
return {
|
|
125
118
|
centerPoint,
|
|
126
119
|
color: fill,
|
|
127
120
|
points: typeof points === 'string' ? (0, fix_z_1.turnInto3D)((0, paths_1.parsePath)(points)) : points,
|
|
128
|
-
strokeWidth,
|
|
129
|
-
strokeColor,
|
|
130
|
-
description,
|
|
131
121
|
crispEdges,
|
|
132
122
|
};
|
|
133
123
|
};
|
package/dist/cjs/matrix.d.ts
CHANGED
|
@@ -34,10 +34,12 @@ export type MatrixTransform4D = [
|
|
|
34
34
|
number
|
|
35
35
|
];
|
|
36
36
|
export declare const multiplyMatrices: (matrix1: MatrixTransform4D, matrix2: MatrixTransform4D) => MatrixTransform4D;
|
|
37
|
-
export declare const reduceMatrices: (matrices: MatrixTransform4D[]) => MatrixTransform4D;
|
|
37
|
+
export declare const reduceMatrices: (matrices: (MatrixTransform4D | null)[]) => MatrixTransform4D;
|
|
38
38
|
export declare const makeMatrix3dTransform: (matrix: MatrixTransform4D) => string;
|
|
39
39
|
export declare const interpolateMatrix4d: (input: number, matrix1: MatrixTransform4D, matrix2: MatrixTransform4D) => MatrixTransform4D;
|
|
40
40
|
export declare const scaled: (value: number | Vector) => MatrixTransform4D;
|
|
41
|
+
export declare const scaleX: (x: number) => MatrixTransform4D;
|
|
42
|
+
export declare const scaleY: (y: number) => MatrixTransform4D;
|
|
41
43
|
export declare const normalize: (v: Vector) => Vector;
|
|
42
44
|
export declare const normalize4d: (v: Vector4D) => Vector4D;
|
|
43
45
|
export declare const dot: (a: number[], b: number[]) => number;
|
package/dist/cjs/matrix.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.sub4d = exports.multiplyMatrix = exports.mulScalar = exports.translateZ = exports.translateY = exports.translateX = exports.dot = exports.normalize4d = exports.normalize = exports.scaled = exports.interpolateMatrix4d = exports.makeMatrix3dTransform = exports.reduceMatrices = exports.multiplyMatrices = exports.rotateZ = exports.translated4d = exports.rotateY = exports.rotateX = exports.m44multiply = exports.identity4 = exports.stride = void 0;
|
|
3
|
+
exports.sub4d = exports.multiplyMatrix = exports.mulScalar = exports.translateZ = exports.translateY = exports.translateX = exports.dot = exports.normalize4d = exports.normalize = exports.scaleY = exports.scaleX = exports.scaled = exports.interpolateMatrix4d = exports.makeMatrix3dTransform = exports.reduceMatrices = exports.multiplyMatrices = exports.rotateZ = exports.translated4d = exports.rotateY = exports.rotateX = exports.m44multiply = exports.identity4 = exports.stride = void 0;
|
|
4
4
|
exports.multiplyMatrixAndSvgInstruction = multiplyMatrixAndSvgInstruction;
|
|
5
|
+
const truthy_1 = require("./truthy");
|
|
5
6
|
const stride = function ({ v, m, width, offset, colStride, }) {
|
|
6
7
|
for (let i = 0; i < v.length; i++) {
|
|
7
8
|
m[i * width + // Column
|
|
@@ -92,6 +93,7 @@ const multiplyMatrices = (matrix1, matrix2) => {
|
|
|
92
93
|
exports.multiplyMatrices = multiplyMatrices;
|
|
93
94
|
const reduceMatrices = (matrices) => {
|
|
94
95
|
return matrices
|
|
96
|
+
.filter(truthy_1.truthy)
|
|
95
97
|
.slice()
|
|
96
98
|
.reverse()
|
|
97
99
|
.reduce((acc, cur) => {
|
|
@@ -149,6 +151,14 @@ const scaled = function (value) {
|
|
|
149
151
|
return (0, exports.stride)({ v: vec, m: (0, exports.identity4)(), width: 4, offset: 0, colStride: 1 });
|
|
150
152
|
};
|
|
151
153
|
exports.scaled = scaled;
|
|
154
|
+
const scaleX = (x) => {
|
|
155
|
+
return (0, exports.scaled)([x, 1, 1]);
|
|
156
|
+
};
|
|
157
|
+
exports.scaleX = scaleX;
|
|
158
|
+
const scaleY = (y) => {
|
|
159
|
+
return (0, exports.scaled)([1, y, 1]);
|
|
160
|
+
};
|
|
161
|
+
exports.scaleY = scaleY;
|
|
152
162
|
const rotatedUnitSinCos = function (axisVec, sinAngle, cosAngle) {
|
|
153
163
|
const x = axisVec[0];
|
|
154
164
|
const y = axisVec[1];
|