@remotion/web-renderer: Skip very compressed transforms for performance

packages/web-renderer/src/drawing/get-pretransform-rect.ts

@@ -1,3 +1,8 @@
+// In some cases, we get a matrix that is too compressed:
+// e.g. https://github.com/remotion-dev/remotion/issues/6185
+// > You're rotating around the X-axis by ~89.96°, which means the Y-axis gets compressed to ⁠cos(89.96°) ≈ 0.000691 of its original size in the viewport.
+const MAX_SCALE_FACTOR = 100;
+
 export function getPreTransformRect(
 	targetRect: DOMRect,
 	matrix: DOMMatrix,
@@ -11,6 +16,17 @@ export function getPreTransformRect(
 	const basisX = {x: unitX.x - origin.x, y: unitX.y - origin.y};
 	const basisY = {x: unitY.x - origin.x, y: unitY.y - origin.y};
 
+	// Check effective scale in each axis
+	const scaleX = Math.hypot(basisX.x, basisX.y);
+	const scaleY = Math.hypot(basisY.x, basisY.y);
+
+	// If either axis is too compressed, the inverse will explode
+	const minScale = Math.min(scaleX, scaleY);
+	if (minScale < 1 / MAX_SCALE_FACTOR) {
+		// Content is nearly invisible, e.g. 89.96deg X rotation (edge-on view)
+		return new DOMRect(0, 0, 0, 0);
+	}
+
 	// 3. Build the effective 2D matrix and invert it
 	const effective2D = new DOMMatrix([
 		basisX.x,

packages/web-renderer/src/test/Root.tsx

@@ -24,6 +24,7 @@ import {hugeImageTransform} from './fixtures/huge-image-transform';
 import {inside3dTransform} from './fixtures/inside-3d-transform';
 import {lineHeight} from './fixtures/line-height';
 import {linearGradient} from './fixtures/linear-gradient';
+import {manyLayers} from './fixtures/many-layers';
 import {maskImage} from './fixtures/mask-image';
 import {multiLevelTransformOrigins} from './fixtures/multi-level-transform-origins';
 import {nestedTranslateScale} from './fixtures/nested-translate-scale';
@@ -134,6 +135,7 @@ export const Root: React.FC = () => {
 				<Composition {...inside3dTransform} />
 				<Composition {...flexContainer} />
 				<Composition {...deeplyNestedTransform} />
+				<Composition {...manyLayers} />
 			</Folder>
 		</>
 	);