Merge pull request #6248 from remotion-dev/matrix-imprecision

Author: JonnyBurger

packages/web-renderer/src/drawing/calculate-transforms.ts

@@ -144,7 +144,7 @@ export const calculateTransforms = ({
 		throw new Error('Element computed style not found');
 	}
 
-	const needs3DTransformViaWebGL = !totalMatrix.is2D;
+	const needs3DTransformViaWebGL = !totalMatrix.isIdentity;
 	const needsMaskImage = maskImageInfo !== null;
 
 	return {

packages/web-renderer/src/drawing/process-node.ts

@@ -124,16 +124,13 @@ export const processNode = async ({
 		}
 
 		if (precompositing.needs3DTransformViaWebGL) {
-			const t = handle3dTransform({
+			drawable = handle3dTransform({
 				matrix: totalMatrix,
 				precomposeRect,
 				tempCanvas: drawable,
 				rectAfterTransforms,
 				internalState,
 			});
-			if (t) {
-				drawable = t;
-			}
 		}
 
 		const previousTransform = context.getTransform();

packages/web-renderer/src/test/3d-flattening.test.tsx

@@ -0,0 +1,19 @@
+import {test} from 'vitest';
+import {page} from 'vitest/browser';
+import {renderStillOnWeb} from '../render-still-on-web';
+import '../symbol-dispose';
+import {threeDFlattening} from './fixtures/clipped';
+import {testImage} from './utils';
+
+test('should not clip this example', async () => {
+	await page.viewport(1080, 1080);
+	const {blob} = await renderStillOnWeb({
+		licenseKey: 'free-license',
+		composition: threeDFlattening,
+		frame: 0,
+		inputProps: {},
+		imageFormat: 'png',
+	});
+
+	await testImage({blob, testId: '3d-flattening'});
+});

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

@@ -16,6 +16,7 @@ import {borderRadiusNone} from './fixtures/border-radius-none';
 import {borderRadiusPercentage} from './fixtures/border-radius-percentage';
 import {borderRadiusSimple} from './fixtures/border-radius-simple';
 import {boxShadow} from './fixtures/box-shadow';
+import {threeDFlattening} from './fixtures/clipped';
 import {complexNestedSvg} from './fixtures/complex-nested-svg';
 import {deeplyNestedTransform} from './fixtures/deeply-nested-transform';
 import {displayNone} from './fixtures/display-none';
@@ -142,6 +143,7 @@ export const Root: React.FC = () => {
 				<Composition {...flexContainer} />
 				<Composition {...deeplyNestedTransform} />
 				<Composition {...manyLayers} />
+				<Composition {...threeDFlattening} />
 			</Folder>
 		</>
 	);