framefields 2.11.0 → 2.13.0

package/dist/{dist-CWLLnigL.mjs → dist-D3BeAZ7X.mjs}

@@ -1,5 +1,5 @@
-import { i as __toESM, r as __require, t as __commonJSMin } from "./chunk-W71TSjRM.mjs";
-import { $t as limitGradientStops, Et as emojiPresentation, Ht as gradientStopsToOklab, Xt as isSignal, Zt as isValueSignal, dn as parseCssGradient, un as parseCssColor } from "./dist-Bf2_efYP.mjs";
+import { i as __toESM, r as __require, t as __commonJSMin } from "./chunk-DOL2i2sR.mjs";
+import { $t as limitGradientStops, Et as emojiPresentation, Ht as gradientStopsToOklab, Xt as isSignal, Zt as isValueSignal, dn as parseCssGradient, un as parseCssColor } from "./dist-C8XSqfTx.mjs";
 import { ALL_FORMATS, AudioBufferSink, CanvasSink, FilePathSource, Input, UrlSource, VideoSampleSink } from "mediabunny";
 import fs from "node:fs";
 import path from "node:path";
@@ -16210,6 +16210,20 @@ var WebGPUAudioProcessor = class WebGPUAudioProcessor$1 {
 		const cacheKey = `${renderId ?? "global"}_${nodeId}_${activeSignalsKey}_${stateFloatCount}`;
 		return WebGPUAudioProcessor$1.devicePipelineCache.get(device)?.get(cacheKey);
 	}
+	/**
+	* Zeroes the state every effect keeps for `renderId` (delay lines,
+	* envelopes, reverb tails), as on its first use. Pipelines and buffers
+	* stay, so a mix that starts again doesn't compile them again.
+	*/
+	static resetState(renderId, device) {
+		const cache = WebGPUAudioProcessor$1.devicePipelineCache.get(device);
+		if (!cache) return;
+		const prefix = `${renderId}_`;
+		for (const [key, cached$1] of cache.entries()) {
+			if (!key.startsWith(prefix)) continue;
+			device.queue.writeBuffer(cached$1.stateBuffer, 0, new Float32Array(cached$1.stateBuffer.size / 4));
+		}
+	}
 	static clearCache(renderId, device) {
 		if (!device) return;
 		const cache = WebGPUAudioProcessor$1.devicePipelineCache.get(device);
@@ -16643,6 +16657,10 @@ async function acquireDevice(opts) {
 	if (adapter.limits && Number.isInteger(adapter.limits.maxTextureDimension2D)) requiredLimits.maxTextureDimension2D = Math.min(8192, adapter.limits.maxTextureDimension2D);
 	if (adapter.limits && Number.isInteger(adapter.limits.maxStorageBuffersPerShaderStage)) requiredLimits.maxStorageBuffersPerShaderStage = Math.min(16, adapter.limits.maxStorageBuffersPerShaderStage);
 	if (adapter.limits && Number.isInteger(adapter.limits.maxStorageBuffersPerPipelineLayout)) requiredLimits.maxStorageBuffersPerPipelineLayout = Math.min(16, adapter.limits.maxStorageBuffersPerPipelineLayout);
+	for (const limit of ["maxStorageBufferBindingSize", "maxBufferSize"]) {
+		const max = adapter.limits?.[limit];
+		if (Number.isFinite(max)) requiredLimits[limit] = max;
+	}
 	return adapter.requestDevice({
 		requiredFeatures,
 		requiredLimits
@@ -17102,10 +17120,13 @@ async function toLocalPath(src) {
 );
 	return resolve$1$1(src);
 }
-/** In the browser, local paths are served through the dev server's `/@fs`. */
+/**
+* In the browser (a page or a worker), local paths are served through the
+* dev server's `/@fs`.
+*/
 function resolveInputUrl(url, isNode) {
 	let resolvedUrl = url;
-	if (!isNode && typeof window !== "undefined") {
+	if (!isNode && typeof location !== "undefined") {
 		if (resolvedUrl.startsWith("file://")) resolvedUrl = resolvedUrl.slice(7);
 		if (resolvedUrl.startsWith("/") && !resolvedUrl.startsWith("/@fs/") && !resolvedUrl.startsWith("/api/")) resolvedUrl = "/@fs" + resolvedUrl;
 	}
@@ -17134,6 +17155,15 @@ async function assertReadableFile(filePath, url) {
 }
 var InputStore = class {
 	store = /* @__PURE__ */ new Map();
+	resolveMissing;
+	/**
+	* Reads local files that are missing from disk from the URL `resolver`
+	* gives, with HTTP range requests, so a clip pinned on a bucket plays
+	* without being downloaded. Unset with no argument.
+	*/
+	setMissingMediaResolver(resolver) {
+		this.resolveMissing = resolver;
+	}
 	async acquire(url) {
 		if (!url) throw new Error("Cannot acquire Input for empty URL");
 		const resolvedUrl = resolveInputUrl(url, isNodeRuntime());
@@ -17142,10 +17172,8 @@ var InputStore = class {
 			const promise = (async () => {
 				const filePath = await toLocalPath(resolvedUrl.startsWith("file:") ? resolvedUrl : safeDecode(resolvedUrl));
 				let source;
-				if (filePath !== null) {
-					await assertReadableFile(filePath, url);
-					source = new FilePathSource(filePath);
-				} else source = new UrlSource(resolvedUrl);
+				if (filePath !== null) source = await this.localSource(filePath, url);
+				else source = new UrlSource(resolvedUrl);
 				return new Input({
 					source,
 					formats: ALL_FORMATS
@@ -17176,6 +17204,16 @@ var InputStore = class {
 			} catch (_) {}
 		}, () => {});
 	}
+	async localSource(filePath, url) {
+		try {
+			await assertReadableFile(filePath, url);
+			return new FilePathSource(filePath);
+		} catch (err) {
+			const remote = await this.resolveMissing?.(filePath);
+			if (remote) return new UrlSource(remote);
+			throw err;
+		}
+	}
 	release(url) {
 		if (!url) return;
 		const resolvedUrl = resolveInputUrl(url, isNodeRuntime());
@@ -26511,6 +26549,50 @@ async function drawSignalNode(ctx, encoder, pass, props) {
 	pass.setBindGroup(1, bindGroup1);
 	pass.draw(4);
 }
+/**
+* Target pixels per local unit along the axis `m` stretches most: what a
+* raster drawn under `m` needs per unit to stay sharp, and what one target
+* pixel is in local units (its inverse).
+*/
+function transformScale(m) {
+	return Math.max(Math.hypot(m.a, m.b), Math.hypot(m.c, m.d));
+}
+var TransformStack = class {
+	stack = [new DOMMatrix()];
+	push(matrix) {
+		const next = this.stack[this.stack.length - 1].multiply(matrix);
+		this.stack.push(next);
+	}
+	pop() {
+		if (this.stack.length > 1) this.stack.pop();
+	}
+	getCurrent() {
+		return this.stack[this.stack.length - 1];
+	}
+	packIntoBuffer(bufferData, opacity, surfaceWidth, surfaceHeight, localOverride, customParam) {
+		let m = this.getCurrent();
+		if (localOverride) m = m.multiply(localOverride);
+		bufferData[0] = m.a;
+		bufferData[1] = m.b;
+		bufferData[2] = 0;
+		bufferData[3] = 0;
+		bufferData[4] = m.c;
+		bufferData[5] = m.d;
+		bufferData[6] = 0;
+		bufferData[7] = 0;
+		bufferData[8] = m.e;
+		bufferData[9] = m.f;
+		bufferData[10] = 1;
+		bufferData[11] = 0;
+		bufferData[12] = opacity;
+		bufferData[13] = surfaceWidth;
+		bufferData[14] = surfaceHeight;
+		bufferData[15] = customParam ?? 0;
+	}
+	destroy() {
+		this.stack = [new DOMMatrix()];
+	}
+};
 var SvgLoader = class {
 	cache = /* @__PURE__ */ new Map();
 	async load(src, width, height, isHeadless) {
@@ -26583,8 +26665,10 @@ var SvgLoader = class {
 };
 const svgLoader = new SvgLoader();
 async function drawSvgNode(ctx, pass, props) {
-	const resolvedWidth = Math.max(1, Math.ceil(props.dstRect.width));
-	const resolvedHeight = Math.max(1, Math.ceil(props.dstRect.height));
+	const m = ctx.renderer.getCurrentTransform();
+	const k = transformScale(props.matrix ? m.multiply(props.matrix) : m);
+	const resolvedWidth = Math.max(1, Math.ceil(props.dstRect.width * k));
+	const resolvedHeight = Math.max(1, Math.ceil(props.dstRect.height * k));
 	const cacheKey = `${props.src}-${resolvedWidth}-${resolvedHeight}`;
 	let tex = textureCache.acquire(cacheKey);
 	if (!tex) try {
@@ -27389,6 +27473,8 @@ fn sampleSlugCoverage(sampleUV: vec2<f32>, g: SlugGlyph, pixelsPerEm: vec2<f32>)
 // pixel footprint in glyph uv, |d/dx| + |d/dy| (fwidth): the caller takes it in
 // uniform control flow. On a turned or foreshortened glyph it is wider than one
 // pixel along an axis, so that axis gets the soft ramp a box filter gives.
+// A blur of blurAmount px averages coverage over a grid reaching 0.3 of it
+// each way, blurTaps taps per side past the centre.
 fn shadeSlugGlyph(
 	uv: vec2<f32>,
 	fw: vec2<f32>,
@@ -27397,6 +27483,7 @@ fn shadeSlugGlyph(
 	color: vec4<f32>,
 	opacity: f32,
 	blurAmount: f32,
+	blurTaps: f32,
 	chromaticShift: f32,
 	dissolveProgress: f32,
 ) -> vec4<f32> {
@@ -27429,14 +27516,15 @@ fn shadeSlugGlyph(
 
 	var slugAlpha = 0.0;
 	if (blurAmount > 0.01) {
-		let step = fw * blurAmount * 0.3;
-		for (var y_offset = -1.0; y_offset <= 1.0; y_offset = y_offset + 1.0) {
-			for (var x_offset = -1.0; x_offset <= 1.0; x_offset = x_offset + 1.0) {
+		let step = fw * blurAmount * 0.3 / blurTaps;
+		for (var y_offset = -blurTaps; y_offset <= blurTaps; y_offset = y_offset + 1.0) {
+			for (var x_offset = -blurTaps; x_offset <= blurTaps; x_offset = x_offset + 1.0) {
 				let offset = vec2<f32>(x_offset, y_offset) * step;
 				slugAlpha = slugAlpha + sampleSlugCoverage(uv + offset, g, pixelsPerEm);
 			}
 		}
-		slugAlpha = slugAlpha / 9.0;
+		let side = 2.0 * blurTaps + 1.0;
+		slugAlpha = slugAlpha / (side * side);
 	} else {
 		slugAlpha = sampleSlugCoverage(uv, g, pixelsPerEm);
 	}
@@ -27472,6 +27560,7 @@ struct VSOut {
 	@location(7) @interpolate(flat) chromaticShift : f32,
 	@location(8) @interpolate(flat) dissolveProgress : f32,
 	@location(9) @interpolate(flat) vfxParam : f32,
+	@location(10) @interpolate(flat) blurTaps : f32,
 };
 
 var<private> pos : array<vec2<f32>, 6> = array<vec2<f32>, 6>(
@@ -27505,7 +27594,11 @@ var<private> pos : array<vec2<f32>, 6> = array<vec2<f32>, 6>(
 	let transform2 = mat2x2<f32>(u.transformCol0.xy, u.transformCol1.xy);
 	let pixelsPerUnit = sqrt(max(abs(determinant(transform2)), 1e-8));
 	let halfSize = max(abs(aScaleBias.xy * scale_mult), vec2<f32>(1e-4));
-	let grow = vec2<f32>(1.0) + (1.0 / pixelsPerUnit) / halfSize;
+	// A blurred glyph keeps a unit around it however many pixels a unit
+	// spans: its blur spills that far at one pixel per unit.
+	let blurred = aExtraParams.x > 0.01;
+	let dilation = select(1.0, max(1.0, pixelsPerUnit), blurred) / pixelsPerUnit;
+	let grow = vec2<f32>(1.0) + dilation / halfSize;
 	let uv = vec2<f32>(
 		quad_pos.x * grow.x * 0.5 + 0.5,
 		1.0 - (quad_pos.y * grow.y * 0.5 + 0.5),
@@ -27539,7 +27632,11 @@ var<private> pos : array<vec2<f32>, 6> = array<vec2<f32>, 6>(
 	out.bandMax = vec2<u32>(aBandMaxTexCoords.xy);
 	out.bandsTexCoords = vec2<u32>(aBandMaxTexCoords.zw);
 	out.color = aColor;
-	out.blurAmount = aExtraParams.x;
+	// Blur is in local units, like every other length here; the fragment
+	// stage spreads its taps in pixels, as far apart as at one pixel per
+	// unit (more of them as a unit spans more pixels, up to 4).
+	out.blurAmount = aExtraParams.x * pixelsPerUnit;
+	out.blurTaps = clamp(ceil(pixelsPerUnit - 1e-3), 1.0, 4.0);
 	out.chromaticShift = aExtraParams.y;
 	out.dissolveProgress = aExtraParams.z;
 	out.vfxParam = aExtraParams.w;
@@ -27558,6 +27655,7 @@ var<private> pos : array<vec2<f32>, 6> = array<vec2<f32>, 6>(
 		in.color,
 		u.params.x,
 		in.blurAmount,
+		in.blurTaps,
 		in.chromaticShift,
 		in.dissolveProgress,
 	);
@@ -29610,42 +29708,6 @@ var SolidPipeline = class {
 		this.uniformBindGroupCache.destroy();
 	}
 };
-var TransformStack = class {
-	stack = [new DOMMatrix()];
-	push(matrix) {
-		const next = this.stack[this.stack.length - 1].multiply(matrix);
-		this.stack.push(next);
-	}
-	pop() {
-		if (this.stack.length > 1) this.stack.pop();
-	}
-	getCurrent() {
-		return this.stack[this.stack.length - 1];
-	}
-	packIntoBuffer(bufferData, opacity, surfaceWidth, surfaceHeight, localOverride, customParam) {
-		let m = this.getCurrent();
-		if (localOverride) m = m.multiply(localOverride);
-		bufferData[0] = m.a;
-		bufferData[1] = m.b;
-		bufferData[2] = 0;
-		bufferData[3] = 0;
-		bufferData[4] = m.c;
-		bufferData[5] = m.d;
-		bufferData[6] = 0;
-		bufferData[7] = 0;
-		bufferData[8] = m.e;
-		bufferData[9] = m.f;
-		bufferData[10] = 1;
-		bufferData[11] = 0;
-		bufferData[12] = opacity;
-		bufferData[13] = surfaceWidth;
-		bufferData[14] = surfaceHeight;
-		bufferData[15] = customParam ?? 0;
-	}
-	destroy() {
-		this.stack = [new DOMMatrix()];
-	}
-};
 function premultiplyClearColor(color) {
 	if (Array.isArray(color)) {
 		const a$1 = color[3] ?? 1;
@@ -29796,10 +29858,14 @@ var Renderer2D = class {
 				this.drawShapeFill(pass, tris, fill, bounds, opts);
 				if ((!stroke || !stroke.width || stroke.width <= 0) && (fill.type ?? "solid") === "solid" && fill.color) {
 					const svgPath = buildShapeSvgPath(config$1);
-					if (svgPath) this.drawPath(pass, svgPath, fill.color, 1, {
-						...opts,
-						strokeLineCap: "round"
-					});
+					if (svgPath) {
+						const m = this.transformStack.getCurrent();
+						const hairline = 1 / transformScale(opts?.transform ? m.multiply(opts.transform) : m);
+						this.drawPath(pass, svgPath, fill.color, hairline, {
+							...opts,
+							strokeLineCap: "round"
+						});
+					}
 				}
 			}
 		}
@@ -32848,6 +32914,9 @@ fn fs_mrt_bloom(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtBl
 */
 const quad3dWgsl = `
 ${lighting3dWgsl}
+// Grid cells either side a relief's normals span.
+const RELIEF_NORMAL_CELLS : f32 = 4.0;
+
 struct ModelUniforms {
     modelMatrix    : mat4x4<f32>,
     normalMatrix   : mat4x4<f32>,
@@ -32858,11 +32927,15 @@ struct ModelUniforms {
     materialParams : vec4<f32>, // x = shininess, y = specularIntensity, z = ambientIntensity, w = materialMode (0=unlit, 1=lit)
     pbr            : vec4<f32>, // x = roughness (<0 = default), y = metallic
     emissive       : vec4<f32>, // rgb = sRGB emissive color, w = strength
+    relief         : vec4<f32>, // x = amount (px), y = on, w = grid cells per side
+    reliefRect     : vec4<f32>, // xy = where the layer's box starts in reliefTex (0..1), zw = its size
+    reliefEye      : vec4<f32>, // xyz = the eye the surface keeps its look from (the default camera)
 };
 
 @group(0) @binding(0) var<uniform> cam    : CameraUniforms;
 @group(1) @binding(0) var<uniform> model  : ModelUniforms;
-${matte3dWgsl(1, 1)}@group(2) @binding(0) var texSampler      : sampler;
+${matte3dWgsl(1, 1)}@group(1) @binding(2) var reliefTex : texture_2d<f32>;
+@group(2) @binding(0) var texSampler      : sampler;
 @group(2) @binding(1) var mainTex         : texture_2d<f32>;
 ${lightsBindingsWgsl}
 
@@ -32881,13 +32954,48 @@ struct VertexOutput {
     @location(4)       localPos    : vec2<f32>,
 };
 
+// Relief: the layer's plane pushed toward the eye by the brightness of a
+// second picture, so a flat quad becomes a surface (see DrawQuad3DOpts.relief).
+fn reliefAt(uv: vec2<f32>) -> f32 {
+    let dims = vec2<f32>(textureDimensions(reliefTex));
+    let p = (model.reliefRect.xy + clamp(uv, vec2<f32>(0.0), vec2<f32>(1.0)) * model.reliefRect.zw) * dims - 0.5;
+    let i = floor(p);
+    let f = p - i;
+    // Texels of the layer's own box only: past its edge the relief was never drawn.
+    let lo = max(floor(model.reliefRect.xy * dims), vec2<f32>(0.0));
+    let hi = min(ceil((model.reliefRect.xy + model.reliefRect.zw) * dims) - 1.0, dims - 1.0);
+    let a = textureLoad(reliefTex, vec2<i32>(clamp(i, lo, hi)), 0).rgb;
+    let b = textureLoad(reliefTex, vec2<i32>(clamp(i + vec2<f32>(1.0, 0.0), lo, hi)), 0).rgb;
+    let c = textureLoad(reliefTex, vec2<i32>(clamp(i + vec2<f32>(0.0, 1.0), lo, hi)), 0).rgb;
+    let d = textureLoad(reliefTex, vec2<i32>(clamp(i + vec2<f32>(1.0, 1.0), lo, hi)), 0).rgb;
+    let rgb = mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+    return dot(rgb, vec3<f32>(0.2126, 0.7152, 0.0722));
+}
+
+// The plane's front: the side the default camera sees.
+fn reliefFront() -> vec3<f32> {
+    return normalize((model.normalMatrix * vec4<f32>(0.0, 0.0, -1.0, 0.0)).xyz);
+}
+
+// A point of the plane lifted by its relief along the ray to the eye, so from
+// the eye it lands on the same pixel as the flat picture.
+fn reliefPoint(local: vec2<f32>, uv: vec2<f32>) -> vec3<f32> {
+    let flat = (model.modelMatrix * vec4<f32>(local, 0.0, 1.0)).xyz;
+    let n = reliefFront();
+    let h = model.relief.x * reliefAt(uv);
+    let toEye = model.reliefEye.xyz - flat;
+    let along = dot(toEye, n);
+    return select(flat + n * h, flat + toEye * (h / along), along > 1.0);
+}
+
 @vertex
 fn vs_main(in: VertexInput) -> VertexOutput {
     var out: VertexOutput;
     
     let hasDimensions = model.dimensions.x > 0.0 && model.dimensions.y > 0.0;
+    let hasRelief = model.relief.y > 0.5;
     var pad = 0.0;
-    if (hasDimensions) {
+    if (hasDimensions && !hasRelief) {
         let viewPos = cam.viewMatrix * model.modelMatrix * vec4<f32>(0.0, 0.0, 0.0, 1.0);
         let viewDepth = max(abs(viewPos.z), 0.1);
         let projScale = max(cam.projMatrix[1][1], 0.001);
@@ -32897,12 +33005,28 @@ fn vs_main(in: VertexInput) -> VertexOutput {
     let scalePad = select(vec2<f32>(1.0), 1.0 + vec2<f32>(2.0 * pad) / model.dimensions.xy, hasDimensions);
     
     let paddedPos = vec3<f32>(in.position.xy * scalePad, in.position.z);
-    let worldPos4 = model.modelMatrix * vec4<f32>(paddedPos, 1.0);
-    out.worldPos = worldPos4.xyz;
+    var worldPos4 = model.modelMatrix * vec4<f32>(paddedPos, 1.0);
     
     // Normal transformed by 3x3 normal matrix
     let norm4 = model.normalMatrix * vec4<f32>(in.normal, 0.0);
     out.worldNormal = normalize(norm4.xyz);
+    if (hasRelief) {
+        let p = reliefPoint(in.position.xy, in.uv);
+        // Central differences a few cells wide: an 8-bit height map steps every
+        // level, and normals from adjacent cells would light those steps as rings.
+        let e = RELIEF_NORMAL_CELLS / max(model.relief.w, 1.0);
+        let dx = vec2<f32>(e, 0.0);
+        let dy = vec2<f32>(0.0, e);
+        let tx = reliefPoint(in.position.xy + dx, in.uv + dx) - reliefPoint(in.position.xy - dx, in.uv - dx);
+        let ty = reliefPoint(in.position.xy + dy, in.uv + dy) - reliefPoint(in.position.xy - dy, in.uv - dy);
+        var nrm = normalize(cross(tx, ty));
+        if (dot(nrm, reliefFront()) < 0.0) {
+            nrm = -nrm;
+        }
+        worldPos4 = vec4<f32>(p, 1.0);
+        out.worldNormal = nrm;
+    }
+    out.worldPos = worldPos4.xyz;
     
     out.clipPos = cam.viewProjMatrix * worldPos4;
     
@@ -33138,6 +33262,10 @@ function createLightsLayout(device, label = "Lights3DLayout") {
 		]
 	});
 }
+/** Grid cells per side of a relief surface. */
+const RELIEF_GRID = 512;
+/** Floats in the quad's model uniform: transform, colors, params, material, surface, then relief. */
+const MODEL_FLOATS = 52 + SURFACE_PARAMS_FLOATS + 12;
 /** [shininess, specularIntensity, ambientIntensity, materialMode] as the 3D shaders' lighting reads them. */
 function packMaterialParams(data) {
 	return [
@@ -33161,10 +33289,12 @@ var Quad3DPipeline = class {
 	modelPool;
 	vertexBuffer;
 	indexBuffer;
-	modelData = new Float32Array(52 + SURFACE_PARAMS_FLOATS);
+	/** The relief grid, built on first use. */
+	reliefGrid;
+	modelData = new Float32Array(MODEL_FLOATS);
 	constructor(device, format, depthFormat = "depth24plus", sampleCount = 1) {
 		this.device = device;
-		this.modelPool = new BufferPool((52 + SURFACE_PARAMS_FLOATS) * 4, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
+		this.modelPool = new BufferPool(MODEL_FLOATS * 4, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
 		const module$1 = device.createShaderModule({
 			label: "quad3d.wgsl",
 			code: quad3dWgsl
@@ -33179,11 +33309,19 @@ var Quad3DPipeline = class {
 		});
 		this.modelLayout = device.createBindGroupLayout({
 			label: "Quad3DModelLayout",
-			entries: [{
-				binding: 0,
-				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: { type: "uniform" }
-			}, matteLayoutEntry(1)]
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+					buffer: { type: "uniform" }
+				},
+				matteLayoutEntry(1),
+				{
+					binding: 2,
+					visibility: GPUShaderStage.VERTEX,
+					texture: { sampleType: "float" }
+				}
+			]
 		});
 		this.textureLayout = device.createBindGroupLayout({
 			label: "Quad3DTextureLayout",
@@ -33350,18 +33488,110 @@ var Quad3DPipeline = class {
 		this.modelData[47] = data.textureExtent?.[1] ?? 0;
 		this.modelData.set(packMaterialParams(data), 48);
 		packSurfaceParams(data, this.modelData, 52);
+		const relief = data.relief;
+		const r = 52 + SURFACE_PARAMS_FLOATS;
+		this.modelData.set(relief ? [
+			relief.amount,
+			1,
+			0,
+			RELIEF_GRID
+		] : [
+			0,
+			0,
+			0,
+			0
+		], r);
+		this.modelData.set(relief?.uvRect ?? [
+			0,
+			0,
+			1,
+			1
+		], r + 4);
+		this.modelData.set([...relief?.eye ?? [
+			0,
+			0,
+			0
+		], 0], r + 8);
 		const modelBuffer = this.modelPool.getBuffer(this.device, this.modelData);
 		return this.device.createBindGroup({
 			layout: this.modelLayout,
-			entries: [{
-				binding: 0,
-				resource: { buffer: modelBuffer }
-			}, {
-				binding: 1,
-				resource: data.matte?.createView() ?? fullCoverageView(this.device)
-			}]
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: modelBuffer }
+				},
+				{
+					binding: 1,
+					resource: data.matte?.createView() ?? fullCoverageView(this.device)
+				},
+				{
+					binding: 2,
+					resource: data.relief?.texture.createView() ?? fullCoverageView(this.device)
+				}
+			]
 		});
 	}
+	/** Binds the geometry for `data` and draws it: the quad, or the relief grid. */
+	drawGeometry(pass, data) {
+		if (!data.relief) {
+			pass.setVertexBuffer(0, this.vertexBuffer);
+			pass.setIndexBuffer(this.indexBuffer, "uint16");
+			pass.drawIndexed(6);
+			return;
+		}
+		this.reliefGrid ??= this.createReliefGrid();
+		pass.setVertexBuffer(0, this.reliefGrid.vertices);
+		pass.setIndexBuffer(this.reliefGrid.indices, "uint32");
+		pass.drawIndexed(this.reliefGrid.count);
+	}
+	/** A RELIEF_GRID² grid over the unit quad, laid out like the quad's vertices. */
+	createReliefGrid() {
+		const side = RELIEF_GRID + 1;
+		const vertices = new Float32Array(side * side * 8);
+		for (let j = 0; j < side; j++) for (let i = 0; i < side; i++) {
+			const u = i / RELIEF_GRID;
+			const v = j / RELIEF_GRID;
+			vertices.set([
+				u - .5,
+				v - .5,
+				0,
+				u,
+				v,
+				0,
+				0,
+				-1
+			], (j * side + i) * 8);
+		}
+		const indices = new Uint32Array(RELIEF_GRID * RELIEF_GRID * 6);
+		let k = 0;
+		for (let j = 0; j < RELIEF_GRID; j++) for (let i = 0; i < RELIEF_GRID; i++) {
+			const a = j * side + i;
+			indices.set([
+				a,
+				a + 1,
+				a + side + 1,
+				a,
+				a + side + 1,
+				a + side
+			], k);
+			k += 6;
+		}
+		const upload = (data, usage) => {
+			const buffer = this.device.createBuffer({
+				size: data.byteLength,
+				usage: usage | GPUBufferUsage.COPY_DST,
+				mappedAtCreation: true
+			});
+			new data.constructor(buffer.getMappedRange()).set(data);
+			buffer.unmap();
+			return buffer;
+		};
+		return {
+			vertices: upload(vertices, GPUBufferUsage.VERTEX),
+			indices: upload(indices, GPUBufferUsage.INDEX),
+			count: indices.length
+		};
+	}
 	textureBindGroup(texture, sampler) {
 		return this.device.createBindGroup({
 			layout: this.textureLayout,
@@ -33382,9 +33612,7 @@ var Quad3DPipeline = class {
 		pass.setBindGroup(1, modelBindGroup);
 		pass.setBindGroup(2, textureBindGroup);
 		pass.setBindGroup(3, lightsBindGroup);
-		pass.setVertexBuffer(0, this.vertexBuffer);
-		pass.setIndexBuffer(this.indexBuffer, "uint16");
-		pass.drawIndexed(6);
+		this.drawGeometry(pass, data);
 	}
 	/** Draws the quad into a shadow map (`lightCameraBindGroup` holds the light's view-projection). */
 	drawShadow(pass, lightCameraBindGroup, texture, sampler, data) {
@@ -33392,14 +33620,14 @@ var Quad3DPipeline = class {
 		pass.setBindGroup(0, lightCameraBindGroup);
 		pass.setBindGroup(1, this.packModel(data));
 		pass.setBindGroup(2, this.textureBindGroup(texture, sampler));
-		pass.setVertexBuffer(0, this.vertexBuffer);
-		pass.setIndexBuffer(this.indexBuffer, "uint16");
-		pass.drawIndexed(6);
+		this.drawGeometry(pass, data);
 	}
 	destroy() {
 		this.modelPool.destroy();
 		this.vertexBuffer.destroy();
 		this.indexBuffer.destroy();
+		this.reliefGrid?.vertices.destroy();
+		this.reliefGrid?.indices.destroy();
 	}
 };
 var Mesh3DPipeline = class {
@@ -38047,6 +38275,7 @@ fn shadeText(in : VSOut, fw : vec2<f32>) -> TextFragment {
 		in.color,
 		model.params.x,
 		in.fx.x,
+		1.0,
 		in.fx.y,
 		in.fx.z,
 	);
@@ -39634,7 +39863,8 @@ var Renderer3D = class {
 				height: c.opts.height,
 				textureExtent: c.opts.textureExtent,
 				opacity: c.opts.opacity,
-				colorTint: c.opts.colorTint
+				colorTint: c.opts.colorTint,
+				relief: c.opts.relief
 			});
 		}
 		pass.end();
@@ -39898,7 +40128,8 @@ var Renderer3D = class {
 			metallic,
 			emissive: opts.emissive,
 			emissiveIntensity: opts.emissiveIntensity,
-			matte: opts.matte
+			matte: opts.matte,
+			relief: opts.relief
 		}, useMrt, this.passWritesHdr);
 	}
 	/** T(pos) * Rz * Ry * Rx * S, or the draw's precomputed model matrix. */
@@ -41377,5 +41608,5 @@ var NodeSurfaceProvider = class {
 if (typeof globalThis !== "undefined") globalThis.__GATEWAI_DELAYS__ = globalThis.__GATEWAI_DELAYS__ || /* @__PURE__ */ new Set();
 
 //#endregion
-export { probeVideoSize as $, TextCursorStyleSchema as $t, emojiGraphemes as A, evaluateVolumetricFormation as An, ChromaticGlitchConfigSchema as At, jointMatrices as B, waveToCubicBeziers as Bn, LongShadowConfigSchema as Bt, drawGifNode as C, evaluateCubicBezierDerivative as Cn, AdvancedTextAnimatorBuilder as Ct, drawSignalNode as D, evaluateSkewMatrix as Dn, AnimatableGlyphPropsSchema as Dt, drawParagraphNode as E, evaluateSelectorCombination as En, AnchorPresetSchema as Et, getPrimitiveGeometry as F, parseSvgPathToCubicBeziers as Fn, ExtendedGlyphPropertiesSchema as Ft, measureMaxCaptionHeight as G, SelectorUnitsSchema as Gt, loadModel3D as H, SelectorBasedOnSchema as Ht, getRegisteredFontSource as I, sampleAudioSpectrumScale as In, GlyphAnchorGroupingSchema as It, parseFBX as J, Spatial3DPropertiesSchema as Jt, mediaDecoderCache as K, SignalRegistry as Kt, getRenderer2D as L, sampleCurveGeometry as Ln, GlyphAnchorPointSchema as Lt, fitSpansToText as M, generatePathSegments as Mn, DynamicStrokePropertiesSchema as Mt, generateExtrudedTextGeometry as N, getScramblePool as Nn, EnhancedTextNodeSchema as Nt, drawSvgNode as O, evaluateSpringProgress as On, AudioSignalComputePipeline as Ot, getHeadlessFontPath as P, getShuffledOrder as Pn, ExpressionSelectorSchema as Pt, poseNodes as Q, TextCursorConfigSchema as Qt, initHeadlessWebGPU as R, samplePathChainGeometry as Rn, KineticMarqueeConfigSchema as Rt, drawCaptionNode as S, evaluateCubicBezier as Sn, AETextAnimatorSchema as St, drawLottieNode as T, evaluateMarqueeOffset as Tn, AnchorGroupingSchema as Tt, loadOBJ as U, SelectorModeSchema as Ut, loadFBX as V, ParticleDissolveConfigSchema as Vt, lutStore as W, SelectorShapeSchema as Wt, parseOBJ as X, TextAnchorConfigSchema as Xt, parseMTL as Y, SpringPhysicsSchema as Yt, parseSvgPathToSegments as Z, TextAnimatorBuilder as Zt, buildShapeSvgPath as _, computeLineLeadingDisplacement as _n, Path3D as _t, GlassPipeline as a, TextSelectorSchema as an, spansText as at, colorMatrixWgsl as b, distanceToCurveParameter as bn, parseColorToRgb as bt, Renderer2D as c, TypewriterAnimatorSchema as cn, trackAudioPitch as ct, ScreenSpaceRelightPipeline as d, Vec2Schema as dn, Camera3D as dt, TextPathBuilder as en, registerHeadlessFont as et, ShadowPipeline as f, VolumetricFormationConfigSchema as fn, ENVIRONMENT_PRESETS as ft, WebGPUAudioProcessor as g, computeAnchorPivotOffset as gn, Matrix4Math as gt, SlugPipeline as h, buildWGSLSignalFn as hn, MAX_LIGHTS as ht, EffectPipeline as i, TextScrambleConfigSchema as in, shaderStore as it, ensureDevice as j, generateArcLengthLUT as jn, CubicBezierSegmentSchema as jt, drawVideoNode as k, evaluateTypewriterState as kn, AudioSpectrumTypographySchema as kt, Renderer3D as l, TypingCadenceSchema as ln, GetFontAssetUrl as lt, SlugGeometry as m, buildPathLUT as mn, Light3D as mt, AudioLatentTrackCache as n, TextPathSourceSchema as nn, sampleMorphWeights as nt, MotionBlurPipeline as o, TextSignalSelectorSchema as on, srtLoader as ot, SlugFontCache as p, VolumetricFormationModeSchema as pn, LIGHT_UNIFORM_SIZE_BYTES as pt, parseColor as q, SkewPropertiesSchema as qt, AudioMeshDeformPipeline as r, TextRangeSelectorSchema as rn, setRegisteredFontSource as rt, NodeSurfaceProvider as s, TextWigglySelectorSchema as sn, textureCache as st, AudioLatentEngine as t, TextPathOptionsSchema as tn, resolveTextSpans as tt, SSAOPipeline as u, VariableFontAxesSchema as un, resolveMediaSourceUrl as ut, clearAllVideoCache as v, computeRangeSelectorWeight as vn, Vector3Math as vt, drawImageNode as w, evaluateExpressionSelector as wn, AdvancedTextAnimatorSchema as wt, describeGpu as x, ellipseToCubicBeziers as xn, resolveEnvironment as xt, clearHeadlessFonts as y, deterministicWigglyNoise as yn, linearRgb as yt, inputStore as z, signalRegistry as zn, LineSpacingDynamicsSchema as zt };
-//# sourceMappingURL=dist-CWLLnigL.mjs.map
+export { probeVideoSize as $, TextAnimatorBuilder as $t, emojiGraphemes as A, evaluateSpringProgress as An, AudioSignalComputePipeline as At, jointMatrices as B, samplePathChainGeometry as Bn, KineticMarqueeConfigSchema as Bt, drawGifNode as C, ellipseToCubicBeziers as Cn, resolveEnvironment as Ct, drawSignalNode as D, evaluateMarqueeOffset as Dn, AnchorGroupingSchema as Dt, drawParagraphNode as E, evaluateExpressionSelector as En, AdvancedTextAnimatorSchema as Et, getPrimitiveGeometry as F, getScramblePool as Fn, EnhancedTextNodeSchema as Ft, measureMaxCaptionHeight as G, SelectorModeSchema as Gt, loadModel3D as H, waveToCubicBeziers as Hn, LongShadowConfigSchema as Ht, getRegisteredFontSource as I, getShuffledOrder as In, ExpressionSelectorSchema as It, parseFBX as J, SignalRegistry as Jt, mediaDecoderCache as K, SelectorShapeSchema as Kt, getRenderer2D as L, parseSvgPathToCubicBeziers as Ln, ExtendedGlyphPropertiesSchema as Lt, fitSpansToText as M, evaluateVolumetricFormation as Mn, ChromaticGlitchConfigSchema as Mt, generateExtrudedTextGeometry as N, generateArcLengthLUT as Nn, CubicBezierSegmentSchema as Nt, drawSvgNode as O, evaluateSelectorCombination as On, AnchorPresetSchema as Ot, getHeadlessFontPath as P, generatePathSegments as Pn, DynamicStrokePropertiesSchema as Pt, poseNodes as Q, TextAnchorConfigSchema as Qt, initHeadlessWebGPU as R, sampleAudioSpectrumScale as Rn, GlyphAnchorGroupingSchema as Rt, drawCaptionNode as S, distanceToCurveParameter as Sn, parseColorToRgb as St, drawLottieNode as T, evaluateCubicBezierDerivative as Tn, AdvancedTextAnimatorBuilder as Tt, loadOBJ as U, ParticleDissolveConfigSchema as Ut, loadFBX as V, signalRegistry as Vn, LineSpacingDynamicsSchema as Vt, lutStore as W, SelectorBasedOnSchema as Wt, parseOBJ as X, Spatial3DPropertiesSchema as Xt, parseMTL as Y, SkewPropertiesSchema as Yt, parseSvgPathToSegments as Z, SpringPhysicsSchema as Zt, buildShapeSvgPath as _, buildWGSLSignalFn as _n, MAX_LIGHTS as _t, GlassPipeline as a, TextRangeSelectorSchema as an, shaderStore as at, colorMatrixWgsl as b, computeRangeSelectorWeight as bn, Vector3Math as bt, Renderer2D as c, TextSignalSelectorSchema as cn, textureCache as ct, ScreenSpaceRelightPipeline as d, TypingCadenceSchema as dn, GetFontAssetUrl as dt, TextCursorConfigSchema as en, registerHeadlessFont as et, ShadowPipeline as f, VariableFontAxesSchema as fn, resolveMediaSourceUrl as ft, WebGPUAudioProcessor as g, buildPathLUT as gn, Light3D as gt, SlugPipeline as h, VolumetricFormationModeSchema as hn, LIGHT_UNIFORM_SIZE_BYTES as ht, EffectPipeline as i, TextPathSourceSchema as in, setRegisteredFontSource as it, ensureDevice as j, evaluateTypewriterState as jn, AudioSpectrumTypographySchema as jt, drawVideoNode as k, evaluateSkewMatrix as kn, AnimatableGlyphPropsSchema as kt, Renderer3D as l, TextWigglySelectorSchema as ln, trackAudioPitch as lt, SlugGeometry as m, VolumetricFormationConfigSchema as mn, ENVIRONMENT_PRESETS as mt, AudioLatentTrackCache as n, TextPathBuilder as nn, resolveTextSpans as nt, MotionBlurPipeline as o, TextScrambleConfigSchema as on, spansText as ot, SlugFontCache as p, Vec2Schema as pn, Camera3D as pt, parseColor as q, SelectorUnitsSchema as qt, AudioMeshDeformPipeline as r, TextPathOptionsSchema as rn, sampleMorphWeights as rt, NodeSurfaceProvider as s, TextSelectorSchema as sn, srtLoader as st, AudioLatentEngine as t, TextCursorStyleSchema as tn, resolveInputUrl as tt, SSAOPipeline as u, TypewriterAnimatorSchema as un, transformScale as ut, clearAllVideoCache as v, computeAnchorPivotOffset as vn, Matrix4Math as vt, drawImageNode as w, evaluateCubicBezier as wn, AETextAnimatorSchema as wt, describeGpu as x, deterministicWigglyNoise as xn, linearRgb as xt, clearHeadlessFonts as y, computeLineLeadingDisplacement as yn, Path3D as yt, inputStore as z, sampleCurveGeometry as zn, GlyphAnchorPointSchema as zt };
+//# sourceMappingURL=dist-D3BeAZ7X.mjs.map