Update Cube.tsx

src/3DRemotionLogo.tsx

@@ -1,10 +1,9 @@
 import {getBoundingBox, parsePath, resetPath} from '@remotion/paths';
 import {makeTriangle} from '@remotion/shapes';
 import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
-import {getCamera} from './camera';
+import {transformElement} from './element';
 import {Faces} from './Faces';
-import {extrudeInstructions} from './join-inbetween-tiles';
-import {sortFacesZIndex, transformFaces} from './map-face';
+import {extrudeElement} from './join-inbetween-tiles';
 import {
 	rotateX,
 	rotateY,
@@ -42,28 +41,26 @@ export const TriangleOut: React.FC = () => {
 
 		const color = i === 2 ? '#E9F3FD' : i === 1 ? '#C1DBF9' : '#0b84f3';
 
-		const extruded = extrudeInstructions({
+		const extruded = extrudeElement({
 			backFaceColor: color,
 			sideColor: 'black',
 			frontFaceColor: color,
 			depth,
 			points: parsed,
 			strokeWidth: 10,
+			description: `tile ${i}`,
 		});
-		const projected = transformFaces({
-			transformations: [
-				translateZ(spread * i - spread),
-				translateX(-width / 2),
-				translateY(-height / 2 + 20),
-				rotateX(-(i * delayedFrame) / 300),
-				rotateY(delayedFrame / 100),
-				rotateZ(delayedFrame / 100),
-				scaled(0.6 + zoomIn),
-			],
-			faces: extruded,
-		});
+		const projected = transformElement(extruded, [
+			translateZ(-(spread * i - spread)),
+			translateX(-width / 2),
+			translateY(-height / 2 + 20),
+			rotateX(-(i * delayedFrame) / 300),
+			rotateY(delayedFrame / 100),
+			rotateZ(delayedFrame / 100),
+			scaled(0.6 + zoomIn),
+		]);
 
-		return sortFacesZIndex(projected);
+		return projected;
 	});
 
 	return (
@@ -79,10 +76,7 @@ export const TriangleOut: React.FC = () => {
 					opacity: interpolate(frame, [0, 70], [0, 1]),
 				}}
 			>
-				<Faces
-					camera={getCamera(viewBox[2] - viewBox[0], viewBox[3] - viewBox[1])}
-					elements={paths.reverse()}
-				/>
+				<Faces elements={paths.reverse()} />
 			</svg>
 		</AbsoluteFill>
 	);

src/AudioViz.tsx

@@ -9,10 +9,9 @@ import {
 	useCurrentFrame,
 	useVideoConfig,
 } from 'remotion';
-import {getCamera} from './camera';
+import {transformElement} from './element';
 import {Faces} from './Faces';
-import {extrudeInstructions} from './join-inbetween-tiles';
-import {sortFacesZIndex, transformFaces} from './map-face';
+import {extrudeElement} from './join-inbetween-tiles';
 import {
 	rotateX,
 	rotateY,
@@ -84,31 +83,27 @@ export const AudioViz: React.FC = () => {
 			const depth: number = i % 2 === 0 ? depthIn : depthOut;
 			const color = '#0b84f3';
 
-			const extruded = extrudeInstructions({
+			const extruded = extrudeElement({
 				backFaceColor: color,
 				sideColor: 'black',
 				frontFaceColor: color,
 				depth,
 				points: parsePath(path),
 				strokeWidth: 10,
+				description: 'circle ' + i,
 			});
 
 			const spacing = boxWidth * 1.5;
 
-			return transformFaces({
-				transformations: [
-					translateY(noise2D('seed', frame / 100, i) * 5),
-					translateX(
-						-boxWidth / 2 + i * spacing - (spacing * (samples - 1)) / 2
-					),
-					translateY(-boxHeight / 2),
-					translateZ(-depth / 2),
-					rotateX(-noise2D('rotate2', frame / 800, 0) * 0.5),
-					rotateY(-noise2D('rotate3', frame / 200, 0) * 0.5),
-					rotateZ(noise2D('rotate', frame / 400, 0) * 0.5),
-				],
-				faces: extruded,
-			});
+			return transformElement(extruded, [
+				translateY(noise2D('seed', frame / 100, i) * 5),
+				translateX(-boxWidth / 2 + i * spacing - (spacing * (samples - 1)) / 2),
+				translateY(-boxHeight / 2),
+				translateZ(-depth / 2),
+				rotateX(-noise2D('rotate2', frame / 800, 0) * 0.5),
+				rotateY(-noise2D('rotate3', frame / 200, 0) * 0.5),
+				rotateZ(noise2D('rotate', frame / 400, 0) * 0.5),
+			]);
 		});
 	})();
 
@@ -120,14 +115,7 @@ export const AudioViz: React.FC = () => {
 		>
 			<Audio src={audio} />
 			<svg viewBox={viewBox.join(' ')}>
-				<Faces
-					camera={getCamera(viewBox[2] - viewBox[0], viewBox[3] - viewBox[1], [
-						Math.sin(frame / 100) * 10,
-						0,
-						Math.cos(frame / 100) * 10,
-					])}
-					elements={paths.map((p) => sortFacesZIndex(p))}
-				/>
+				<Faces elements={paths} />
 			</svg>
 		</AbsoluteFill>
 	);

src/Composition.tsx

@@ -1,10 +1,9 @@
 import {getBoundingBox, parsePath, resetPath} from '@remotion/paths';
 import {useCurrentFrame} from 'remotion';
-import {getCamera} from './camera';
+import {transformElement} from './element';
 import {Faces} from './Faces';
 import {getText, useFont} from './get-char';
-import {extrudeInstructions} from './join-inbetween-tiles';
-import {FaceType, sortFacesZIndex, transformFaces} from './map-face';
+import {extrudeElement} from './join-inbetween-tiles';
 import {rotateY} from './matrix';
 
 export const MyComposition = () => {
@@ -25,21 +24,17 @@ export const MyComposition = () => {
 
 	const depth = 150;
 
-	const inbetweenFaces: FaceType[] = extrudeInstructions({
+	const inbetweenFaces = extrudeElement({
 		points: parsePath(scaled),
 		depth,
 		sideColor: 'green',
 		frontFaceColor: 'red',
 		backFaceColor: 'blue',
 		strokeWidth: 10,
+		description: 'text',
 	});
 
-	const rotatedFaces = sortFacesZIndex(
-		transformFaces({
-			faces: inbetweenFaces,
-			transformations: [rotateY(frame / 100)],
-		})
-	);
+	const rotatedFaces = transformElement(inbetweenFaces, [rotateY(frame / 100)]);
 
 	return (
 		<svg
@@ -49,7 +44,7 @@ export const MyComposition = () => {
 				backgroundColor: 'white',
 			}}
 		>
-			<Faces elements={[rotatedFaces]} camera={getCamera(width, height)} />
+			<Faces elements={[rotatedFaces]} />
 		</svg>
 	);
 };

src/Cube.tsx

@@ -17,20 +17,13 @@ import {
 	useVideoConfig,
 } from 'remotion';
 import {z} from 'zod';
-import {getCamera} from './camera';
 import {centerPath} from './center';
+import {transformElement} from './element';
 import {Faces} from './Faces';
 import {turnInto3D} from './fix-z';
 import {getText, useFont} from './get-char';
-import {extrudeInstructions} from './join-inbetween-tiles';
-import {
-	FaceType,
-	sortFacesZIndex,
-	transformFace,
-	transformFaces,
-	translateSvgInstruction,
-} from './map-face';
-import {rotateX, rotateY, translateY, translateZ} from './matrix';
+import {extrudeElement} from './join-inbetween-tiles';
+import {rotateX, rotateY, translateX, translateY, translateZ} from './matrix';
 
 const viewBox = [-1600, -800, 3200, 1600];
 
@@ -81,13 +74,14 @@ export const Cube: React.FC<z.infer<typeof cubeSchema>> = ({label, step}) => {
 
 	const actualDepth = depth + pushIn;
 
-	const _extrudedButton: FaceType[] = extrudeInstructions({
+	const _extrudedButton = extrudeElement({
 		points: parsePath(centeredButton),
 		depth: actualDepth,
 		sideColor: 'black',
 		frontFaceColor: '#0b84f3',
 		backFaceColor: 'black',
 		strokeWidth: 10,
+		description: 'button',
 	});
 
 	const intrude = spring({
@@ -104,31 +98,23 @@ export const Cube: React.FC<z.infer<typeof cubeSchema>> = ({label, step}) => {
 		translateY(interpolate(intrude, [0, 1], [0, -20 * 7.5])),
 	];
 
-	const extrudedTo0 = transformFaces({
-		faces: _extrudedButton,
-		transformations,
-	});
+	const extrudedTo0 = transformElement(_extrudedButton, transformations);
 
 	const bBoxText = getBoundingBox(textPath);
 
-	const centeredText = turnInto3D(parsedText).map((turn) => {
-		return translateSvgInstruction(
-			turn,
-			-(bBoxText.x2 - bBoxText.x1) / 2,
-			-(bBoxText.y2 - bBoxText.y1) / 2,
-			0
-		);
-	});
-
-	const textFace = transformFace(
-		{
-			centerPoint: [0, 0, 0, 1],
+	const centeredText = transformElement(
+		turnInto3D({
+			instructions: parsedText,
 			color: 'white',
-			points: centeredText,
 			strokeWidth: 0,
 			strokeColor: 'black',
-		},
-		[translateZ(-actualDepth / 2 + 0.001)]
+			description: 'text',
+		}),
+		[
+			translateX(-(bBoxText.x2 - bBoxText.x1) / 2),
+			translateY(-(bBoxText.y2 - bBoxText.y1) / 2),
+			translateZ(actualDepth / 2 + 0.001),
+		]
 	);
 
 	const radius = interpolate(intrude, [0, 1], [0, 1200 * 7.5]);
@@ -178,15 +164,9 @@ export const Cube: React.FC<z.infer<typeof cubeSchema>> = ({label, step}) => {
 			>
 				<svg viewBox={viewBox.join(' ')} style={{overflow: 'visible'}}>
 					<Faces
-						camera={getCamera(viewBox[2], viewBox[3])}
 						elements={[
-							sortFacesZIndex(extrudedTo0),
-							sortFacesZIndex(
-								transformFaces({
-									transformations,
-									faces: [textFace],
-								})
-							),
+							extrudedTo0,
+							transformElement(centeredText, transformations),
 						]}
 					/>
 				</svg>

src/Face.tsx → src/FaceComp.tsx

@@ -1,22 +1,22 @@
 import React, {useState} from 'react';
-import {random} from 'remotion';
 import {threeDIntoSvgPath, ThreeDReducedInstruction} from './3d-svg';
+import {makeId} from './make-id';
 
 export const Face: React.FC<{
 	points: ThreeDReducedInstruction[];
 	color: string;
 	strokeColor: string;
 	strokeWidth: number;
 }> = ({color, points, strokeColor, strokeWidth}) => {
-	const [id] = useState(() => random(null).toString().replace('.', ''));
+	const [id] = useState(() => makeId());
 	const d = threeDIntoSvgPath(points);
 
 	return (
 		<>
 			<defs>
 				{strokeWidth ? (
 					<mask id={id}>
-						<path d={d} fill="white" />
+						<path shapeRendering="crispEdges" d={d} fill="white" />
 					</mask>
 				) : null}
 			</defs>

src/Faces.tsx

@@ -1,34 +1,35 @@
-import React from 'react';
-import {Face} from './Face';
-import {FaceType} from './map-face';
-import {MatrixTransform4D, multiplyMatrixAndSvgInstruction} from './matrix';
+import React, {useMemo} from 'react';
+import {ThreeDElement} from './element';
+import {Face} from './FaceComp';
 
 export const Faces: React.FC<{
-	elements: FaceType[][];
-	camera: MatrixTransform4D;
-}> = ({camera, elements}) => {
+	elements: ThreeDElement[];
+}> = ({elements}) => {
+	const faces = useMemo(() => {
+		return elements
+			.map((e) => {
+				return e.faces;
+			})
+			.flat(1);
+	}, [elements]);
+
+	const sortedFaces = useMemo(() => {
+		return faces.slice().sort((a, b) => {
+			return a.centerPoint[2] - b.centerPoint[2];
+		});
+	}, [faces]);
+
 	return (
 		<>
-			{elements.map((element, i) => {
+			{sortedFaces.map(({points, color, strokeColor, strokeWidth}, i) => {
 				return (
-					<React.Fragment key={i}>
-						{element.map(({points, color, strokeWidth}, i) => {
-							const multiplied = points.map((p) => {
-								const result = multiplyMatrixAndSvgInstruction(camera, p);
-								return result;
-							});
-
-							return (
-								<Face
-									key={JSON.stringify(points) + i}
-									strokeColor="black"
-									color={color}
-									points={multiplied}
-									strokeWidth={strokeWidth}
-								/>
-							);
-						})}
-					</React.Fragment>
+					<Face
+						key={JSON.stringify(points) + i}
+						strokeColor={strokeColor}
+						color={color}
+						points={points}
+						strokeWidth={strokeWidth}
+					/>
 				);
 			})}
 		</>