framefields 2.0.10 → 2.1.0

package/dist/{renderer-xKOVmd2O.mjs → renderer-DzhRNdBS.mjs}

@@ -1,12 +1,14 @@
-import { It as resolveNumber, Nt as reportRenderDiagnostic, Pt as resolveBoolean, bt as getActiveMediaMetadata, f as DEFAULT_DURATION_MS } from "./dist-B9Afsv83.mjs";
-import { n as defineRenderer, t as audioRegistry } from "./renderer-CtVkU_GA.mjs";
-import { I as generateExtrudedTextGeometry, J as parseColor, K as measureMaxCaptionHeight, Q as poseNodes, S as Vector3Math, V as jointMatrices, a as Camera3D, g as ScreenSpaceRelightPipeline, l as Matrix4Math, m as Renderer3D, n as AudioLatentTrackCache, rt as srtLoader, st as resolveMediaSourceUrl, y as SlugFontCache } from "./dist-B9PkqWnN.mjs";
-import { a as resolveLayerDuration, g as measureText, n as decodeAudioSource } from "./dist-BFjSQP7i.mjs";
-import { o as TemporalDeflickerPipeline } from "./dist-C_hjvkdN.mjs";
-import { Gt as initLayout, Rt as evaluateTrackAtFrame, St as computeLayout, vt as collectNodeOps } from "./program-xRfFoPxe.mjs";
+import "./chunk-GMkBE123.mjs";
+import { Gt as reportRenderDiagnostic, Jt as resolveNumber, Kt as resolveBoolean, p as DEFAULT_DURATION_MS, wt as getActiveMediaMetadata } from "./dist-fjKpBYkc.mjs";
+import { a as resolveFrameNumber, c as solveHomography, n as defineRenderer, t as audioRegistry } from "./renderer-BSitV56h.mjs";
+import { B as measureMaxCaptionHeight, F as jointMatrices, H as parseColor, K as poseNodes, O as fitSpansToText, Q as srtLoader, Y as resolveTextSpans, Z as spansText, ct as Matrix4Math, d as ScreenSpaceRelightPipeline, j as getPrimitiveGeometry, k as generateExtrudedTextGeometry, l as Renderer3D, n as AudioLatentTrackCache, nt as resolveMediaSourceUrl, ot as Light3D, p as SlugFontCache, rt as Camera3D, ut as Vector3Math } from "./dist-Bun_TUvZ.mjs";
+import { a as createFullscreenPipeline, l as fragmentBindGroupLayout, n as PREMULTIPLIED_BLEND, t as FULLSCREEN_QUAD_WGSL } from "./gpu-RkpiFGOA.mjs";
+import { a as resolveLayerDuration, f as measureText, n as decodeAudioSource } from "./dist-DlzqyRar.mjs";
+import { o as TemporalDeflickerPipeline } from "./dist-0QGroRYZ.mjs";
+import { F as computeLayout, M as collectNodeOps, V as initLayout, z as evaluateTrackAtFrame } from "./program-BqFVw5Mu.mjs";
 import gsapModule from "gsap";
 
-//#region ../../nodes/node-compositor/dist/renderers-DZwweR5N.mjs
+//#region ../../nodes/node-compositor/dist/renderers-3FvTVSSB.mjs
 /**
 * Solves a cubic bezier curve defined by control points (x1, y1) and (x2, y2)
 * for a given progress parameter t in [0, 1].
@@ -924,104 +926,6 @@ const Transform3DMath = {
 	}
 };
 /**
-* Computes an 8-parameter 3x3 homography matrix mapping destination coordinates (quad)
-* to normalized source coordinates (unit square [0, 1]^2).
-*
-* The homography H maps destination (x, y) to source (u, v):
-*   u = (h00*x + h01*y + h02) / (h20*x + h21*y + h22)
-*   v = (h10*x + h11*y + h12) / (h20*x + h21*y + h22)
-*
-* Resulting array: [h00, h01, h02, h10, h11, h12, h20, h21, 1.0]
-*/
-function solveHomography(dstPoints, srcPoints = [
-	{
-		x: 0,
-		y: 0
-	},
-	{
-		x: 1,
-		y: 0
-	},
-	{
-		x: 0,
-		y: 1
-	},
-	{
-		x: 1,
-		y: 1
-	}
-]) {
-	const A = [];
-	const B = [];
-	for (let i = 0; i < 4; i++) {
-		const xi = dstPoints[i]?.x ?? 0;
-		const yi = dstPoints[i]?.y ?? 0;
-		const ui = srcPoints[i]?.x ?? 0;
-		const vi = srcPoints[i]?.y ?? 0;
-		A.push([
-			xi,
-			yi,
-			1,
-			0,
-			0,
-			0,
-			-xi * ui,
-			-yi * ui
-		]);
-		B.push(ui);
-		A.push([
-			0,
-			0,
-			0,
-			xi,
-			yi,
-			1,
-			-xi * vi,
-			-yi * vi
-		]);
-		B.push(vi);
-	}
-	const n = 8;
-	for (let i = 0; i < n; i++) {
-		let maxRow = i;
-		let maxVal = Math.abs(A[i][i]);
-		for (let k = i + 1; k < n; k++) if (Math.abs(A[k][i]) > maxVal) {
-			maxVal = Math.abs(A[k][i]);
-			maxRow = k;
-		}
-		const tempRow = A[i];
-		A[i] = A[maxRow];
-		A[maxRow] = tempRow;
-		const tempB = B[i];
-		B[i] = B[maxRow];
-		B[maxRow] = tempB;
-		const pivot = A[i][i];
-		if (Math.abs(pivot) < 1e-12) A[i][i] = pivot < 0 ? -1e-12 : 1e-12;
-		for (let k = i + 1; k < n; k++) {
-			const factor = A[k][i] / A[i][i];
-			for (let j = i; j < n; j++) A[k][j] -= factor * A[i][j];
-			B[k] -= factor * B[i];
-		}
-	}
-	const h = new Array(8).fill(0);
-	for (let i = n - 1; i >= 0; i--) {
-		let sum = B[i];
-		for (let j = i + 1; j < n; j++) sum -= A[i][j] * h[j];
-		h[i] = sum / A[i][i];
-	}
-	return [
-		h[0],
-		h[1],
-		h[2],
-		h[3],
-		h[4],
-		h[5],
-		h[6],
-		h[7],
-		1
-	];
-}
-/**
 * Checks whether a layer operation or compiled stub activates the 3D perspective path.
 */
 function has3DTransform(target, lop) {
@@ -1067,27 +971,7 @@ struct HomographyUniforms {
 @group(0) @binding(0) var<uniform> u : HomographyUniforms;
 @group(1) @binding(0) var tex        : texture_2d<f32>;
 @group(1) @binding(1) var samp       : sampler;
-
-struct VSOut {
-	@builtin(position) pos : vec4<f32>,
-	@location(0) uv        : vec2<f32>,
-};
-
-@vertex fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
-	var pos = array<vec2<f32>, 4>(
-		vec2<f32>(-1.0, 1.0),
-		vec2<f32>(1.0, 1.0),
-		vec2<f32>(-1.0, -1.0),
-		vec2<f32>(1.0, -1.0)
-	);
-	var uv = array<vec2<f32>, 4>(
-		vec2<f32>(0.0, 0.0),
-		vec2<f32>(1.0, 0.0),
-		vec2<f32>(0.0, 1.0),
-		vec2<f32>(1.0, 1.0)
-	);
-	return VSOut(vec4<f32>(pos[vi], 0.0, 1.0), uv[vi]);
-}
+${FULLSCREEN_QUAD_WGSL}
 
 @fragment fn fs(in : VSOut) -> @location(0) vec4<f32> {
 	let x = in.uv.x;
@@ -1113,52 +997,18 @@ const deviceHomographyCache = /* @__PURE__ */ new WeakMap();
 function getHomographyResources(device, format) {
 	let res = deviceHomographyCache.get(device);
 	if (!res) {
-		const uniformLayout = device.createBindGroupLayout({ entries: [{
-			binding: 0,
-			visibility: GPUShaderStage.FRAGMENT,
-			buffer: { type: "uniform" }
-		}] });
-		const textureLayout = device.createBindGroupLayout({ entries: [{
-			binding: 0,
-			visibility: GPUShaderStage.FRAGMENT,
-			texture: { sampleType: "float" }
-		}, {
-			binding: 1,
-			visibility: GPUShaderStage.FRAGMENT,
-			sampler: { type: "filtering" }
-		}] });
-		const module = device.createShaderModule({
-			label: "compositor_homography.wgsl",
-			code: compositorHomographyWgsl
-		});
+		const uniformLayout = fragmentBindGroupLayout(device, ["uniform"]);
+		const textureLayout = fragmentBindGroupLayout(device, ["texture", "sampler"]);
 		res = {
-			pipeline: device.createRenderPipeline({
+			pipeline: createFullscreenPipeline(device, {
 				label: "CompositorHomographyPipeline",
-				layout: device.createPipelineLayout({ bindGroupLayouts: [uniformLayout, textureLayout] }),
-				vertex: {
-					module,
-					entryPoint: "vs"
-				},
-				fragment: {
-					module,
-					entryPoint: "fs",
-					targets: [{
-						format,
-						blend: {
-							color: {
-								srcFactor: "one",
-								dstFactor: "one-minus-src-alpha",
-								operation: "add"
-							},
-							alpha: {
-								srcFactor: "one",
-								dstFactor: "one-minus-src-alpha",
-								operation: "add"
-							}
-						}
-					}]
-				},
-				primitive: { topology: "triangle-strip" }
+				module: device.createShaderModule({
+					label: "compositor_homography.wgsl",
+					code: compositorHomographyWgsl
+				}),
+				layouts: [uniformLayout, textureLayout],
+				format,
+				blend: PREMULTIPLIED_BLEND
 			}),
 			uniformLayout,
 			textureLayout
@@ -1207,48 +1057,15 @@ function getTemporalDeflickerPipeline(device, layerKey) {
 	}
 	return pipe;
 }
-function resolveVal(val, fallback, frame, fps) {
-	if (val === void 0 || val === null) return fallback;
-	if (typeof val === "number") return Number.isFinite(val) ? val : fallback;
-	if (typeof val === "object" && val !== null) {
-		if ("get" in val && typeof val.get === "function") try {
-			const res = val.get({
-				frame,
-				fps,
-				time: fps > 0 ? frame / fps : 0,
-				duration: 0,
-				durationMs: 0,
-				progress: 0,
-				deltaTime: fps > 0 ? 1 / fps : 0
-			});
-			const n$1 = Number(res);
-			if (Number.isFinite(n$1)) return n$1;
-		} catch {}
-		if ("value" in val) {
-			const n$1 = Number(val.value);
-			if (Number.isFinite(n$1)) return n$1;
-		}
-	}
-	if (typeof val === "function") try {
-		const n$1 = Number(val({
-			frame,
-			fps,
-			time: fps > 0 ? frame / fps : 0
-		}));
-		if (Number.isFinite(n$1)) return n$1;
-	} catch {}
-	const n = Number(val);
-	return Number.isFinite(n) ? n : fallback;
-}
 function synthesizeRelightLights(relightOpts, sceneLights, bounds, shiftedFrame, fps) {
 	if (sceneLights.length > 0 || relightOpts.lightType === void 0 && relightOpts.intensity === void 0 && relightOpts.lightPosX === void 0) return sceneLights;
 	const lightTypeStr = String(relightOpts.lightType ?? "point").toLowerCase();
 	const lightKind = lightTypeStr === "directional" ? "directional" : lightTypeStr === "spot" ? "spot" : "point";
-	const intensity = resolveVal(relightOpts.intensity ?? 1, 1, shiftedFrame, fps);
-	const normX = resolveVal(relightOpts.lightPosX, .5, shiftedFrame, fps);
-	const normY = resolveVal(relightOpts.lightPosY, .5, shiftedFrame, fps);
-	const normZ = resolveVal(relightOpts.lightPosZ, .25, shiftedFrame, fps);
-	const normRadius = resolveVal(relightOpts.lightRadius, .75, shiftedFrame, fps);
+	const intensity = resolveFrameNumber(relightOpts.intensity ?? 1, 1, shiftedFrame, fps);
+	const normX = resolveFrameNumber(relightOpts.lightPosX, .5, shiftedFrame, fps);
+	const normY = resolveFrameNumber(relightOpts.lightPosY, .5, shiftedFrame, fps);
+	const normZ = resolveFrameNumber(relightOpts.lightPosZ, .25, shiftedFrame, fps);
+	const normRadius = resolveFrameNumber(relightOpts.lightRadius, .75, shiftedFrame, fps);
 	const lightX = bounds.x + normX * bounds.width;
 	const lightY = bounds.y + normY * bounds.height;
 	const lightZ = normZ * Math.max(bounds.width, bounds.height);
@@ -1263,7 +1080,7 @@ function synthesizeRelightLights(relightOpts, sceneLights, bounds, shiftedFrame,
 		radius: lightRadius,
 		decay: 1
 	};
-	const ambientInt = resolveVal(relightOpts.ambientIntensity, .15, shiftedFrame, fps);
+	const ambientInt = resolveFrameNumber(relightOpts.ambientIntensity, .15, shiftedFrame, fps);
 	return [{
 		lightType: "ambient",
 		color: relightOpts.ambientColor ?? "#ffffff",
@@ -1338,6 +1155,25 @@ function drawProjectedQuad(ctx, encoder, destView, sourceTex, quad, destWidth, d
 	renderPass.draw(4);
 	renderPass.end();
 }
+/**
+* Emissive and shadow participation for a 3D draw: animated values first,
+* then the node's own, then (meshes) the model file's material.
+*/
+function surfaceProps(target, lop, mat) {
+	const toSrgb = (v) => v <= .0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - .055;
+	const emissive = target?.emissive ?? lop.emissive ?? (mat?.emissive ? [
+		toSrgb(mat.emissive[0]),
+		toSrgb(mat.emissive[1]),
+		toSrgb(mat.emissive[2])
+	] : void 0);
+	const out = {};
+	if (emissive !== void 0) {
+		out.emissive = emissive;
+		out.emissiveIntensity = target?.emissiveIntensity ?? lop.emissiveIntensity ?? mat?.emissiveStrength ?? 1;
+	}
+	if (lop.castShadow !== void 0) out.castShadow = lop.castShadow;
+	return out;
+}
 function computeContainerScissor(matrix, width, height) {
 	const corners = [
 		matrix.transformPoint(new DOMPoint(0, 0)),
@@ -1470,7 +1306,8 @@ const CompositorWebGPURenderer = async (args) => {
 						fontFamily: node.fontFamily,
 						letterSpacing: node.letterSpacing,
 						lineHeight: node.lineHeight,
-						padding: node.padding
+						padding: node.padding,
+						direction: node.direction
 					};
 					if (constraintWidth !== void 0) {
 						const isAuto = typeof node.width !== "number";
@@ -1524,6 +1361,9 @@ const CompositorWebGPURenderer = async (args) => {
 		let camera = null;
 		let dofEnabled = false;
 		const sceneLights = [];
+		let sceneEnvironment = null;
+		let sceneBloom = null;
+		let shadowMapSize;
 		if (is3DScene) {
 			const camOp = cameraVM?.operation;
 			const camStub = camOp?.id ? targetsById[camOp.id] : void 0;
@@ -1593,6 +1433,23 @@ const CompositorWebGPURenderer = async (args) => {
 					if (durationFrames !== void 0 && shiftedFrame >= startFrame + durationFrames) continue;
 				}
 				const lightType = target?.lightType ?? lop.lightType ?? "point";
+				if (lightType === "environment") {
+					const intensity$1 = target?.intensity ?? lop.intensity;
+					sceneEnvironment = {
+						preset: lop.preset,
+						top: lop.top,
+						horizon: lop.horizon,
+						bottom: lop.bottom,
+						softboxes: target?.softboxes ?? lop.softboxes,
+						rotation: target?.rotation ?? lop.rotation,
+						exposure: target?.exposure ?? lop.exposure,
+						toneMapping: lop.toneMapping,
+						fog: lop.fog,
+						...intensity$1 !== void 0 && { intensity: intensity$1 }
+					};
+					sceneBloom = lop.bloom === true ? {} : lop.bloom && typeof lop.bloom === "object" ? { ...lop.bloom } : null;
+					continue;
+				}
 				const color = parseColor(target?.color ?? lop.color ?? "#ffffff");
 				const intensity = target?.intensity ?? lop.intensity ?? 1;
 				const x = target?.x ?? lop.x ?? 0;
@@ -1622,11 +1479,17 @@ const CompositorWebGPURenderer = async (args) => {
 					radius,
 					angle,
 					penumbra,
-					decay
+					decay,
+					castShadow: Boolean(lop.castShadow),
+					shadowSoftness: target?.shadowSoftness ?? lop.shadowSoftness,
+					shadowDarkness: target?.shadowDarkness ?? lop.shadowDarkness
 				});
+				if (lop.castShadow && lop.shadowMapSize) shadowMapSize = lop.shadowMapSize;
 			}
 		}
 		const pending3DItems = [];
+		/** Textures the queued 3D items still read: their layers and mattes. */
+		const pendingTextures = () => pending3DItems.flatMap((q) => [q.texture, q.opts.matte]).filter((t) => Boolean(t));
 		const flush3DPass = (curTex, curView, curExcludes) => {
 			if (pending3DItems.length === 0 || !camera) return {
 				finalTex: curTex,
@@ -1634,7 +1497,7 @@ const CompositorWebGPURenderer = async (args) => {
 			};
 			const r3d = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
 			for (const item of pending3DItems) if (item.kind === "mesh" && item.opts.audioDeform) item.meshBuffers = r3d.deformMesh(encoder, item.mesh, item.opts.audioDeform);
-			const itemTextures = pending3DItems.map((q) => q.kind === "quad" ? q.texture : q.texture).filter((t) => Boolean(t));
+			const itemTextures = pendingTextures();
 			const scene3dTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [
 				curTex,
 				targetTexture,
@@ -1648,12 +1511,41 @@ const CompositorWebGPURenderer = async (args) => {
 				linearDepthTex = r3d.getOrCreateLinearDepthTexture(nativeWidth, nativeHeight);
 				linearDepthView = linearDepthTex.createView();
 			}
+			let shadow = null;
+			const casterIndex = Light3D.shadowCasterIndex(sceneLights);
+			if (casterIndex >= 0) {
+				const casters = [];
+				const receivers = [];
+				for (const item of pending3DItems) if (item.kind === "mesh") {
+					const caster = {
+						kind: "mesh",
+						mesh: item.mesh,
+						buffers: item.meshBuffers,
+						opts: item.opts
+					};
+					receivers.push(r3d.worldBounds(caster));
+					if (item.opts.castShadow !== false && item.opts.material !== "unlit") casters.push(caster);
+				} else if (item.kind === "quad") {
+					const caster = {
+						kind: "quad",
+						texture: item.texture,
+						opts: item.opts
+					};
+					receivers.push(r3d.worldBounds(caster));
+					if (item.opts.castShadow === true) casters.push(caster);
+				}
+				const shadowLight = sceneLights.filter((l) => (l.lightType ?? l.type) !== "ambient")[casterIndex];
+				if (shadowLight && casters.length > 0) shadow = r3d.renderShadowMap(encoder, shadowLight, casterIndex, casters, receivers, { mapSize: shadowMapSize });
+			}
 			const { pass: pass3d, cameraBindGroup, cameraBuffer, lightsBindGroup } = r3d.beginPass(encoder, scene3dView, nativeWidth, nativeHeight, camera, "clear", {
 				r: 0,
 				g: 0,
 				b: 0,
 				a: 0
-			}, linearDepthView, sceneLights);
+			}, linearDepthView, sceneLights, {
+				environment: sceneEnvironment,
+				shadow
+			}, Boolean(sceneBloom));
 			for (const item of pending3DItems) 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, item.opts, dofEnabled);
@@ -1669,6 +1561,17 @@ const CompositorWebGPURenderer = async (args) => {
 				r3d.applyDepthOfField(encoder, scene3dTex, linearDepthTex, dofResultTex.createView(), cameraBuffer);
 				final3dTex = dofResultTex;
 			}
+			if (sceneBloom) {
+				const bloomTex = ctx.renderer.getTemporaryTexture(nativeWidth, nativeHeight, [
+					curTex,
+					targetTexture,
+					final3dTex,
+					scene3dTex,
+					...curExcludes
+				]);
+				r3d.applyBloom(encoder, final3dTex, bloomTex, sceneBloom, r3d.hdrSource());
+				final3dTex = bloomTex;
+			}
 			const nextTex = ctx.renderer.composite(encoder, curTex, final3dTex, "normal", [targetTexture, ...curExcludes]);
 			pending3DItems.length = 0;
 			return {
@@ -1684,9 +1587,15 @@ const CompositorWebGPURenderer = async (args) => {
 			let activeTex = initialTex;
 			let activeView = initialView;
 			let activeExcludes = excludes;
+			const mattesByOwner = /* @__PURE__ */ new Map();
+			for (const vm of vms) {
+				const owner = vm.operation?.matteOf;
+				if (owner) mattesByOwner.set(owner, vm);
+			}
 			for (const child of sorted) {
 				const lop = child.operation;
 				if (lop.kind === "camera" || lop.kind === "light") continue;
+				if (lop.matteOf) continue;
 				const targetId = lop.id || lop.inputHandleId;
 				const target = targetId ? targetsById[targetId] : void 0;
 				const isChild3D = Boolean(target?.is3D ?? lop.is3D) || Boolean(camera && ((target?.z ?? lop.z ?? 0) !== 0 || lop.is3D)) || Boolean(parent3DMatrix);
@@ -1710,6 +1619,87 @@ const CompositorWebGPURenderer = async (args) => {
 					continue;
 				}
 				nodeIndex += 1;
+				const matteVM = lop.matteId ? mattesByOwner.get(lop.id) : void 0;
+				if (matteVM) {
+					const isolate = async (vm, index) => {
+						const queued = pending3DItems.splice(0);
+						const busy = [
+							targetTexture,
+							activeTex,
+							...activeExcludes,
+							...queued.flatMap((q) => [q.texture, q.opts.matte])
+						].filter((t) => Boolean(t));
+						const tex = ctx.renderer.getTemporaryTexture(targetW, targetH, busy);
+						const view = tex.createView();
+						ctx.renderer.beginFrame(encoder, view, {
+							r: 0,
+							g: 0,
+							b: 0,
+							a: 0
+						}, targetW, targetH, "clear").end();
+						const drawn = (await renderLayerVM(vm, index, tex, view, busy.filter((t) => t !== targetTexture), accumulatedOpacity, parentMatrix, parentRect, targetW, targetH, parent3DMatrix, false))?.finalTex ?? tex;
+						const flat = flush3DPass(drawn, drawn.createView(), busy).finalTex;
+						pending3DItems.push(...queued);
+						return flat;
+					};
+					const mode = matteVM.operation.matteMode ?? "alpha";
+					const blend = mode === "luma" ? "luma-in" : mode === "luma-inverted" ? "luma-out" : mode === "alpha-inverted" ? "destination-out" : "destination-in";
+					if (isChild3D) {
+						let coverage = await isolate(matteVM, nodeIndex);
+						activeExcludes = [...activeExcludes, coverage];
+						nodeIndex += 1;
+						if (mode !== "alpha") {
+							const white = ctx.renderer.getTemporaryTexture(targetW, targetH, [
+								targetTexture,
+								activeTex,
+								...activeExcludes,
+								...pendingTextures()
+							]);
+							ctx.renderer.beginFrame(encoder, white.createView(), {
+								r: 1,
+								g: 1,
+								b: 1,
+								a: 1
+							}, targetW, targetH, "clear").end();
+							coverage = ctx.renderer.composite(encoder, white, coverage, blend, [
+								targetTexture,
+								activeTex,
+								...activeExcludes,
+								...pendingTextures(),
+								white
+							]);
+							activeExcludes = [...activeExcludes, coverage];
+						}
+						const before = pending3DItems.length;
+						const res$1 = await renderLayerVM(child, nodeIndex, activeTex, activeView, activeExcludes, accumulatedOpacity, parentMatrix, parentRect, targetW, targetH, parent3DMatrix, isRootScene);
+						for (const item of pending3DItems.slice(before)) item.opts.matte = coverage;
+						if (res$1) {
+							if (res$1.finalTex !== activeTex) activeExcludes = [...activeExcludes, res$1.finalTex];
+							activeTex = res$1.finalTex;
+							activeView = res$1.finalView;
+						}
+						continue;
+					}
+					const contentTex = await isolate(child, nodeIndex);
+					activeExcludes = [...activeExcludes, contentTex];
+					nodeIndex += 1;
+					const matteTex = await isolate(matteVM, nodeIndex);
+					const masked = ctx.renderer.composite(encoder, contentTex, matteTex, blend, [
+						targetTexture,
+						activeTex,
+						...activeExcludes,
+						matteTex
+					]);
+					const next = ctx.renderer.composite(encoder, activeTex, masked, "normal", [
+						targetTexture,
+						...activeExcludes,
+						matteTex
+					]);
+					activeExcludes = [...activeExcludes, next];
+					activeTex = next;
+					activeView = next.createView();
+					continue;
+				}
 				const res = await renderLayerVM(child, nodeIndex, activeTex, activeView, activeExcludes, accumulatedOpacity, parentMatrix, parentRect, targetW, targetH, parent3DMatrix, isRootScene);
 				if (res) {
 					if (res.finalTex !== activeTex) activeExcludes = [...activeExcludes, res.finalTex];
@@ -1729,7 +1719,7 @@ const CompositorWebGPURenderer = async (args) => {
 			};
 		};
 		const renderLayerVM = async (nodeVM, i, destTex, destView, baseExcludes, accumulatedOpacity, parentMatrix, parentRect, targetW = nativeWidth, targetH = nativeHeight, parent3DMatrix = null, isRootScene = false) => {
-			const excludes = [...baseExcludes, ...pending3DItems.map((q) => q.texture).filter((t) => Boolean(t))];
+			const excludes = [...baseExcludes, ...pendingTextures()];
 			const lop = nodeVM.operation;
 			if (lop.kind === "camera" || lop.kind === "light") return;
 			const targetId = lop.id || lop.inputHandleId;
@@ -1757,6 +1747,10 @@ const CompositorWebGPURenderer = async (args) => {
 						lop.modelData = modelSrc;
 					}
 				}
+				if (!modelSrc && lop.primitive3d) {
+					modelSrc = getPrimitiveGeometry(lop.primitive3d);
+					lop.modelData = modelSrc;
+				}
 				if (!modelSrc) return;
 				let model;
 				try {
@@ -1993,8 +1987,10 @@ const CompositorWebGPURenderer = async (args) => {
 						specularIntensity: target?.specularIntensity ?? lop.specularIntensity ?? .5,
 						ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity ?? 1,
 						metallic: target?.metallic ?? lop.metallic ?? mat?.metallic,
+						...surfaceProps(target, lop, mat),
 						audioDeform: meshAudioDeform
 					};
+					if (mat) meshOpts.maps = await r3d.materialMaps(mat);
 					pending3DItems.push({
 						kind: "mesh",
 						mesh,
@@ -2150,7 +2146,7 @@ const CompositorWebGPURenderer = async (args) => {
 						activeTex,
 						targetTexture,
 						...excludes,
-						...pending3DItems.map((q) => q.texture).filter((t) => Boolean(t))
+						...pendingTextures()
 					];
 					const groupTex$1 = ctx.renderer.getTemporaryTexture(texW$1, texH$1, groupExcludes$1);
 					const groupView$1 = groupTex$1.createView();
@@ -2254,6 +2250,7 @@ const CompositorWebGPURenderer = async (args) => {
 						specularIntensity: target?.specularIntensity ?? lop.specularIntensity,
 						ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
 						metallic: target?.metallic ?? lop.metallic,
+						...surfaceProps(target, lop),
 						...modelMatrix && { modelMatrix }
 					};
 					pending3DItems.push({
@@ -2508,11 +2505,11 @@ const CompositorWebGPURenderer = async (args) => {
 						viewportHeight: targetH,
 						layerX: 0,
 						layerY: 0,
-						roughness: resolveVal(target?.roughness ?? target?.relightRoughness ?? relightOpts$1.specularRoughness ?? relightOpts$1.roughness, .35, compositionFrame, fps ?? 24),
-						specularStrength: resolveVal(target?.specularStrength ?? target?.relightSpecularStrength ?? relightOpts$1.specularStrength, .7, compositionFrame, fps ?? 24),
-						metallic: resolveVal(target?.metallic ?? target?.relightMetallic ?? relightOpts$1.metallic, 0, compositionFrame, fps ?? 24),
-						ambientIntensity: resolveVal(target?.ambientIntensity ?? target?.relightAmbientIntensity ?? relightOpts$1.ambientIntensity, .15, compositionFrame, fps ?? 24),
-						depthScale: resolveVal(target?.depthScale ?? target?.relightDepthScale ?? relightOpts$1.depthScale, 1, compositionFrame, fps ?? 24),
+						roughness: resolveFrameNumber(target?.roughness ?? target?.relightRoughness ?? relightOpts$1.specularRoughness ?? relightOpts$1.roughness, .35, compositionFrame, fps ?? 24),
+						specularStrength: resolveFrameNumber(target?.specularStrength ?? target?.relightSpecularStrength ?? relightOpts$1.specularStrength, .7, compositionFrame, fps ?? 24),
+						metallic: resolveFrameNumber(target?.metallic ?? target?.relightMetallic ?? relightOpts$1.metallic, 0, compositionFrame, fps ?? 24),
+						ambientIntensity: resolveFrameNumber(target?.ambientIntensity ?? target?.relightAmbientIntensity ?? relightOpts$1.ambientIntensity, .15, compositionFrame, fps ?? 24),
+						depthScale: resolveFrameNumber(target?.depthScale ?? target?.relightDepthScale ?? relightOpts$1.depthScale, 1, compositionFrame, fps ?? 24),
 						opacity: 1
 					}, "clear");
 					activeGroupTex = relitTex;
@@ -2557,7 +2554,18 @@ const CompositorWebGPURenderer = async (args) => {
 				content = nodeVM.children?.[0];
 				isCaption = content?.operation?.dataType === "Caption" || lop.dataType === "Caption" || (content?.operation)?.srtText !== void 0;
 			} else if (kind === "text") {
-				const fullText = lop.text ?? "";
+				const rawSpans = target?.spans ?? lop.spans;
+				const spanFps = fps ?? 24;
+				const spans = rawSpans?.length ? resolveTextSpans(rawSpans, {
+					frame: compositionFrame,
+					fps: spanFps,
+					time: compositionFrame / spanFps,
+					duration: composeDuration / 1e3,
+					durationMs: composeDuration,
+					progress: composeDuration > 0 ? Math.min(1, compositionFrame / spanFps * 1e3 / composeDuration) : 0,
+					deltaTime: 1 / spanFps
+				}) : void 0;
+				const fullText = spans ? spansText(spans) : lop.text ?? "";
 				let displayText = fullText;
 				let resolvedAnimators = rawAnimators;
 				if (Array.isArray(rawAnimators) && rawAnimators.length > 0) resolvedAnimators = rawAnimators.map((animator, idx) => {
@@ -2589,7 +2597,8 @@ const CompositorWebGPURenderer = async (args) => {
 				const textTrack = lop.animation?.tracks?.find((t) => t.prop === "text");
 				if (!hasKineticAnimators$1 && !hasTypewriter && (textTrack !== void 0 || typeof target?.text === "number") && fullText.length > 0) {
 					const progress = typeof target?.text === "number" ? Math.max(0, Math.min(1, target.text)) : 1;
-					if (progress >= 1) displayText = fullText;
+					const countsUnits = typeof target?.text === "number" && target.text > 1.0001;
+					if (progress >= 1 && !countsUnits) displayText = fullText;
 					else if (progress <= 0) displayText = "";
 					else {
 						const presetType = textTrack?.keyframes?.find((k) => k.presetType)?.presetType ?? "typewriter";
@@ -2622,6 +2631,7 @@ const CompositorWebGPURenderer = async (args) => {
 					operation: {
 						op: "text",
 						text: displayText,
+						spans: spans && displayText !== fullText ? fitSpansToText(spans, displayText) : spans,
 						animators: resolvedAnimators,
 						pathOptions: target?.pathOptions ?? lop.pathOptions,
 						typewriter: target?.typewriter ?? lop.typewriter,
@@ -2636,7 +2646,8 @@ const CompositorWebGPURenderer = async (args) => {
 						fontStyle: lop.fontStyle,
 						fontWeight: lop.fontWeight,
 						fill: target?.fill ?? target?.color ?? lop.fill,
-						align: lop.align === "start" ? "left" : lop.align === "end" ? "right" : lop.align,
+						align: lop.align,
+						direction: lop.direction,
 						verticalAlign: lop.verticalAlign,
 						letterSpacing: target?.letterSpacing ?? lop.letterSpacing,
 						lineHeight: lop.lineHeight,
@@ -2673,6 +2684,7 @@ const CompositorWebGPURenderer = async (args) => {
 						durationMs: layerDurationInMS,
 						opacity: 1,
 						fps,
+						...typeof lop.dpr === "number" && { dpr: lop.dpr },
 						excludeTextures: [
 							activeTex,
 							targetTexture,
@@ -2688,7 +2700,8 @@ const CompositorWebGPURenderer = async (args) => {
 							fontStyle: lop.fontStyle,
 							fill: lop.fill,
 							color: lop.fill,
-							align: lop.align === "start" ? "left" : lop.align === "end" ? "right" : lop.align ?? "center",
+							align: lop.align ?? "center",
+							direction: lop.direction,
 							verticalAlign: lop.verticalAlign ?? lop.textAlignVertical,
 							lineHeight: lop.lineHeight,
 							letterSpacing: lop.letterSpacing,
@@ -2857,11 +2870,11 @@ const CompositorWebGPURenderer = async (args) => {
 					viewportHeight: texH,
 					layerX: sampledX,
 					layerY: sampledY,
-					roughness: resolveVal(target?.roughness ?? target?.relightRoughness ?? relightOpts.specularRoughness ?? relightOpts.roughness, .35, compositionFrame, fps ?? 24),
-					specularStrength: resolveVal(target?.specularStrength ?? target?.relightSpecularStrength ?? relightOpts.specularStrength, .7, compositionFrame, fps ?? 24),
-					metallic: resolveVal(target?.metallic ?? target?.relightMetallic ?? relightOpts.metallic, 0, compositionFrame, fps ?? 24),
-					ambientIntensity: resolveVal(target?.ambientIntensity ?? target?.relightAmbientIntensity ?? relightOpts.ambientIntensity, .15, compositionFrame, fps ?? 24),
-					depthScale: resolveVal(target?.depthScale ?? target?.relightDepthScale ?? relightOpts.depthScale, 1, compositionFrame, fps ?? 24),
+					roughness: resolveFrameNumber(target?.roughness ?? target?.relightRoughness ?? relightOpts.specularRoughness ?? relightOpts.roughness, .35, compositionFrame, fps ?? 24),
+					specularStrength: resolveFrameNumber(target?.specularStrength ?? target?.relightSpecularStrength ?? relightOpts.specularStrength, .7, compositionFrame, fps ?? 24),
+					metallic: resolveFrameNumber(target?.metallic ?? target?.relightMetallic ?? relightOpts.metallic, 0, compositionFrame, fps ?? 24),
+					ambientIntensity: resolveFrameNumber(target?.ambientIntensity ?? target?.relightAmbientIntensity ?? relightOpts.ambientIntensity, .15, compositionFrame, fps ?? 24),
+					depthScale: resolveFrameNumber(target?.depthScale ?? target?.relightDepthScale ?? relightOpts.depthScale, 1, compositionFrame, fps ?? 24),
 					opacity: 1
 				}, "clear");
 				finalTex = relitTex;
@@ -2994,6 +3007,7 @@ const CompositorWebGPURenderer = async (args) => {
 					specularIntensity: target?.specularIntensity ?? lop.specularIntensity,
 					ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
 					metallic: target?.metallic ?? lop.metallic,
+					...surfaceProps(target, lop),
 					...modelMatrix && { modelMatrix }
 				};
 				const quadHasContent = layerHasRaster || Boolean(quadOpts.borderWidth && quadOpts.borderWidth > 0 && quadOpts.borderColor);
@@ -3301,5 +3315,5 @@ audioRegistry.register("CompositorLayer", compositorLayerAudioProcessor);
 var renderers_default = defineRenderer({ WebGPURenderer: CompositorWebGPURenderer });
 
 //#endregion
-export { Transform3DMath, renderers_default as default, has3DTransform, solveHomography };
-//# sourceMappingURL=renderer-xKOVmd2O.mjs.map
+export { Transform3DMath, renderers_default as default, has3DTransform };
+//# sourceMappingURL=renderer-DzhRNdBS.mjs.map