@remotion/svg-3d-engine 4.0.364 → 4.0.365

package/dist/cjs/3d-svg.d.ts

@@ -0,0 +1,22 @@
+import type { Vector4D } from './matrix';
+export type ThreeDReducedInstruction = {
+    type: 'M';
+    point: Vector4D;
+} | {
+    type: 'L';
+    point: Vector4D;
+} | {
+    type: 'C';
+    cp1: Vector4D;
+    cp2: Vector4D;
+    point: Vector4D;
+} | {
+    type: 'Q';
+    cp: Vector4D;
+    point: Vector4D;
+} | {
+    type: 'Z';
+    point: Vector4D;
+};
+export declare const serializeThreeDReducedInstruction: (instruction: ThreeDReducedInstruction) => string;
+export declare const threeDIntoSvgPath: (instructions: ThreeDReducedInstruction[]) => string;

package/dist/cjs/3d-svg.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.threeDIntoSvgPath = exports.serializeThreeDReducedInstruction = void 0;
+const serializeThreeDReducedInstruction = (instruction) => {
+    if (instruction.type === 'M') {
+        return `M ${instruction.point[0]} ${instruction.point[1]}`;
+    }
+    if (instruction.type === 'L') {
+        return `L ${instruction.point[0]} ${instruction.point[1]}`;
+    }
+    if (instruction.type === 'C') {
+        return `C ${instruction.cp1[0]} ${instruction.cp1[1]} ${instruction.cp2[0]} ${instruction.cp2[1]} ${instruction.point[0]} ${instruction.point[1]}`;
+    }
+    if (instruction.type === 'Q') {
+        return `Q ${instruction.cp[0]} ${instruction.cp[1]} ${instruction.point[0]} ${instruction.point[1]}`;
+    }
+    if (instruction.type === 'Z') {
+        return 'Z';
+    }
+    throw new Error('Unknown instruction type');
+};
+exports.serializeThreeDReducedInstruction = serializeThreeDReducedInstruction;
+const threeDIntoSvgPath = (instructions) => instructions
+    .map((instruction) => (0, exports.serializeThreeDReducedInstruction)(instruction))
+    .join(' ');
+exports.threeDIntoSvgPath = threeDIntoSvgPath;

package/dist/cjs/elements.d.ts

@@ -0,0 +1,8 @@
+import type { FaceType } from './map-face';
+import type { MatrixTransform4D } from './matrix';
+export type ThreeDElement = {
+    faces: FaceType[];
+    id: string;
+    description: string;
+};
+export declare const transformFaces: (faces: FaceType[], transformations: MatrixTransform4D[]) => FaceType[];

package/dist/cjs/elements.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformFaces = void 0;
+const map_face_1 = require("./map-face");
+const transformFaces = (faces, transformations) => {
+    return faces.map((face) => {
+        return (0, map_face_1.transformFace)(face, transformations);
+    });
+};
+exports.transformFaces = transformFaces;

package/dist/cjs/extrude-element.d.ts

@@ -0,0 +1,15 @@
+import type { Instruction } from '@remotion/paths';
+import type { FaceType } from './map-face';
+import type { MatrixTransform4D } from './matrix';
+type ExtrudeElementOptions = {
+    depth: number;
+    sideColor: string;
+    points: Instruction[];
+    description?: string;
+    crispEdges: boolean;
+};
+export declare const extrudeElement: ({ depth, sideColor, points, crispEdges, }: ExtrudeElementOptions) => FaceType[];
+export declare const extrudeAndTransformElement: (options: ExtrudeElementOptions & {
+    transformations: MatrixTransform4D;
+}) => FaceType[];
+export {};

package/dist/cjs/extrude-element.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extrudeAndTransformElement = exports.extrudeElement = void 0;
+const fix_z_1 = require("./fix-z");
+const map_face_1 = require("./map-face");
+const matrix_1 = require("./matrix");
+const subdivide_instructions_1 = require("./subdivide-instructions");
+const truthy_1 = require("./truthy");
+const inverseInstruction = (instruction, comingFrom) => {
+    if (instruction.type === 'M') {
+        return {
+            type: 'M',
+            point: comingFrom,
+        };
+    }
+    if (instruction.type === 'L') {
+        return {
+            type: 'L',
+            point: comingFrom,
+        };
+    }
+    if (instruction.type === 'C') {
+        return {
+            type: 'C',
+            point: comingFrom,
+            cp1: instruction.cp2,
+            cp2: instruction.cp1,
+        };
+    }
+    if (instruction.type === 'Q') {
+        return {
+            type: 'Q',
+            point: comingFrom,
+            cp: instruction.cp,
+        };
+    }
+    if (instruction.type === 'Z') {
+        return {
+            type: 'L',
+            point: comingFrom,
+        };
+    }
+    throw new Error('Unknown instruction type');
+};
+const extrudeElement = ({ depth, sideColor, points, crispEdges, }) => {
+    const threeD = (0, fix_z_1.turnInto3D)(points);
+    const instructions = {
+        centerPoint: [0, 0, 0, 1],
+        points: (0, subdivide_instructions_1.subdivideInstructions)((0, subdivide_instructions_1.subdivideInstructions)((0, subdivide_instructions_1.subdivideInstructions)(threeD))),
+        color: 'black',
+        crispEdges,
+    };
+    const unscaledBackFace = (0, map_face_1.transformFace)(instructions, [(0, matrix_1.translateZ)(depth / 2)]);
+    const inbetween = unscaledBackFace.points.map((t, i) => {
+        const nextInstruction = i === unscaledBackFace.points.length - 1
+            ? unscaledBackFace.points[0]
+            : unscaledBackFace.points[i + 1];
+        const currentPoint = t.point;
+        const nextPoint = nextInstruction.point;
+        const movingOver = [
+            nextPoint[0],
+            nextPoint[1],
+            nextPoint[2] - depth,
+            nextPoint[3],
+        ];
+        const translatedInstruction = (0, map_face_1.translateSvgInstruction)(inverseInstruction(nextInstruction, currentPoint), 0, 0, -depth);
+        const newInstructions = [
+            {
+                type: 'M',
+                point: currentPoint,
+            },
+            nextInstruction,
+            nextInstruction.type === 'Z'
+                ? {
+                    type: 'M',
+                    point: nextInstruction.point,
+                }
+                : null,
+            {
+                type: 'L',
+                point: movingOver,
+            },
+            translatedInstruction,
+            {
+                type: 'L',
+                point: currentPoint,
+            },
+        ].filter(truthy_1.truthy);
+        return {
+            points: newInstructions,
+            color: sideColor,
+            centerPoint: [0, 0, 0, 1],
+            crispEdges: true,
+        };
+    });
+    return inbetween;
+};
+exports.extrudeElement = extrudeElement;
+const extrudeAndTransformElement = (options) => {
+    const inbetween = (0, exports.extrudeElement)(options);
+    return inbetween.map((face) => ({
+        ...(0, map_face_1.transformFace)(face, [options.transformations]),
+    }));
+};
+exports.extrudeAndTransformElement = extrudeAndTransformElement;

package/dist/cjs/fix-z.d.ts

@@ -0,0 +1,3 @@
+import type { Instruction } from '@remotion/paths';
+import type { ThreeDReducedInstruction } from './3d-svg';
+export declare const turnInto3D: (instructions: Instruction[]) => ThreeDReducedInstruction[];

package/dist/cjs/fix-z.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.turnInto3D = void 0;
+const paths_1 = require("@remotion/paths");
+const turnInto3D = (instructions) => {
+    let lastMove = [0, 0, 0, 1];
+    const newInstructions = [];
+    const reduced = (0, paths_1.reduceInstructions)(instructions);
+    for (let i = 0; i < reduced.length; i++) {
+        const instruction = reduced[i];
+        if (instruction.type === 'Z') {
+            newInstructions.push({
+                type: 'Z',
+                point: lastMove,
+            });
+        }
+        else if (instruction.type === 'M') {
+            lastMove = [instruction.x, instruction.y, 0, 1];
+            newInstructions.push({
+                point: [instruction.x, instruction.y, 0, 1],
+                type: 'M',
+            });
+        }
+        else if (instruction.type === 'L') {
+            newInstructions.push({
+                type: 'L',
+                point: [instruction.x, instruction.y, 0, 1],
+            });
+        }
+        else if (instruction.type === 'C') {
+            newInstructions.push({
+                type: 'C',
+                point: [instruction.x, instruction.y, 0, 1],
+                cp1: [instruction.cp1x, instruction.cp1y, 0, 1],
+                cp2: [instruction.cp2x, instruction.cp2y, 0, 1],
+            });
+        }
+        else {
+            throw new Error('unknown');
+        }
+    }
+    return newInstructions;
+};
+exports.turnInto3D = turnInto3D;

package/dist/cjs/index.d.ts

@@ -0,0 +1,6 @@
+export { MatrixTransform4D, Vector4D } from './matrix';
+export type { ThreeDReducedInstruction } from './3d-svg';
+export { threeDIntoSvgPath } from './3d-svg';
+export { extrudeAndTransformElement, extrudeElement } from './extrude-element';
+export { transformPath, type FaceType } from './map-face';
+export { aroundCenterPoint, interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, rotateZ, scaleX, scaleY, scaled, translateX, translateY, translateZ, } from './matrix';

package/dist/cjs/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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.aroundCenterPoint = exports.transformPath = exports.extrudeElement = exports.extrudeAndTransformElement = exports.threeDIntoSvgPath = void 0;
+var _3d_svg_1 = require("./3d-svg");
+Object.defineProperty(exports, "threeDIntoSvgPath", { enumerable: true, get: function () { return _3d_svg_1.threeDIntoSvgPath; } });
+var extrude_element_1 = require("./extrude-element");
+Object.defineProperty(exports, "extrudeAndTransformElement", { enumerable: true, get: function () { return extrude_element_1.extrudeAndTransformElement; } });
+Object.defineProperty(exports, "extrudeElement", { enumerable: true, get: function () { return extrude_element_1.extrudeElement; } });
+var map_face_1 = require("./map-face");
+Object.defineProperty(exports, "transformPath", { enumerable: true, get: function () { return map_face_1.transformPath; } });
+var matrix_1 = require("./matrix");
+Object.defineProperty(exports, "aroundCenterPoint", { enumerable: true, get: function () { return matrix_1.aroundCenterPoint; } });
+Object.defineProperty(exports, "interpolateMatrix4d", { enumerable: true, get: function () { return matrix_1.interpolateMatrix4d; } });
+Object.defineProperty(exports, "makeMatrix3dTransform", { enumerable: true, get: function () { return matrix_1.makeMatrix3dTransform; } });
+Object.defineProperty(exports, "reduceMatrices", { enumerable: true, get: function () { return matrix_1.reduceMatrices; } });
+Object.defineProperty(exports, "rotateX", { enumerable: true, get: function () { return matrix_1.rotateX; } });
+Object.defineProperty(exports, "rotateY", { enumerable: true, get: function () { return matrix_1.rotateY; } });
+Object.defineProperty(exports, "rotateZ", { enumerable: true, get: function () { return matrix_1.rotateZ; } });
+Object.defineProperty(exports, "scaleX", { enumerable: true, get: function () { return matrix_1.scaleX; } });
+Object.defineProperty(exports, "scaleY", { enumerable: true, get: function () { return matrix_1.scaleY; } });
+Object.defineProperty(exports, "scaled", { enumerable: true, get: function () { return matrix_1.scaled; } });
+Object.defineProperty(exports, "translateX", { enumerable: true, get: function () { return matrix_1.translateX; } });
+Object.defineProperty(exports, "translateY", { enumerable: true, get: function () { return matrix_1.translateY; } });
+Object.defineProperty(exports, "translateZ", { enumerable: true, get: function () { return matrix_1.translateZ; } });

package/dist/cjs/make-id.d.ts

@@ -0,0 +1 @@
+export declare const makeId: () => string;

package/dist/cjs/make-id.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeId = void 0;
+const makeId = () => {
+    return Math.random().toString().replace('.', '');
+};
+exports.makeId = makeId;

package/dist/cjs/map-face.d.ts

@@ -0,0 +1,25 @@
+import { type ThreeDReducedInstruction } from './3d-svg';
+import type { MatrixTransform4D, Vector4D } from './matrix';
+export type FaceType = {
+    color: string;
+    points: ThreeDReducedInstruction[];
+    centerPoint: Vector4D;
+    crispEdges: boolean;
+};
+export declare const translateSvgInstruction: (instruction: ThreeDReducedInstruction, x: number, y: number, z: number) => ThreeDReducedInstruction;
+export declare const transformPath: ({ path, transformation, }: {
+    path: string;
+    transformation: MatrixTransform4D;
+}) => string;
+export declare const transformFace: (face: FaceType, transformations: MatrixTransform4D[]) => FaceType;
+export declare const transformFaces: ({ faces, transformations, }: {
+    faces: FaceType[];
+    transformations: MatrixTransform4D[];
+}) => FaceType[];
+export declare const makeFace: ({ points, fill, crispEdges, }: {
+    points: string | ThreeDReducedInstruction[];
+    strokeWidth: number;
+    strokeColor: string;
+    fill: string;
+    crispEdges: boolean;
+}) => FaceType;

package/dist/cjs/map-face.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeFace = exports.transformFaces = exports.transformFace = exports.transformPath = exports.translateSvgInstruction = void 0;
+const paths_1 = require("@remotion/paths");
+const _3d_svg_1 = require("./3d-svg");
+const fix_z_1 = require("./fix-z");
+const matrix_1 = require("./matrix");
+const translateSvgInstruction = (instruction, x, y, z) => {
+    if (instruction.type === 'M') {
+        return {
+            type: 'M',
+            point: [
+                instruction.point[0] + x,
+                instruction.point[1] + y,
+                instruction.point[2] + z,
+                instruction.point[3],
+            ],
+        };
+    }
+    if (instruction.type === 'L') {
+        return {
+            type: 'L',
+            point: [
+                instruction.point[0] + x,
+                instruction.point[1] + y,
+                instruction.point[2] + z,
+                instruction.point[3],
+            ],
+        };
+    }
+    if (instruction.type === 'C') {
+        return {
+            type: 'C',
+            point: [
+                instruction.point[0] + x,
+                instruction.point[1] + y,
+                instruction.point[2] + z,
+                instruction.point[3],
+            ],
+            cp1: [
+                instruction.cp1[0] + x,
+                instruction.cp1[1] + y,
+                instruction.cp1[2] + z,
+                instruction.cp1[3],
+            ],
+            cp2: [
+                instruction.cp2[0] + x,
+                instruction.cp2[1] + y,
+                instruction.cp2[2] + z,
+                instruction.cp2[3],
+            ],
+        };
+    }
+    if (instruction.type === 'Q') {
+        return {
+            type: 'Q',
+            point: [
+                instruction.point[0] + x,
+                instruction.point[1] + y,
+                instruction.point[2] + z,
+                instruction.point[3],
+            ],
+            cp: [
+                instruction.cp[0] + x,
+                instruction.cp[1] + y,
+                instruction.cp[2] + z,
+                instruction.cp[3],
+            ],
+        };
+    }
+    if (instruction.type === 'Z') {
+        return {
+            type: 'Z',
+            point: [
+                instruction.point[0] + x,
+                instruction.point[1] + y,
+                instruction.point[2] + z,
+                instruction.point[3],
+            ],
+        };
+    }
+    throw new Error('Unknown instruction type: ' + JSON.stringify(instruction));
+};
+exports.translateSvgInstruction = translateSvgInstruction;
+const transformPath = ({ path, transformation, }) => {
+    const parsed = (0, paths_1.parsePath)(path);
+    const reduced = (0, paths_1.reduceInstructions)(parsed);
+    const threeD = (0, fix_z_1.turnInto3D)(reduced);
+    return (0, _3d_svg_1.threeDIntoSvgPath)(threeD.map((p) => {
+        return (0, matrix_1.multiplyMatrixAndSvgInstruction)(transformation, p);
+    }));
+};
+exports.transformPath = transformPath;
+const transformFace = (face, transformations) => {
+    return {
+        ...face,
+        points: face.points.map((p) => {
+            return transformations.reduce((acc, t) => {
+                return (0, matrix_1.multiplyMatrixAndSvgInstruction)(t, acc);
+            }, p);
+        }),
+        centerPoint: transformations.reduce((acc, t) => {
+            const result = (0, matrix_1.multiplyMatrix)(t, acc);
+            return result;
+        }, face.centerPoint),
+    };
+};
+exports.transformFace = transformFace;
+const transformFaces = ({ faces, transformations, }) => {
+    return faces.map((face) => {
+        return (0, exports.transformFace)(face, transformations);
+    });
+};
+exports.transformFaces = transformFaces;
+const makeFace = ({ points, fill, crispEdges, }) => {
+    const centerPoint = [0, 0, 0, 1];
+    return {
+        centerPoint,
+        color: fill,
+        points: typeof points === 'string' ? (0, fix_z_1.turnInto3D)((0, paths_1.parsePath)(points)) : points,
+        crispEdges,
+    };
+};
+exports.makeFace = makeFace;

package/dist/cjs/matrix.d.ts

@@ -0,0 +1,66 @@
+import type { ThreeDReducedInstruction } from './3d-svg';
+export declare const stride: ({ v, m, width, offset, colStride, }: {
+    v: Vector;
+    m: MatrixTransform4D;
+    width: number;
+    offset: number;
+    colStride: number;
+}) => MatrixTransform4D;
+export declare const identity4: () => MatrixTransform4D;
+export declare const m44multiply: (...matrices: MatrixTransform4D[]) => MatrixTransform4D;
+export type Vector2D = [number, number];
+export type Vector = [number, number, number];
+export type Vector4D = [number, number, number, number];
+export declare const rotateX: (radians: number) => MatrixTransform4D;
+export declare const rotateY: (radians: number) => MatrixTransform4D;
+export declare const translated4d: (vec: Vector) => MatrixTransform4D;
+export declare const rotateZ: (radians: number) => MatrixTransform4D;
+export type MatrixTransform4D = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+export declare const multiplyMatrices: (matrix1: MatrixTransform4D, matrix2: MatrixTransform4D) => MatrixTransform4D;
+export declare const reduceMatrices: (matrices: (MatrixTransform4D | null)[]) => MatrixTransform4D;
+export declare const aroundCenterPoint: ({ matrix, x, y, z, }: {
+    matrix: MatrixTransform4D;
+    x: number;
+    y: number;
+    z: number;
+}) => MatrixTransform4D;
+export declare const makeMatrix3dTransform: (matrix: MatrixTransform4D) => string;
+export declare const interpolateMatrix4d: (input: number, matrix1: MatrixTransform4D, matrix2: MatrixTransform4D) => MatrixTransform4D;
+export declare const scaled: (value: number | Vector) => MatrixTransform4D;
+export declare const scaleX: (x: number) => MatrixTransform4D;
+export declare const scaleY: (y: number) => MatrixTransform4D;
+export declare const normalize: (v: Vector) => Vector;
+export declare const normalize4d: (v: Vector4D) => Vector4D;
+export declare const dot: (a: number[], b: number[]) => number;
+export declare const translateX: (x: number) => MatrixTransform4D;
+export declare const translateY: (y: number) => MatrixTransform4D;
+export declare const translateZ: (z: number) => MatrixTransform4D;
+export type Camera = {
+    near: number;
+    far: number;
+    angle: number;
+    eye: Vector;
+    coa: Vector;
+    up: Vector;
+};
+export declare const mulScalar: <T extends number[]>(v: T, s: number) => T;
+export declare function multiplyMatrixAndSvgInstruction(matrix: MatrixTransform4D, point: ThreeDReducedInstruction): ThreeDReducedInstruction;
+export declare const multiplyMatrix: (matrix: MatrixTransform4D, point: Vector4D) => Vector4D;
+export declare const sub4d: (a: Vector4D, b: Vector4D) => Vector4D;