framefields 2.13.1 → 2.14.0

package/dist/{renderer-Dv_iRIyx.mjs → renderer-BVIXKfbC.mjs}

@@ -1,14 +1,14 @@
 import "./chunk-DOL2i2sR.mjs";
 import { It as getActiveMediaMetadata, _n as reportRenderDiagnostic, p as DEFAULT_DURATION_MS, rn as mediaSourceTime, vn as resolveBoolean, xn as resolveNumber } from "./dist-C8XSqfTx.mjs";
 import { i as effectReach, n as defineRenderer, r as effectMaxPixelScale, s as resolveFrameNumber, t as audioRegistry, u as solveHomography } from "./renderer-BuvKGwk3.mjs";
-import { $ as poseNodes, B as jointMatrices, F as getPrimitiveGeometry, G as measureMaxCaptionHeight, J as parseDashArray, M as fitSpansToText, N as generateExtrudedTextGeometry, _t as Light3D, ct as srtLoader, d as ScreenSpaceRelightPipeline, dt as transformScale, it as sampleMorphWeights, l as Renderer3D, mt as Camera3D, n as AudioLatentTrackCache, p as SlugFontCache, pt as resolveMediaSourceUrl, q as parseColor, rt as resolveTextSpans, st as spansText, xt as Vector3Math, yt as Matrix4Math } from "./dist-DtPPPsZV.mjs";
-import { a as createFullscreenPipeline, l as fragmentBindGroupLayout, n as PREMULTIPLIED_BLEND, t as FULLSCREEN_QUAD_WGSL } from "./gpu-D2HT3KcE.mjs";
-import { i as keyedGain, m as measureText, n as decodeAudioSource, s as resolveLayerDuration } from "./dist-CCrYOkcc.mjs";
+import { $ as poseNodes, B as jointMatrices, F as getPrimitiveGeometry, G as measureMaxCaptionHeight, J as parseDashArray, M as fitSpansToText, N as generateExtrudedTextGeometry, _t as Light3D, ct as srtLoader, d as ScreenSpaceRelightPipeline, dt as transformScale, it as sampleMorphWeights, l as Renderer3D, mt as Camera3D, n as AudioLatentTrackCache, p as SlugFontCache, pt as resolveMediaSourceUrl, q as parseColor, rt as resolveTextSpans, st as spansText, xt as Vector3Math, yt as Matrix4Math } from "./dist--Uu5bQ_6.mjs";
+import { a as createFullscreenPipeline, l as fragmentBindGroupLayout, n as PREMULTIPLIED_BLEND, t as FULLSCREEN_QUAD_WGSL } from "./gpu-R4T2Tndu.mjs";
+import { i as keyedGain, m as measureText, n as decodeAudioSource, s as resolveLayerDuration } from "./dist-B8Nby2CU.mjs";
 import { o as TemporalDeflickerPipeline } from "./dist-DgZpN6IK.mjs";
-import { B as evaluateKeyframes, I as computeLayout, N as collectNodeOps, U as initLayout, V as evaluateTrackAtFrame } from "./program-BfiB9ttP.mjs";
+import { F as collectNodeOps, G as initLayout, H as evaluateKeyframes, R as computeLayout, U as evaluateTrackAtFrame } from "./program-tFKCWU2j.mjs";
 import gsapModule from "gsap";
 
-//#region ../../nodes/node-compositor/dist/renderers-C0dsKt0u.mjs
+//#region ../../nodes/node-compositor/dist/renderers-IzbDoLXh.mjs
 /**
 * Solves a cubic bezier curve defined by control points (x1, y1) and (x2, y2)
 * for a given progress parameter t in [0, 1].
@@ -1084,6 +1084,21 @@ function has3DTransform(target, lop) {
 	return false;
 }
 const meshHasAlpha = /* @__PURE__ */ new WeakMap();
+/**
+* How far a text node's ink can reach past its layout box, in px: an outside
+* stroke reaches its full width past the outline (any other alignment, half),
+* a shadow its offset plus blur. One px of slack covers antialiasing.
+*/
+function textInkOutset(target, lop) {
+	const num = (v) => typeof v === "number" && v > 0 ? v : 0;
+	const width = num(target?.strokeWidth ?? lop.strokeWidth);
+	const stroke = Boolean(target?.stroke ?? target?.strokeColor ?? lop.stroke) ? lop.strokeAlign === "outside" ? width : width / 2 : 0;
+	let shadow = 0;
+	const shadows = lop.shadows;
+	if (Array.isArray(shadows)) for (const s of shadows) shadow = Math.max(shadow, Math.max(Math.abs(s.offset?.x ?? 0), Math.abs(s.offset?.y ?? 0)) + 2 * num(s.blurRadius));
+	const reach = stroke + shadow;
+	return reach > 0 ? Math.ceil(reach) + 1 : 0;
+}
 function hasVertexAlpha(mesh) {
 	const cached = meshHasAlpha.get(mesh);
 	if (cached !== void 0) return cached;
@@ -1177,6 +1192,8 @@ const audioTrackLatentCache = /* @__PURE__ */ new Map();
 const swarmStateMap = /* @__PURE__ */ new WeakMap();
 const deviceRenderer3DCache = /* @__PURE__ */ new WeakMap();
 /** One Renderer3D per device, target format and MSAA sample count. */
+/** The command encoder the 3D pools were last recycled for, per device. */
+const poolEncoder = /* @__PURE__ */ new WeakMap();
 function getRenderer3D(device, format, sampleCount) {
 	let byConfig = deviceRenderer3DCache.get(device);
 	if (!byConfig) {
@@ -1329,6 +1346,8 @@ function surfaceProps(target, lop, mat) {
 		out.emissiveIntensity = target?.emissiveIntensity ?? lop.emissiveIntensity ?? mat?.emissiveStrength ?? 1;
 	}
 	if (lop.castShadow !== void 0) out.castShadow = lop.castShadow;
+	out.toon = target?.toon ?? lop.toon;
+	out.outline = target?.outline ?? lop.outline;
 	return out;
 }
 function computeContainerScissor(matrix, width, height) {
@@ -1652,8 +1671,13 @@ const CompositorWebGPURenderer = async (args) => {
 		});
 		const { targetsById } = compiled;
 		seekTimeline(compiled, shiftedFrame, fps ?? 24);
-		getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d).resetPools();
-		getScreenSpaceRelightPipeline(ctx.device, ctx.renderer.format ?? "rgba8unorm").resetPools();
+		const r3d = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+		const relightPipe = getScreenSpaceRelightPipeline(ctx.device, ctx.renderer.format ?? "rgba8unorm");
+		if (poolEncoder.get(ctx.device) !== encoder) {
+			poolEncoder.set(ctx.device, encoder);
+			r3d.resetPools();
+			relightPipe.resetPools();
+		}
 		const clearColor = parseColor(vop.backgroundColor);
 		ctx.renderer.beginFrame(encoder, compView, clearColor, nativeWidth, nativeHeight, "clear").end();
 		let currentCompTex = compTex;
@@ -1874,6 +1898,7 @@ const CompositorWebGPURenderer = async (args) => {
 						toneMapping: lop.toneMapping,
 						fog: lop.fog,
 						floor: lop.floor,
+						outlines: lop.outlines,
 						...intensity$1 !== void 0 && { intensity: intensity$1 }
 					};
 					sceneBloom = lop.bloom === true ? {} : lop.bloom && typeof lop.bloom === "object" ? { ...lop.bloom } : null;
@@ -1947,11 +1972,11 @@ const CompositorWebGPURenderer = async (args) => {
 				finalTex: curTex,
 				finalView: curView
 			};
-			const r3d = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+			const r3d$1 = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
 			for (const item of pending3DItems) {
 				if (item.kind !== "mesh") continue;
-				if (item.opts.morphWeights?.length) item.meshBuffers = r3d.morphMesh(encoder, item.mesh, item.opts.morphWeights, item.opts.wireframe);
-				if (item.opts.audioDeform) item.meshBuffers = r3d.deformMesh(encoder, item.mesh, item.opts.audioDeform, item.opts.wireframe, item.meshBuffers);
+				if (item.opts.morphWeights?.length) item.meshBuffers = r3d$1.morphMesh(encoder, item.mesh, item.opts.morphWeights, item.opts.wireframe);
+				if (item.opts.audioDeform) item.meshBuffers = r3d$1.deformMesh(encoder, item.mesh, item.opts.audioDeform, item.opts.wireframe, item.meshBuffers);
 			}
 			const itemTextures = pendingTextures();
 			const scene3dTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [
@@ -1961,10 +1986,13 @@ const CompositorWebGPURenderer = async (args) => {
 				...itemTextures
 			]);
 			const scene3dView = scene3dTex.createView();
+			const outlineSetting = sceneEnvironment?.outlines;
+			const outlines = outlineSetting === true ? {} : outlineSetting || null;
+			const geometryEnabled = dofEnabled || Boolean(outlines);
 			let linearDepthTex;
 			let linearDepthView;
-			if (dofEnabled) {
-				linearDepthTex = r3d.getOrCreateLinearDepthTexture(nativeWidth, nativeHeight);
+			if (geometryEnabled) {
+				linearDepthTex = r3d$1.getOrCreateLinearDepthTexture(nativeWidth, nativeHeight);
 				linearDepthView = linearDepthTex.createView();
 			}
 			const shadow = [];
@@ -1982,7 +2010,7 @@ const CompositorWebGPURenderer = async (args) => {
 						buffers: item.meshBuffers,
 						opts: item.opts
 					};
-					receivers.push(r3d.worldBounds(caster));
+					receivers.push(r3d$1.worldBounds(caster));
 					if (item.opts.castShadow !== false && item.opts.material !== "unlit") casters.push(caster);
 				} else if (item.kind === "quad") {
 					const caster = {
@@ -1990,11 +2018,11 @@ const CompositorWebGPURenderer = async (args) => {
 						texture: item.texture,
 						opts: item.opts
 					};
-					receivers.push(r3d.worldBounds(caster));
+					receivers.push(r3d$1.worldBounds(caster));
 					if (item.opts.castShadow === true) casters.push(caster);
 				}
 				if (casters.length > 0) for (const { light, index } of shadowLights) {
-					const result = r3d.renderShadowMap(encoder, light, index, casters, receivers, {
+					const result = r3d$1.renderShadowMap(encoder, light, index, casters, receivers, {
 						mapSize: shadowMapSize,
 						layer: shadow.length,
 						layerCount: shadowLights.length
@@ -2009,7 +2037,7 @@ const CompositorWebGPURenderer = async (args) => {
 			const forward = Vector3Math.subtract(camera.target, camera.eye);
 			for (const item of pending3DItems) if (isGlass(item)) glass.push(item);
 			else if (item.kind === "mesh" && item.opts.transparent) {
-				const bounds = r3d.worldBounds({
+				const bounds = r3d$1.worldBounds({
 					kind: "mesh",
 					mesh: item.mesh,
 					opts: item.opts
@@ -2043,7 +2071,7 @@ const CompositorWebGPURenderer = async (args) => {
 					for (let j = i; j < end; j++) {
 						const item = opaque[j];
 						if (item.kind !== "mesh") throw new Error("Invalid mesh batch");
-						const matrix = r3d.meshModelMatrix(item.opts);
+						const matrix = r3d$1.meshModelMatrix(item.opts);
 						data.set(matrix, (j - i) * 32);
 						data.set(item.opts.normalMatrix ?? Light3D.computeNormalMatrix(matrix), (j - i) * 32 + 16);
 					}
@@ -2053,7 +2081,7 @@ const CompositorWebGPURenderer = async (args) => {
 							...first.opts,
 							modelMatrix: Matrix4Math.identity(),
 							normalMatrix: Matrix4Math.identity(),
-							instanceBuffer: r3d.uploadInstanceData(data),
+							instanceBuffer: r3d$1.uploadInstanceData(data),
 							instanceCount: end - i,
 							matrixInstances: true
 						}
@@ -2087,17 +2115,17 @@ const CompositorWebGPURenderer = async (args) => {
 						camera.up[2]
 					]
 				};
-				const { pass: reflPass, cameraBindGroup: reflCamBind, lightsBindGroup: reflLightsBind, reflectionTexture: reflTex } = r3d.beginReflectionPass(encoder, nativeWidth, nativeHeight, reflectedCamera, sceneLights, {
+				const { pass: reflPass, cameraBindGroup: reflCamBind, lightsBindGroup: reflLightsBind, reflectionTexture: reflTex } = r3d$1.beginReflectionPass(encoder, nativeWidth, nativeHeight, reflectedCamera, sceneLights, {
 					environment: sceneEnvironment,
 					shadow: null
 				});
-				for (const item of ordered) if (item.kind === "quad") r3d.drawTextureQuad(reflPass, reflCamBind, reflLightsBind, item.texture, item.opts, false);
-				else if (item.kind === "slug") r3d.drawSlugText(reflPass, reflCamBind, reflLightsBind, item.batches, item.opts, item.stackBase, false);
-				else if (item.kind === "mesh") r3d.drawMesh3D(reflPass, reflCamBind, reflLightsBind, item.meshBuffers ?? item.mesh, item.texture, item.opts, false);
+				for (const item of ordered) if (item.kind === "quad") r3d$1.drawTextureQuad(reflPass, reflCamBind, reflLightsBind, item.texture, item.opts, false);
+				else if (item.kind === "slug") r3d$1.drawSlugText(reflPass, reflCamBind, reflLightsBind, item.batches, item.opts, item.stackBase, false);
+				else if (item.kind === "mesh") r3d$1.drawMesh3D(reflPass, reflCamBind, reflLightsBind, item.meshBuffers ?? item.mesh, item.texture, item.opts, false);
 				reflPass.end();
-				blurredReflectionTex = r3d.blurReflection(encoder, reflTex, floorSpec.roughness ?? .35);
+				blurredReflectionTex = r3d$1.blurReflection(encoder, reflTex, floorSpec.roughness ?? .35);
 			}
-			const { pass: pass3d, cameraBindGroup, cameraBuffer, lightsBindGroup } = r3d.beginPass(encoder, scene3dView, nativeWidth, nativeHeight, camera, "clear", {
+			const { pass: pass3d, cameraBindGroup, cameraBuffer, lightsBindGroup } = r3d$1.beginPass(encoder, scene3dView, nativeWidth, nativeHeight, camera, "clear", {
 				r: 0,
 				g: 0,
 				b: 0,
@@ -2106,23 +2134,36 @@ const CompositorWebGPURenderer = async (args) => {
 				environment: sceneEnvironment,
 				shadow: shadow.length ? shadow : null
 			}, Boolean(sceneBloom));
-			if (floorSpec && blurredReflectionTex) r3d.drawFloor(pass3d, cameraBindGroup, lightsBindGroup, blurredReflectionTex, floorSpec, dofEnabled, Boolean(sceneBloom));
-			for (const item of ordered) if (item.kind === "quad") r3d.drawTextureQuad(pass3d, cameraBindGroup, lightsBindGroup, item.texture, item.opts, dofEnabled);
-			else if (item.kind === "slug") r3d.drawSlugText(pass3d, cameraBindGroup, lightsBindGroup, item.batches, item.opts, item.stackBase, dofEnabled);
-			else if (item.kind === "mesh") r3d.drawMesh3D(pass3d, cameraBindGroup, lightsBindGroup, item.meshBuffers ?? item.mesh, item.texture, isGlass(item) ? {
+			if (floorSpec && blurredReflectionTex) r3d$1.drawFloor(pass3d, cameraBindGroup, lightsBindGroup, blurredReflectionTex, floorSpec, geometryEnabled, Boolean(sceneBloom));
+			for (const item of ordered) if (item.kind === "quad") r3d$1.drawTextureQuad(pass3d, cameraBindGroup, lightsBindGroup, item.texture, item.opts, geometryEnabled);
+			else if (item.kind === "slug") r3d$1.drawSlugText(pass3d, cameraBindGroup, lightsBindGroup, item.batches, item.opts, item.stackBase, geometryEnabled);
+			else if (item.kind === "mesh") r3d$1.drawMesh3D(pass3d, cameraBindGroup, lightsBindGroup, item.meshBuffers ?? item.mesh, item.texture, isGlass(item) ? {
 				...item.opts,
 				backdrop: curTex
-			} : item.opts, dofEnabled);
+			} : item.opts, geometryEnabled);
 			pass3d.end();
 			let final3dTex = scene3dTex;
+			if (outlines && linearDepthTex) {
+				if (dofEnabled) r3d$1.resolveGeometry(encoder, linearDepthTex);
+				const outlinedTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [
+					curTex,
+					targetTexture,
+					scene3dTex,
+					linearDepthTex,
+					...curExcludes
+				]);
+				r3d$1.applyOutlines(encoder, scene3dTex, linearDepthTex, outlinedTex.createView(), camera, outlines, sceneEnvironment?.fog);
+				final3dTex = outlinedTex;
+			}
 			if (dofEnabled && linearDepthTex) {
 				const dofResultTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [
 					curTex,
 					targetTexture,
 					scene3dTex,
+					final3dTex,
 					...curExcludes
 				]);
-				r3d.applyDepthOfField(encoder, scene3dTex, linearDepthTex, dofResultTex.createView(), cameraBuffer);
+				r3d$1.applyDepthOfField(encoder, final3dTex, linearDepthTex, dofResultTex.createView(), cameraBuffer);
 				final3dTex = dofResultTex;
 			}
 			if (sceneBloom) {
@@ -2133,7 +2174,7 @@ const CompositorWebGPURenderer = async (args) => {
 					scene3dTex,
 					...curExcludes
 				]);
-				r3d.applyBloom(encoder, final3dTex, bloomTex, sceneBloom, r3d.hdrSource());
+				r3d$1.applyBloom(encoder, final3dTex, bloomTex, sceneBloom, r3d$1.hdrSource());
 				final3dTex = bloomTex;
 			}
 			const nextTex = ctx.renderer.composite(encoder, curTex, final3dTex, "normal", [targetTexture, ...curExcludes]);
@@ -2346,7 +2387,7 @@ const CompositorWebGPURenderer = async (args) => {
 				if (durationFrames !== void 0 && shiftedFrame >= startFrame + durationFrames) return;
 			}
 			if (kind === "model3d") {
-				const r3d = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+				const r3d$1 = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
 				let modelSrc = lop.modelData ?? lop.src;
 				if (!modelSrc && lop.text3dOptions) {
 					const tOpts = lop.text3dOptions;
@@ -2366,7 +2407,7 @@ const CompositorWebGPURenderer = async (args) => {
 				if (!modelSrc) return;
 				let model;
 				try {
-					model = typeof modelSrc === "object" && modelSrc !== null && "meshes" in modelSrc ? modelSrc : await r3d.loadModelAsync(modelSrc, lop.modelFormat ?? "auto", {
+					model = typeof modelSrc === "object" && modelSrc !== null && "meshes" in modelSrc ? modelSrc : await r3d$1.loadModelAsync(modelSrc, lop.modelFormat ?? "auto", {
 						center: lop.center,
 						normalizeSize: lop.normalizeSize
 					});
@@ -2435,7 +2476,7 @@ const CompositorWebGPURenderer = async (args) => {
 							else if (m.modelData && "meshes" in m.modelData) vModel = m.modelData;
 							else if (m.primitive3d) vModel = getPrimitiveGeometry(m.primitive3d);
 							else if (m.src) try {
-								vModel = r3d.loadModel(m.src, m.modelFormat ?? "auto", {
+								vModel = r3d$1.loadModel(m.src, m.modelFormat ?? "auto", {
 									center: m.center,
 									normalizeSize: m.normalizeSize
 								});
@@ -2660,7 +2701,7 @@ const CompositorWebGPURenderer = async (args) => {
 								if (bCount === 0) continue;
 								const v = variants[k];
 								const activeSlice = bCount === bucketCounts[k] ? bucketItems[k] : bucketItems[k].subarray(0, bCount * 16);
-								const instanceBuffer = r3d.uploadInstanceData(activeSlice);
+								const instanceBuffer = r3d$1.uploadInstanceData(activeSlice);
 								const bounds = Number.isFinite(bucketBounds[k].min[0]) ? bucketBounds[k] : void 0;
 								for (const mesh of v.meshes) {
 									const mat = mesh.materialName ? v.materials[mesh.materialName] : void 0;
@@ -2684,7 +2725,7 @@ const CompositorWebGPURenderer = async (args) => {
 									pending3DItems.push({
 										kind: "mesh",
 										mesh,
-										texture: mat ? await r3d.materialTexture(mat) : void 0,
+										texture: mat ? await r3d$1.materialTexture(mat) : void 0,
 										opts: meshOpts
 									});
 								}
@@ -2800,7 +2841,7 @@ const CompositorWebGPURenderer = async (args) => {
 							else if (m.modelData && "meshes" in m.modelData) vModel = m.modelData;
 							else if (m.primitive3d) vModel = getPrimitiveGeometry(m.primitive3d);
 							else if (m.src) try {
-								vModel = r3d.loadModel(m.src, m.modelFormat ?? "auto", {
+								vModel = r3d$1.loadModel(m.src, m.modelFormat ?? "auto", {
 									center: m.center,
 									normalizeSize: m.normalizeSize
 								});
@@ -2905,7 +2946,7 @@ const CompositorWebGPURenderer = async (args) => {
 					};
 					let swarmState = swarmStateMap.get(lop);
 					if (!swarmState || swarmState.device !== ctx.device) {
-						swarmState = r3d.swarm3dPipeline.createState(staticConfig);
+						swarmState = r3d$1.swarm3dPipeline.createState(staticConfig);
 						swarmStateMap.set(lop, swarmState);
 					}
 					const targetF = shiftedFrame ?? 0;
@@ -2995,7 +3036,7 @@ const CompositorWebGPURenderer = async (args) => {
 							emitterPos
 						};
 					};
-					r3d.swarm3dPipeline.advance(swarmState, staticConfig, targetF, fps || 30, frameSampler);
+					r3d$1.swarm3dPipeline.advance(swarmState, staticConfig, targetF, fps || 30, frameSampler);
 					if (variants.length > 0) {
 						const sliceCount = swarmState.sliceCount;
 						for (let vIdx = 0; vIdx < variants.length; vIdx++) {
@@ -3023,7 +3064,7 @@ const CompositorWebGPURenderer = async (args) => {
 								pending3DItems.push({
 									kind: "mesh",
 									mesh,
-									texture: mat ? await r3d.materialTexture(mat) : void 0,
+									texture: mat ? await r3d$1.materialTexture(mat) : void 0,
 									opts: meshOpts
 								});
 							}
@@ -3053,7 +3094,7 @@ const CompositorWebGPURenderer = async (args) => {
 								pending3DItems.push({
 									kind: "mesh",
 									mesh,
-									texture: mat ? await r3d.materialTexture(mat) : void 0,
+									texture: mat ? await r3d$1.materialTexture(mat) : void 0,
 									opts: sparkOpts
 								});
 							}
@@ -3262,11 +3303,11 @@ const CompositorWebGPURenderer = async (args) => {
 						thickness: target?.thickness ?? lop.thickness,
 						audioDeform: meshAudioDeform
 					};
-					if (mat) meshOpts.maps = await r3d.materialMaps(mat);
+					if (mat) meshOpts.maps = await r3d$1.materialMaps(mat);
 					pending3DItems.push({
 						kind: "mesh",
 						mesh,
-						texture: mat ? await r3d.materialTexture(mat) : void 0,
+						texture: mat ? await r3d$1.materialTexture(mat) : void 0,
 						opts: meshOpts
 					});
 				}
@@ -3326,14 +3367,17 @@ const CompositorWebGPURenderer = async (args) => {
 				padX = Math.max(80, Math.ceil(rect.width * .2));
 				padY = Math.max(50, Math.ceil(rect.height * .5));
 			}
+			if (kind === "text" && !isPathText) {
+				const ink = textInkOutset(target, lop);
+				padX = Math.max(padX, ink);
+				padY = Math.max(padY, ink);
+			}
 			const layerW = isPathText ? targetW : rect.width + padX * 2;
 			const layerH = isPathText ? targetH : rect.height + padY * 2;
-			if (!isPathText && hasKineticAnimators) {
-				localX -= padX;
-				localY -= padY;
-			}
-			const anchorX = lop.anchorX ?? .5;
-			const anchorY = lop.anchorY ?? .5;
+			localX -= padX;
+			localY -= padY;
+			const anchorX = isPathText ? (lop.anchorX ?? .5) * rect.width / layerW : (padX + (lop.anchorX ?? .5) * rect.width) / layerW;
+			const anchorY = isPathText ? (lop.anchorY ?? .5) * rect.height / layerH : (padY + (lop.anchorY ?? .5) * rect.height) / layerH;
 			const localMatrix = toDOMMatrix(buildLayerMatrix({
 				x: localX,
 				y: localY,
@@ -3343,8 +3387,8 @@ const CompositorWebGPURenderer = async (args) => {
 				scale: scale$1,
 				scaleX,
 				scaleY,
-				anchorX: isPathText ? anchorX * rect.width / layerW : anchorX,
-				anchorY: isPathText ? anchorY * rect.height / layerH : anchorY
+				anchorX,
+				anchorY
 			}));
 			const layerMatrix = parentMatrix.multiply(localMatrix);
 			const blendMode = lop.blendMode || "normal";
@@ -3356,8 +3400,8 @@ const CompositorWebGPURenderer = async (args) => {
 			const rotateZ = target?.rotateZ ?? lop.rotateZ ?? 0;
 			const translateZ = target?.translateZ ?? lop.translateZ ?? 0;
 			const perspective = target?.perspective ?? lop.perspective ?? 0;
-			const perspectiveOriginX = target?.perspectiveOriginX ?? lop.perspectiveOriginX ?? lop.anchorX ?? .5;
-			const perspectiveOriginY = target?.perspectiveOriginY ?? lop.perspectiveOriginY ?? lop.anchorY ?? .5;
+			const perspectiveOriginX = target?.perspectiveOriginX ?? lop.perspectiveOriginX ?? anchorX;
+			const perspectiveOriginY = target?.perspectiveOriginY ?? lop.perspectiveOriginY ?? anchorY;
 			const backfaceVisibility = target?.backfaceVisibility ?? lop.backfaceVisibility ?? "visible";
 			let quad3D = null;
 			if (is3D) {
@@ -3471,30 +3515,6 @@ const CompositorWebGPURenderer = async (args) => {
 						}, { opacity: 1 });
 						borderPass.end();
 					}
-					let modelMatrix;
-					if (parent3DMatrix) {
-						let localM = Matrix4Math.identity();
-						const childX = target?.x ?? lop.x ?? 0;
-						const childY = target?.y ?? lop.y ?? 0;
-						const childZ = target?.z ?? lop.z ?? 0;
-						localM = Matrix4Math.multiply(localM, Matrix4Math.translate(childX, childY, childZ));
-						const rxRad = (target?.rotateX ?? lop.rotateX ?? 0) * Math.PI / 180;
-						const ryRad = (target?.rotateY ?? lop.rotateY ?? 0) * Math.PI / 180;
-						const rzRad = ((target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : rotation) * (Math.PI / 180);
-						if (rzRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateZ(rzRad));
-						if (ryRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateY(ryRad));
-						if (rxRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateX(rxRad));
-						const sx = layerW * scale$1 * scaleX;
-						const sy = layerH * scale$1 * scaleY;
-						const sz = target?.scaleZ ?? lop.scaleZ ?? 1;
-						localM = Matrix4Math.multiply(localM, Matrix4Math.scale(sx, sy, sz));
-						const ax = lop.anchorX ?? .5;
-						const ay = lop.anchorY ?? .5;
-						const pivotX = .5 - ax;
-						const pivotY = .5 - ay;
-						if (pivotX !== 0 || pivotY !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.translate(pivotX, pivotY, 0));
-						modelMatrix = Matrix4Math.multiply(parent3DMatrix, localM);
-					}
 					const quadOpts = {
 						position: [
 							localX + layerW * .5,
@@ -3527,9 +3547,19 @@ const CompositorWebGPURenderer = async (args) => {
 						ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
 						metallic: target?.metallic ?? lop.metallic,
 						...surfaceProps(target, lop),
-						...modelMatrix && { modelMatrix },
 						...reliefOpts(lop.id, localX, localY, layerW, layerH)
 					};
+					if (parent3DMatrix) {
+						const r3d$1 = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+						quadOpts.modelMatrix = Matrix4Math.multiply(parent3DMatrix, r3d$1.quadModelMatrix({
+							...quadOpts,
+							position: [
+								target?.x ?? lop.x ?? 0,
+								target?.y ?? lop.y ?? 0,
+								target?.z ?? lop.z ?? 0
+							]
+						}));
+					}
 					pending3DItems.push({
 						kind: "quad",
 						texture: activeGroupTex$1,
@@ -3639,7 +3669,7 @@ const CompositorWebGPURenderer = async (args) => {
 						finalView: activeView
 					};
 				}
-				const shouldClip = lop.overflow !== "visible";
+				const shouldClip = (target?.overflow ?? lop.overflow) === "hidden";
 				const scissorRect = shouldClip ? computeContainerScissor(layerMatrix, layerW, layerH) : null;
 				const clipRadius = shouldClip ? Math.min(target?.borderRadius ?? lop.borderRadius ?? 0, layerW / 2, layerH / 2) : 0;
 				if ((kind === "flex" || kind === "block") && (!Array.isArray(lop.effects) || lop.effects.length === 0) && clipRadius <= 0 && !shouldPaintContainerBackground(kind, lop.background) && layerOpacity === 1 && blendMode === "normal" && !lop.borderWidth && !lop.borderColor && (typeof lop.relighting !== "object" || !lop.relighting) && (typeof lop.relight !== "object" || !lop.relight) && (typeof target?.relighting !== "object" || !target?.relighting) && (typeof target?.relight !== "object" || !target?.relight) && (typeof lop.deflicker !== "object" || !lop.deflicker) && (typeof target?.deflicker !== "object" || !target?.deflicker)) {
@@ -4350,30 +4380,6 @@ const CompositorWebGPURenderer = async (args) => {
 					}, { opacity: 1 });
 					borderPass.end();
 				}
-				let modelMatrix;
-				if (parent3DMatrix) {
-					let localM = Matrix4Math.identity();
-					const childX = target?.x ?? lop.x ?? 0;
-					const childY = target?.y ?? lop.y ?? 0;
-					const childZ = target?.z ?? lop.z ?? 0;
-					localM = Matrix4Math.multiply(localM, Matrix4Math.translate(childX, childY, childZ));
-					const rxRad = (target?.rotateX ?? lop.rotateX ?? 0) * Math.PI / 180;
-					const ryRad = (target?.rotateY ?? lop.rotateY ?? 0) * Math.PI / 180;
-					const rzRad = ((target?.rotateZ ?? lop.rotateZ ?? 0) !== 0 ? target?.rotateZ ?? lop.rotateZ ?? 0 : rotation) * (Math.PI / 180);
-					if (rzRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateZ(rzRad));
-					if (ryRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateY(ryRad));
-					if (rxRad !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.rotateX(rxRad));
-					const sx = layerW * scale$1 * scaleX;
-					const sy = layerH * scale$1 * scaleY;
-					const sz = target?.scaleZ ?? lop.scaleZ ?? 1;
-					localM = Matrix4Math.multiply(localM, Matrix4Math.scale(sx, sy, sz));
-					const ax = lop.anchorX ?? .5;
-					const ay = lop.anchorY ?? .5;
-					const pivotX = .5 - ax;
-					const pivotY = .5 - ay;
-					if (pivotX !== 0 || pivotY !== 0) localM = Matrix4Math.multiply(localM, Matrix4Math.translate(pivotX, pivotY, 0));
-					modelMatrix = Matrix4Math.multiply(parent3DMatrix, localM);
-				}
 				const quadOpts = {
 					position: [
 						localX + layerW * .5,
@@ -4406,9 +4412,19 @@ const CompositorWebGPURenderer = async (args) => {
 					ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
 					metallic: target?.metallic ?? lop.metallic,
 					...surfaceProps(target, lop),
-					...modelMatrix && { modelMatrix },
 					...reliefOpts(lop.id, localX, localY, layerW, layerH)
 				};
+				if (parent3DMatrix) {
+					const r3d$1 = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+					quadOpts.modelMatrix = Matrix4Math.multiply(parent3DMatrix, r3d$1.quadModelMatrix({
+						...quadOpts,
+						position: [
+							target?.x ?? lop.x ?? 0,
+							target?.y ?? lop.y ?? 0,
+							target?.z ?? lop.z ?? 0
+						]
+					}));
+				}
 				const quadHasContent = layerHasRaster || Boolean(quadOpts.borderWidth && quadOpts.borderWidth > 0 && quadOpts.borderColor);
 				if (!glyphBatches || quadHasContent) pending3DItems.push({
 					kind: "quad",
@@ -4732,4 +4748,4 @@ var renderers_default = defineRenderer({ WebGPURenderer: CompositorWebGPURendere
 
 //#endregion
 export { Transform3DMath, renderers_default as default, has3DTransform };
-//# sourceMappingURL=renderer-Dv_iRIyx.mjs.map
+//# sourceMappingURL=renderer-BVIXKfbC.mjs.map