framefields 2.9.3 → 2.10.0-canary.0

package/dist/renderer-DLmJ9GWE.mjs

@@ -0,0 +1,5 @@
+import "./chunk-W71TSjRM.mjs";
+import "./dist-C4Vxgm0Q.mjs";
+import { t as renderers_default } from "./renderer-DrExCXnp.mjs";
+
+export { renderers_default as default };

package/dist/renderer-DM7PUWP9.mjs

@@ -0,0 +1,5 @@
+import "./chunk-W71TSjRM.mjs";
+import "./dist-C4Vxgm0Q.mjs";
+import { t as renderers_default } from "./renderer-CanNjQuL.mjs";
+
+export { renderers_default as default };

package/dist/{renderer-Du-GnKLb.mjs → renderer-DMtzPqYo.mjs}

@@ -1,14 +1,14 @@
-import "./chunk-D8S17ehY.mjs";
-import { It as getActiveMediaMetadata, _n as reportRenderDiagnostic, p as DEFAULT_DURATION_MS, rn as mediaSourceTime, vn as resolveBoolean, xn as resolveNumber } from "./dist-ByxHoMQI.mjs";
-import { l as solveHomography, n as defineRenderer, o as resolveFrameNumber, r as effectReach, t as audioRegistry } from "./renderer-DrWeb39d.mjs";
-import { B as jointMatrices, F as getPrimitiveGeometry, G as measureMaxCaptionHeight, M as fitSpansToText, N as generateExtrudedTextGeometry, Q as poseNodes, _t as Vector3Math, at as spansText, d as ScreenSpaceRelightPipeline, ht as Matrix4Math, l as Renderer3D, lt as resolveMediaSourceUrl, n as AudioLatentTrackCache, nt as sampleMorphWeights, ot as srtLoader, p as SlugFontCache, pt as Light3D, q as parseColor, tt as resolveTextSpans, ut as Camera3D } from "./dist-D12-a3-x.mjs";
-import { a as createFullscreenPipeline, l as fragmentBindGroupLayout, n as PREMULTIPLIED_BLEND, t as FULLSCREEN_QUAD_WGSL } from "./gpu-zFNrvhV9.mjs";
-import { n as decodeAudioSource, o as resolveLayerDuration, p as measureText } from "./dist-DEUU6sNe.mjs";
-import { o as TemporalDeflickerPipeline } from "./dist-Cn8bDsQF.mjs";
-import { B as evaluateKeyframes, I as computeLayout, N as collectNodeOps, U as initLayout, V as evaluateTrackAtFrame } from "./program-xjIwjKb6.mjs";
+import "./chunk-W71TSjRM.mjs";
+import { It as getActiveMediaMetadata, _n as reportRenderDiagnostic, p as DEFAULT_DURATION_MS, rn as mediaSourceTime, vn as resolveBoolean, xn as resolveNumber } from "./dist-Bf2_efYP.mjs";
+import { i as effectReach, n as defineRenderer, r as effectMaxPixelScale, s as resolveFrameNumber, t as audioRegistry, u as solveHomography } from "./renderer-BOg8i8eF.mjs";
+import { B as jointMatrices, F as getPrimitiveGeometry, G as measureMaxCaptionHeight, M as fitSpansToText, N as generateExtrudedTextGeometry, Q as poseNodes, at as spansText, ct as transformScale, d as ScreenSpaceRelightPipeline, dt as Camera3D, gt as Matrix4Math, l as Renderer3D, mt as Light3D, n as AudioLatentTrackCache, nt as sampleMorphWeights, ot as srtLoader, p as SlugFontCache, q as parseColor, tt as resolveTextSpans, ut as resolveMediaSourceUrl, vt as Vector3Math } from "./dist-C4Vxgm0Q.mjs";
+import { a as createFullscreenPipeline, l as fragmentBindGroupLayout, n as PREMULTIPLIED_BLEND, t as FULLSCREEN_QUAD_WGSL } from "./gpu-Bw35AMwY.mjs";
+import { n as decodeAudioSource, o as resolveLayerDuration, p as measureText } from "./dist-Cu1fZ9Uy.mjs";
+import { o as TemporalDeflickerPipeline } from "./dist-BIE8fvlv.mjs";
+import { B as evaluateKeyframes, I as computeLayout, N as collectNodeOps, U as initLayout, V as evaluateTrackAtFrame } from "./program-BUjUTdxq.mjs";
 import gsapModule from "gsap";
 
-//#region ../../nodes/node-compositor/dist/renderers-X4CI4wde.mjs
+//#region ../../nodes/node-compositor/dist/renderers-Cvrf0vGs.mjs
 /**
 * Solves a cubic bezier curve defined by control points (x1, y1) and (x2, y2)
 * for a given progress parameter t in [0, 1].
@@ -847,6 +847,25 @@ function resolveLayer2DPosition(params) {
 	};
 	return transformPoint(pm, localX, localY);
 }
+/** Past this many pixels per layout px a scaled-up layer gains nothing visible. */
+const MAX_RASTER_SCALE = 4;
+/**
+* Pixels per layout px to rasterize a 2D layer at, so it stays sharp when its
+* transform onto the canvas scales it up by `axisScale` (the transform's
+* larger axis scale). Rounded up to a quarter, so an animated zoom reuses a
+* few texture sizes instead of allocating new ones every frame; never below 1
+* (a shrunk layer keeps its layout raster). Capped, rounded down to a quarter,
+* by MAX_RASTER_SCALE, by `limits.maxDimension` (the GPU's texture side), by
+* `limits.maxPixels` (a pixel budget for one texture) and by
+* `limits.effects`, the highest scale the layer's effects keep their look at.
+*/
+function layerRasterScale(axisScale, size, limits) {
+	const w = Math.max(1, size.width);
+	const h = Math.max(1, size.height);
+	const cap = Math.min(MAX_RASTER_SCALE, limits.maxDimension / Math.max(w, h), Math.sqrt(limits.maxPixels / (w * h)), limits.effects);
+	const wanted = Math.ceil(axisScale * 4 - 1e-6) / 4;
+	return Math.max(1, Math.min(wanted, Math.floor(cap * 4 + 1e-6) / 4));
+}
 const Transform3DMath = {
 	identity() {
 		return [
@@ -1345,6 +1364,30 @@ function effectsReach(effects) {
 	}
 	return reach;
 }
+/**
+* The most pixels per layout px a leaf's effects keep their look at: the
+* least any of them declares (`maxPixelScale`), 1 for one that doesn't.
+* Relighting runs in the leaf itself, at any scale.
+*/
+function effectsMaxPixelScale(effects) {
+	let limit = Number.POSITIVE_INFINITY;
+	for (const e of effects) {
+		const op = e && typeof e.toOperation === "function" ? e.toOperation() : e;
+		if (!op || typeof op !== "object" || op.op === "Relight3D") continue;
+		limit = Math.min(limit, effectMaxPixelScale(op));
+	}
+	return limit;
+}
+/**
+* Media content that draws in its layer's own units, so it can be drawn
+* under a raster scale: a source or a nested composition. Effect, crop and
+* vision passes wrapped around a source draw at their container's size in
+* their own pixel space instead.
+*/
+function drawsInLayerUnits(content) {
+	const op = content?.operation?.op;
+	return op === "source" || op === "Compositor";
+}
 function quatFromEulerAngles(rx, ry, rz) {
 	const DEG = Math.PI / 180;
 	const halfX = rx * DEG / 2;
@@ -1480,7 +1523,11 @@ async function applyLayerEffectsInRegion(region, effects, sourceTex, width, heig
 		view: out.createView()
 	};
 }
-async function applyLayerEffects(effects, sourceTex, width, height, ctx, encoder, props, drawChild, excludes, shiftedFrame, compositionFrame, fps, isVideoMode, layerId) {
+/**
+* Runs `effects` over `sourceTex` (`width`×`height` pixels, `pixelScale` of
+* them per layout px) into a new texture of its size.
+*/
+async function applyLayerEffects(effects, sourceTex, width, height, ctx, encoder, props, drawChild, excludes, shiftedFrame, compositionFrame, fps, isVideoMode, layerId, pixelScale = 1) {
 	const remainingEffects = effects.filter((e) => {
 		if (!e || typeof e !== "object") return false;
 		const op = e?.op;
@@ -1543,6 +1590,7 @@ async function applyLayerEffects(effects, sourceTex, width, height, ctx, encoder
 			...props,
 			containerWidth: width,
 			containerHeight: height,
+			pixelScale,
 			renderId: `${props.renderId}-${layerId}-fx`,
 			frame: shiftedFrame,
 			compositionFrame,
@@ -1730,6 +1778,12 @@ const CompositorWebGPURenderer = async (args) => {
 		});
 		const is3DScene = Boolean(cameraVM || has3DLayer || lightVMs.length > 0);
 		let camera = null;
+		/** Where a relief keeps its look from: the default camera at the scene's field of view. */
+		let reliefEye = [
+			0,
+			0,
+			0
+		];
 		let dofEnabled = false;
 		const sceneLights = [];
 		let sceneEnvironment = null;
@@ -1740,6 +1794,7 @@ const CompositorWebGPURenderer = async (args) => {
 			const camStub = camOp?.id ? targetsById[camOp.id] : void 0;
 			const fov = camStub?.cameraFov ?? camOp?.lens?.fov ?? 50;
 			camera = Camera3D.createDefaultCamera(nativeWidth, nativeHeight, fov);
+			reliefEye = [...camera.eye];
 			camera.near = camOp?.lens?.near ?? 1;
 			camera.far = camOp?.lens?.far ?? 5e4;
 			camera.zoom = camStub?.cameraZoom ?? camOp?.lens?.zoom ?? 1;
@@ -1860,8 +1915,31 @@ const CompositorWebGPURenderer = async (args) => {
 			}
 		}
 		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));
+		/** Textures the queued 3D items still read: their layers, mattes and reliefs. */
+		const pendingTextures = () => pending3DItems.flatMap((q) => [
+			q.texture,
+			q.opts.matte,
+			q.kind === "quad" ? q.opts.relief?.texture : void 0
+		]).filter((t) => Boolean(t));
+		/** Reliefs of 3D layers by owner id, drawn just before their owner. */
+		const reliefs = /* @__PURE__ */ new Map();
+		/** The relief a 3D layer drawn at (x, y, w, h) of its pass carries, if any. */
+		const reliefOpts = (id, x, y, w, h) => {
+			const r = id === void 0 ? void 0 : reliefs.get(id);
+			if (!r) return {};
+			const { width, height } = r.texture;
+			return { relief: {
+				texture: r.texture,
+				uvRect: [
+					x / width,
+					y / height,
+					w / width,
+					h / height
+				],
+				amount: r.amount,
+				eye: reliefEye
+			} };
+		};
 		const flush3DPass = (curTex, curView, curExcludes) => {
 			if (pending3DItems.length === 0 || !camera) return {
 				finalTex: curTex,
@@ -2088,6 +2166,14 @@ const CompositorWebGPURenderer = async (args) => {
 			}
 			return true;
 		};
+		const rasterScaleOf = (matrix, width, height, effects = Number.POSITIVE_INFINITY) => layerRasterScale(transformScale(matrix), {
+			width,
+			height
+		}, {
+			maxDimension: ctx.device.limits.maxTextureDimension2D,
+			maxPixels: 4 * nativeWidth * nativeHeight,
+			effects
+		});
 		const renderNodeTree = async (vms, initialTex, initialView, excludes, accumulatedOpacity = 1, parentMatrix = new DOMMatrix(), parentRect = null, targetW = nativeWidth, targetH = nativeHeight, parent3DMatrix = null, isRootScene = false) => {
 			const sorted = [...vms].sort((a, b) => {
 				return (a.operation?.zIndex ?? 0) - (b.operation?.zIndex ?? 0);
@@ -2096,14 +2182,16 @@ const CompositorWebGPURenderer = async (args) => {
 			let activeView = initialView;
 			let activeExcludes = excludes;
 			const mattesByOwner = /* @__PURE__ */ new Map();
+			const reliefsByOwner = /* @__PURE__ */ new Map();
 			for (const vm of vms) {
-				const owner = vm.operation?.matteOf;
-				if (owner) mattesByOwner.set(owner, vm);
+				const op$1 = vm.operation;
+				if (op$1?.matteOf) mattesByOwner.set(op$1.matteOf, vm);
+				if (op$1?.reliefOf) reliefsByOwner.set(op$1.reliefOf, vm);
 			}
 			for (const child of sorted) {
 				const lop = child.operation;
 				if (lop.kind === "camera" || lop.kind === "light") continue;
-				if (lop.matteOf) continue;
+				if (lop.matteOf || lop.reliefOf) 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);
@@ -2127,29 +2215,43 @@ const CompositorWebGPURenderer = async (args) => {
 					continue;
 				}
 				nodeIndex += 1;
+				const isolate = async (vm, index) => {
+					const queued = pending3DItems.splice(0);
+					const busy = [
+						targetTexture,
+						activeTex,
+						...activeExcludes,
+						...queued.flatMap((q) => [
+							q.texture,
+							q.opts.matte,
+							q.kind === "quad" ? q.opts.relief?.texture : void 0
+						])
+					].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 reliefVM = lop.reliefId ? reliefsByOwner.get(lop.id) : void 0;
+				if (reliefVM && isChild3D) {
+					const texture = await isolate(reliefVM, nodeIndex);
+					activeExcludes = [...activeExcludes, texture];
+					nodeIndex += 1;
+					reliefs.set(lop.id, {
+						texture,
+						amount: lop.reliefAmount ?? 0
+					});
+				}
 				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) {
@@ -3423,7 +3525,8 @@ const CompositorWebGPURenderer = async (args) => {
 						ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
 						metallic: target?.metallic ?? lop.metallic,
 						...surfaceProps(target, lop),
-						...modelMatrix && { modelMatrix }
+						...modelMatrix && { modelMatrix },
+						...reliefOpts(lop.id, localX, localY, layerW, layerH)
 					};
 					pending3DItems.push({
 						kind: "quad",
@@ -3554,7 +3657,7 @@ const CompositorWebGPURenderer = async (args) => {
 						activeTex,
 						targetTexture,
 						...excludes
-					]) : null;
+					], rasterScaleOf(layerMatrix, layerW, layerH)) : null;
 					if (paint || border) {
 						const pass$1 = ctx.renderer.beginFrame(encoder, activeView, {
 							r: 0,
@@ -3611,7 +3714,7 @@ const CompositorWebGPURenderer = async (args) => {
 						activeTex,
 						targetTexture,
 						...excludes
-					]) : null;
+					], rasterScaleOf(layerMatrix, layerW, layerH)) : null;
 					if (border) {
 						const pass$1 = ctx.renderer.beginFrame(encoder, activeView, {
 							r: 0,
@@ -3698,7 +3801,7 @@ const CompositorWebGPURenderer = async (args) => {
 					]);
 					activeGroupView = activeGroupTex.createView();
 				}
-				const borderResult$1 = lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br$1, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", [activeGroupTex, ...groupExcludes]) : null;
+				const borderResult$1 = lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br$1, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", [activeGroupTex, ...groupExcludes], rasterScaleOf(layerMatrix, layerW, layerH)) : null;
 				if (borderResult$1) {
 					const borderPass = ctx.renderer.beginFrame(encoder, activeGroupView, {
 						r: 0,
@@ -3802,8 +3905,24 @@ const CompositorWebGPURenderer = async (args) => {
 				finalView: activeView
 			};
 			const br = Math.min(lop.borderRadius ?? lop.strokeRadius ?? 0, layerW / 2, layerH / 2);
-			const texW = Math.ceil(layerW);
-			const texH = Math.ceil(layerH);
+			const leafDeflickerEffect = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "TemporalDeflicker" || e?.constructor?.name === "TemporalDeflicker") : void 0;
+			const deflickerOpts = target?.deflicker ?? lop.deflicker ?? leafDeflickerEffect;
+			const leafRelightEffect = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "Relight3D" || e?.constructor?.name === "Relight3D") : void 0;
+			const rawLeafRelight = target?.relighting ?? lop.relighting ?? (typeof lop.relight === "object" ? lop.relight : void 0) ?? leafRelightEffect;
+			const relightOpts = typeof rawLeafRelight === "object" && rawLeafRelight !== null ? rawLeafRelight : void 0;
+			const shutterAngle = target?.motionBlurShutter ?? lop.motionBlurShutter ?? 0;
+			const hasEffects = kind !== "media" && Array.isArray(lop.effects) && lop.effects.length > 0;
+			const rasterScale = isTrue3D || is3D || deflickerOpts || kind === "media" && !drawsInLayerUnits(nodeVM.children?.[0]) ? 1 : rasterScaleOf(layerMatrix, layerW, layerH, hasEffects ? effectsMaxPixelScale(lop.effects) : void 0);
+			const raster = new DOMMatrix([
+				rasterScale,
+				0,
+				0,
+				rasterScale,
+				0,
+				0
+			]);
+			const texW = Math.ceil(layerW * rasterScale);
+			const texH = Math.ceil(layerH * rasterScale);
 			const savedScissors = ctx.renderer.suspendScissors?.() ?? [];
 			const localTex = ctx.renderer.getTemporaryTexture(texW, texH, [
 				activeTex,
@@ -3944,6 +4063,7 @@ const CompositorWebGPURenderer = async (args) => {
 				const captureGlyphs = isTrue3D && kind === "text";
 				const rasterDrawsBefore = ctx.renderer.rasterDrawCount;
 				if (captureGlyphs) ctx.renderer.slugPipeline.beginCapture();
+				ctx.renderer.pushTransform(raster);
 				try {
 					await drawChild(content, {
 						containerWidth: layerW,
@@ -3985,6 +4105,7 @@ const CompositorWebGPURenderer = async (args) => {
 						}
 					}, localView, localTex, texW, texH);
 				} finally {
+					ctx.renderer.popTransform();
 					if (captureGlyphs) glyphBatches = ctx.renderer.slugPipeline.endCapture();
 				}
 				layerHasRaster = ctx.renderer.rasterDrawCount !== rasterDrawsBefore;
@@ -4042,6 +4163,7 @@ const CompositorWebGPURenderer = async (args) => {
 				const trimStart = target?.trimStart ?? lop.trimStart ?? 0;
 				const trimEnd = target?.trimEnd ?? lop.trimEnd ?? 1;
 				const trimOffset = target?.trimOffset ?? lop.trimOffset ?? 0;
+				ctx.renderer.pushTransform(raster);
 				ctx.renderer.drawShape(shapePass, shapeConfig, fillConfig, strokeWidth > 0 ? {
 					color: strokeColor,
 					width: strokeWidth,
@@ -4052,15 +4174,9 @@ const CompositorWebGPURenderer = async (args) => {
 					dashArray: strokeDashArray,
 					dashOffset: strokeDashOffset
 				} : void 0);
+				ctx.renderer.popTransform();
 				shapePass.end();
 			}
-			const leafDeflickerEffect = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "TemporalDeflicker" || e?.constructor?.name === "TemporalDeflicker") : void 0;
-			const deflickerOpts = target?.deflicker ?? lop.deflicker ?? leafDeflickerEffect;
-			const leafRelightEffect = Array.isArray(lop.effects) ? lop.effects.find((e) => e?.op === "Relight3D" || e?.constructor?.name === "Relight3D") : void 0;
-			const rawLeafRelight = target?.relighting ?? lop.relighting ?? (typeof lop.relight === "object" ? lop.relight : void 0) ?? leafRelightEffect;
-			const relightOpts = typeof rawLeafRelight === "object" && rawLeafRelight !== null ? rawLeafRelight : void 0;
-			const shutterAngle = target?.motionBlurShutter ?? lop.motionBlurShutter ?? 0;
-			const hasEffects = kind !== "media" && Array.isArray(lop.effects) && lop.effects.length > 0;
 			if (glyphBatches && glyphBatches.length > 0 && (deflickerOpts || relightOpts || shutterAngle > 0 || hasEffects)) {
 				const glyphPass = ctx.renderer.beginFrame(encoder, localView, {
 					r: 0,
@@ -4094,6 +4210,7 @@ const CompositorWebGPURenderer = async (args) => {
 					b: 0,
 					a: 0
 				}, texW, texH, "load");
+				ctx.renderer.pushTransform(raster);
 				ctx.renderer.drawRect(maskPass, {
 					x: 0,
 					y: 0,
@@ -4105,6 +4222,7 @@ const CompositorWebGPURenderer = async (args) => {
 					b: 1,
 					a: 1
 				}, br);
+				ctx.renderer.popTransform();
 				maskPass.end();
 				finalTex = ctx.renderer.composite(encoder, localTex, maskTex, "mask-in", [
 					activeTex,
@@ -4120,11 +4238,13 @@ const CompositorWebGPURenderer = async (args) => {
 			if (relightOpts) {
 				const relightPipeline = getScreenSpaceRelightPipeline(ctx.device, ctx.renderer.format ?? "rgba8unorm");
 				const r3dInstance = getRenderer3D(ctx.device, ctx.renderer.format ?? "rgba8unorm", sampleCount3d);
+				const extentW = texW / rasterScale;
+				const extentH = texH / rasterScale;
 				const activeLights = synthesizeRelightLights(relightOpts, sceneLights, {
 					x: sampledX,
 					y: sampledY,
-					width: texW,
-					height: texH
+					width: extentW,
+					height: extentH
 				}, compositionFrame, fps ?? 24);
 				const lightsBuffer = r3dInstance.getOrCreateLightsBuffer(activeLights);
 				const relitTex = ctx.renderer.getTemporaryTexture(texW, texH, [
@@ -4136,8 +4256,8 @@ const CompositorWebGPURenderer = async (args) => {
 				const relitView = relitTex.createView();
 				const normalTex = relightOpts.normalTexture ?? relightOpts.normalMap;
 				relightPipeline.execute(encoder, relitView, finalTex, normalTex, lightsBuffer, {
-					viewportWidth: texW,
-					viewportHeight: texH,
+					viewportWidth: extentW,
+					viewportHeight: extentH,
 					layerX: sampledX,
 					layerY: sampledY,
 					roughness: resolveFrameNumber(target?.roughness ?? target?.relightRoughness ?? relightOpts.specularRoughness ?? relightOpts.roughness, .35, compositionFrame, fps ?? 24),
@@ -4162,9 +4282,11 @@ const CompositorWebGPURenderer = async (args) => {
 				if (Math.hypot(vx, vy) > .5) {
 					if (!isTrue3D && !(is3D && quad3D)) {
 						const reach = shutterAngle / 360;
-						blurPadX = Math.ceil(Math.abs(vx) * reach);
-						blurPadY = Math.ceil(Math.abs(vy) * reach);
-						const paddedTex = ctx.renderer.getTemporaryTexture(texW + blurPadX * 2, texH + blurPadY * 2, [
+						const padX$1 = Math.ceil(Math.abs(vx) * rasterScale * reach);
+						const padY$1 = Math.ceil(Math.abs(vy) * rasterScale * reach);
+						blurPadX = padX$1 / rasterScale;
+						blurPadY = padY$1 / rasterScale;
+						const paddedTex = ctx.renderer.getTemporaryTexture(texW + padX$1 * 2, texH + padY$1 * 2, [
 							finalTex,
 							activeTex,
 							targetTexture,
@@ -4177,17 +4299,17 @@ const CompositorWebGPURenderer = async (args) => {
 							a: 0
 						}, paddedTex.width, paddedTex.height, "clear");
 						ctx.renderer.drawTexture(padPass, finalTex, {
-							x: blurPadX,
-							y: blurPadY,
+							x: padX$1,
+							y: padY$1,
 							width: texW,
 							height: texH
 						}, { opacity: 1 });
 						padPass.end();
 						finalTex = paddedTex;
 					}
-					const streakPx = Math.hypot(vx, vy) * (shutterAngle / 360) * 2;
+					const streakPx = Math.hypot(vx, vy) * rasterScale * (shutterAngle / 360) * 2;
 					const samples = Math.min(128, Math.max(16, Math.ceil(streakPx / 2)));
-					finalTex = ctx.renderer.applyMotionBlur(encoder, finalTex, vx, vy, shutterAngle, samples, [
+					finalTex = ctx.renderer.applyMotionBlur(encoder, finalTex, vx * rasterScale, vy * rasterScale, shutterAngle, samples, [
 						activeTex,
 						targetTexture,
 						...excludes
@@ -4199,7 +4321,7 @@ const CompositorWebGPURenderer = async (args) => {
 				activeTex,
 				targetTexture,
 				...excludes
-			], shiftedFrame, compositionFrame, fps ?? 24, isVideoMode, lop.id ?? `leaf_${i}`)).texture;
+			], shiftedFrame, compositionFrame, fps ?? 24, isVideoMode, lop.id ?? `leaf_${i}`, rasterScale)).texture;
 			const borderExcludes = [
 				localTex,
 				finalTex,
@@ -4207,7 +4329,7 @@ const CompositorWebGPURenderer = async (args) => {
 				targetTexture,
 				...excludes
 			];
-			const borderResult = !isTrue3D && lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", borderExcludes) : null;
+			const borderResult = !isTrue3D && lop.borderWidth !== void 0 && lop.borderColor ? createBorderTexture(ctx, encoder, layerW, layerH, br, lop.borderWidth, lop.borderColor, lop.strokeAlign ?? "inside", borderExcludes, rasterScale) : null;
 			if (savedScissors.length > 0) ctx.renderer.resumeScissors?.(savedScissors);
 			if (isTrue3D) {
 				const renderedTex = finalTex;
@@ -4258,7 +4380,7 @@ const CompositorWebGPURenderer = async (args) => {
 					],
 					width: layerW,
 					height: layerH,
-					textureExtent: [layerW / texW, layerH / texH],
+					textureExtent: [layerW * rasterScale / texW, layerH * rasterScale / texH],
 					rotation: [
 						target?.rotateX ?? lop.rotateX ?? 0,
 						target?.rotateY ?? lop.rotateY ?? 0,
@@ -4282,7 +4404,8 @@ const CompositorWebGPURenderer = async (args) => {
 					ambientIntensity: target?.ambientIntensity ?? lop.ambientIntensity,
 					metallic: target?.metallic ?? lop.metallic,
 					...surfaceProps(target, lop),
-					...modelMatrix && { modelMatrix }
+					...modelMatrix && { modelMatrix },
+					...reliefOpts(lop.id, localX, localY, layerW, layerH)
 				};
 				const quadHasContent = layerHasRaster || Boolean(quadOpts.borderWidth && quadOpts.borderWidth > 0 && quadOpts.borderColor);
 				if (!glyphBatches || quadHasContent) pending3DItems.push({
@@ -4436,7 +4559,11 @@ const CompositorWebGPURenderer = async (args) => {
 };
 /** Pixels of room around a border texture for its anti-aliased edge. */
 const BORDER_AA_MARGIN = 2;
-function createBorderTexture(ctx, encoder, w, h, br, borderWidth, borderColor, strokeAlign, excludeTextures) {
+/**
+* A `w`×`h` box's border as a texture, `rasterScale` pixels per layout px,
+* and the rect it covers in layout px (around the box, at its origin).
+*/
+function createBorderTexture(ctx, encoder, w, h, br, borderWidth, borderColor, strokeAlign, excludeTextures, rasterScale = 1) {
 	if (w <= 0 || h <= 0 || !borderColor || !borderWidth || borderWidth <= 0) return null;
 	let ox = 0;
 	let oy = 0;
@@ -4472,8 +4599,16 @@ function createBorderTexture(ctx, encoder, w, h, br, borderWidth, borderColor, s
 	}
 	if (ow <= 0 || oh <= 0) return null;
 	const m = BORDER_AA_MARGIN;
-	const borderTexW = Math.ceil(ow + 2 * m);
-	const borderTexH = Math.ceil(oh + 2 * m);
+	const borderTexW = Math.ceil((ow + 2 * m) * rasterScale);
+	const borderTexH = Math.ceil((oh + 2 * m) * rasterScale);
+	const raster = new DOMMatrix([
+		rasterScale,
+		0,
+		0,
+		rasterScale,
+		0,
+		0
+	]);
 	const outerTex = ctx.renderer.getTemporaryTexture(borderTexW, borderTexH, excludeTextures);
 	const outerView = outerTex.createView();
 	ctx.renderer.beginFrame(encoder, outerView, {
@@ -4488,12 +4623,14 @@ function createBorderTexture(ctx, encoder, w, h, br, borderWidth, borderColor, s
 		b: 0,
 		a: 0
 	}, borderTexW, borderTexH, "load");
+	ctx.renderer.pushTransform(raster);
 	ctx.renderer.drawRect(outerDrawPass, {
 		x: m,
 		y: m,
 		width: ow,
 		height: oh
 	}, borderColor, outerRadius);
+	ctx.renderer.popTransform();
 	outerDrawPass.end();
 	const innerW = ow - 2 * borderWidth;
 	const innerH = oh - 2 * borderWidth;
@@ -4512,6 +4649,7 @@ function createBorderTexture(ctx, encoder, w, h, br, borderWidth, borderColor, s
 			b: 0,
 			a: 0
 		}, borderTexW, borderTexH, "load");
+		ctx.renderer.pushTransform(raster);
 		ctx.renderer.drawRect(innerDrawPass, {
 			x: m + borderWidth,
 			y: m + borderWidth,
@@ -4523,21 +4661,22 @@ function createBorderTexture(ctx, encoder, w, h, br, borderWidth, borderColor, s
 			b: 1,
 			a: 1
 		}, innerRadius);
+		ctx.renderer.popTransform();
 		innerDrawPass.end();
 		return {
 			borderTex: ctx.renderer.composite(encoder, outerTex, innerTex, "mask-out", excludeTextures),
 			ox: ox - m,
 			oy: oy - m,
-			ow: borderTexW,
-			oh: borderTexH
+			ow: borderTexW / rasterScale,
+			oh: borderTexH / rasterScale
 		};
 	}
 	return {
 		borderTex: outerTex,
 		ox: ox - m,
 		oy: oy - m,
-		ow: borderTexW,
-		oh: borderTexH
+		ow: borderTexW / rasterScale,
+		oh: borderTexH / rasterScale
 	};
 }
 const compositorLayerAudioProcessor = async (channels, sampleRate, virtualMedia, ctx) => {
@@ -4593,4 +4732,4 @@ var renderers_default = defineRenderer({ WebGPURenderer: CompositorWebGPURendere
 
 //#endregion
 export { Transform3DMath, renderers_default as default, has3DTransform };
-//# sourceMappingURL=renderer-Du-GnKLb.mjs.map
+//# sourceMappingURL=renderer-DMtzPqYo.mjs.map