@remotion/svg-3d-engine 4.0.251 → 4.0.253

package/.turbo/turbo-make.log

@@ -1,5 +1,6 @@
 
 
-> @remotion/svg-3d-engine@4.0.250 make /Users/jonathanburger/remotion/packages/svg-3d-engine
+> @remotion/svg-3d-engine@4.0.252 make /Users/jonathanburger/remotion/packages/svg-3d-engine
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
+Generated.

package/bundle.ts

@@ -20,3 +20,4 @@ const text = await file.text();
 await Bun.write('dist/esm/index.mjs', text);
 
 export {};
+console.log('Generated.');

package/dist/cjs/elements.d.ts

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

package/dist/cjs/elements.js

@@ -1,26 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformElement = exports.makeElement = void 0;
-const make_id_1 = require("./make-id");
+exports.transformFaces = void 0;
 const map_face_1 = require("./map-face");
-const matrix_1 = require("./matrix");
-const makeElement = ({ face: faces, centerPoint, description, }) => {
-    return {
-        faces,
-        id: (0, make_id_1.makeId)(),
-        centerPoint,
-        description,
-    };
+const transformFaces = (faces, transformations) => {
+    return faces.map((face) => {
+        return (0, map_face_1.transformFace)(face, transformations);
+    });
 };
-exports.makeElement = makeElement;
-const transformElement = (element, transformations) => {
-    return {
-        ...element,
-        faces: element.faces.map((face) => {
-            return (0, map_face_1.transformFace)(face, transformations);
-        }),
-        id: (0, make_id_1.makeId)(),
-        centerPoint: transformations.reduce((point, transformation) => (0, matrix_1.multiplyMatrix)(transformation, point), element.centerPoint),
-    };
-};
-exports.transformElement = transformElement;
+exports.transformFaces = transformFaces;

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

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

package/dist/cjs/extrude-element.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extrudeAndTransformElement = exports.extrudeElement = void 0;
-const paths_1 = require("@remotion/paths");
-const elements_1 = require("./elements");
 const fix_z_1 = require("./fix-z");
 const map_face_1 = require("./map-face");
 const matrix_1 = require("./matrix");
@@ -44,22 +42,15 @@ const inverseInstruction = (instruction, comingFrom) => {
     }
     throw new Error('Unknown instruction type');
 };
-const extrudeElement = ({ depth, sideColor, frontFaceColor, backFaceColor, points, strokeWidth, description = 'extruded', strokeColor, crispEdges, }) => {
-    const boundingBox = paths_1.PathInternals.getBoundingBoxFromInstructions((0, paths_1.reduceInstructions)(points));
-    const centerX = (boundingBox.x2 - boundingBox.x1) / 2 + boundingBox.x1;
-    const centerY = (boundingBox.y2 - boundingBox.y1) / 2 + boundingBox.y1;
+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))),
-        strokeWidth,
-        strokeColor,
         color: 'black',
-        description: description !== null && description !== void 0 ? description : 'extruded',
         crispEdges,
     };
-    const unscaledBackFace = (0, map_face_1.transformFace)(instructions, []);
-    const unscaledFrontFace = (0, map_face_1.transformFace)(instructions, [(0, matrix_1.translateZ)(-depth)]);
+    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]
@@ -99,30 +90,16 @@ const extrudeElement = ({ depth, sideColor, frontFaceColor, backFaceColor, point
             points: newInstructions,
             color: sideColor,
             centerPoint: [0, 0, 0, 1],
-            strokeWidth: 0,
-            strokeColor: 'black',
-            description: description + 'inbetween',
             crispEdges: true,
         };
     });
-    const scaledFrontFace = {
-        ...unscaledFrontFace,
-        color: frontFaceColor,
-        description: description + '(front)',
-    };
-    const scaledBackFace = {
-        ...unscaledBackFace,
-        color: backFaceColor,
-        description: description + '(back)',
-    };
-    return (0, elements_1.makeElement)({
-        face: [...inbetween, scaledFrontFace, scaledBackFace],
-        centerPoint: [centerX, centerY, 0, 1],
-        description,
-    });
+    return inbetween;
 };
 exports.extrudeElement = extrudeElement;
 const extrudeAndTransformElement = (options) => {
-    return (0, elements_1.transformElement)((0, exports.extrudeElement)(options), [options.transformations]);
+    const inbetween = (0, exports.extrudeElement)(options);
+    return inbetween.map((face) => ({
+        ...(0, map_face_1.transformFace)(face, [options.transformations]),
+    }));
 };
 exports.extrudeAndTransformElement = extrudeAndTransformElement;

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -1,22 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.transformElement = exports.threeDIntoSvgPath = void 0;
+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 elements_1 = require("./elements");
-Object.defineProperty(exports, "transformElement", { enumerable: true, get: function () { return elements_1.transformElement; } });
 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; } });

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

@@ -1,13 +1,9 @@
 import { type ThreeDReducedInstruction } from './3d-svg';
-import type { ThreeDElement } from './elements';
 import type { MatrixTransform4D, Vector4D } from './matrix';
 export type FaceType = {
     color: string;
     points: ThreeDReducedInstruction[];
     centerPoint: Vector4D;
-    strokeWidth: number;
-    strokeColor: string;
-    description: string;
     crispEdges: boolean;
 };
 export declare const translateSvgInstruction: (instruction: ThreeDReducedInstruction, x: number, y: number, z: number) => ThreeDReducedInstruction;
@@ -20,12 +16,10 @@ export declare const transformFaces: ({ faces, transformations, }: {
     faces: FaceType[];
     transformations: MatrixTransform4D[];
 }) => FaceType[];
-export declare const transformElements: (elements: ThreeDElement[], transformations: MatrixTransform4D[]) => ThreeDElement[];
-export declare const makeFace: ({ points, strokeWidth, strokeColor, fill, description, crispEdges, }: {
+export declare const makeFace: ({ points, fill, crispEdges, }: {
     points: string | ThreeDReducedInstruction[];
     strokeWidth: number;
     strokeColor: string;
     fill: string;
-    description: string;
     crispEdges: boolean;
 }) => FaceType;

package/dist/cjs/map-face.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeFace = exports.transformElements = exports.transformFaces = exports.transformFace = exports.transformPath = exports.translateSvgInstruction = void 0;
+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 elements_1 = require("./elements");
 const fix_z_1 = require("./fix-z");
 const matrix_1 = require("./matrix");
 const translateSvgInstruction = (instruction, x, y, z) => {
@@ -113,21 +112,12 @@ const transformFaces = ({ faces, transformations, }) => {
     });
 };
 exports.transformFaces = transformFaces;
-const transformElements = (elements, transformations) => {
-    return elements.map((element) => {
-        return (0, elements_1.transformElement)(element, transformations);
-    });
-};
-exports.transformElements = transformElements;
-const makeFace = ({ points, strokeWidth, strokeColor, fill, description, crispEdges, }) => {
+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,
-        strokeWidth,
-        strokeColor,
-        description,
         crispEdges,
     };
 };

package/dist/cjs/matrix.d.ts

@@ -34,10 +34,18 @@ export type MatrixTransform4D = [
     number
 ];
 export declare const multiplyMatrices: (matrix1: MatrixTransform4D, matrix2: MatrixTransform4D) => MatrixTransform4D;
-export declare const reduceMatrices: (matrices: 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;

package/dist/cjs/matrix.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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.aroundCenterPoint = exports.reduceMatrices = exports.multiplyMatrices = exports.rotateZ = exports.translated4d = exports.rotateY = exports.rotateX = exports.m44multiply = exports.identity4 = exports.stride = void 0;
 exports.multiplyMatrixAndSvgInstruction = multiplyMatrixAndSvgInstruction;
+const truthy_1 = require("./truthy");
 const stride = function ({ v, m, width, offset, colStride, }) {
     for (let i = 0; i < v.length; i++) {
         m[i * width + // Column
@@ -92,6 +93,7 @@ const multiplyMatrices = (matrix1, matrix2) => {
 exports.multiplyMatrices = multiplyMatrices;
 const reduceMatrices = (matrices) => {
     return matrices
+        .filter(truthy_1.truthy)
         .slice()
         .reverse()
         .reduce((acc, cur) => {
@@ -99,6 +101,18 @@ const reduceMatrices = (matrices) => {
     }, (0, exports.identity4)());
 };
 exports.reduceMatrices = reduceMatrices;
+const aroundCenterPoint = ({ matrix, x, y, z, }) => {
+    return (0, exports.reduceMatrices)([
+        (0, exports.translateX)(-x),
+        (0, exports.translateY)(-y),
+        (0, exports.translateZ)(-z),
+        matrix,
+        (0, exports.translateX)(x),
+        (0, exports.translateY)(y),
+        (0, exports.translateZ)(z),
+    ]);
+};
+exports.aroundCenterPoint = aroundCenterPoint;
 const makeMatrix3dTransform = function (matrix) {
     return `matrix3d(${[
         matrix[0],
@@ -149,6 +163,14 @@ const scaled = function (value) {
     return (0, exports.stride)({ v: vec, m: (0, exports.identity4)(), width: 4, offset: 0, colStride: 1 });
 };
 exports.scaled = scaled;
+const scaleX = (x) => {
+    return (0, exports.scaled)([x, 1, 1]);
+};
+exports.scaleX = scaleX;
+const scaleY = (y) => {
+    return (0, exports.scaled)([1, y, 1]);
+};
+exports.scaleY = scaleY;
 const rotatedUnitSinCos = function (axisVec, sinAngle, cosAngle) {
     const x = axisVec[0];
     const y = axisVec[1];