framefields 2.13.1 → 2.14.0

package/dist/{dist-DtPPPsZV.mjs → dist--Uu5bQ_6.mjs}

@@ -16151,9 +16151,9 @@ var ShaderStore = class {
 	getCacheKey(nodeId, renderId) {
 		return `${renderId ?? "global"}:${nodeId}`;
 	}
-	register(nodeId, shader, renderId) {
-		this.store.set(this.getCacheKey(nodeId, renderId), shader);
-		if (renderId) this.store.set(this.getCacheKey(nodeId, void 0), shader);
+	register(nodeId, shader$1, renderId) {
+		this.store.set(this.getCacheKey(nodeId, renderId), shader$1);
+		if (renderId) this.store.set(this.getCacheKey(nodeId, void 0), shader$1);
 	}
 	get(nodeId, renderId) {
 		const res = this.store.get(this.getCacheKey(nodeId, renderId));
@@ -24530,9 +24530,11 @@ function drawParagraphNode(ctx, pass, props) {
 				scale = effect.scale;
 				if (blurOverride === void 0) blurAmount = effect.blurAmount;
 			}
+			const isHighlighted = props.highlightWordIndex !== void 0 && glyph.wordIndex === props.highlightWordIndex;
+			const spanColor = glyph.fill ? parseColor(glyph.fill) : void 0;
+			let fillColor = isHighlighted ? highlightColor : spanColor ?? baseColor;
 			let customScaleX = 1;
 			let customScaleY = 1;
-			let animatorColor;
 			let transZ = 0;
 			let chromaticShift = 0;
 			let dissolveProgress = 0;
@@ -24551,7 +24553,7 @@ function drawParagraphNode(ctx, pass, props) {
 					scaleY: customScaleY,
 					opacity,
 					blurAmount,
-					color: baseColor
+					color: fillColor
 				}, false, props.frame ?? 0, props.fps ?? 24, props.signals);
 				transX = kResult.transX;
 				transY = kResult.transY;
@@ -24561,7 +24563,7 @@ function drawParagraphNode(ctx, pass, props) {
 				customScaleY = kResult.scaleY;
 				opacity = kResult.opacity;
 				if (blurOverride === void 0) blurAmount = kResult.blurAmount;
-				if (kResult.color) animatorColor = kResult.color;
+				if (kResult.color) fillColor = kResult.color;
 				if (kResult.lineSpacing !== void 0) transY += computeLineLeadingDisplacement(glyph.lineIndex, layout.linesCount, kResult.lineSpacing, kResult.lineAnchor ?? 0);
 				transZ = kResult.transZ ?? 0;
 				chromaticShift = kResult.chromaticShift ?? 0;
@@ -24579,9 +24581,7 @@ function drawParagraphNode(ctx, pass, props) {
 				const contentWidth = layout.glyphs.length > 0 ? layout.glyphs[layout.glyphs.length - 1].x + fontSize : props.dstRect.width;
 				glyphX = evaluateMarqueeOffset(glyph.x, props.dstRect.width, contentWidth, props.marquee, elapsedSec);
 			}
-			const isHighlighted = props.highlightWordIndex !== void 0 && glyph.wordIndex === props.highlightWordIndex;
-			const spanColor = glyph.fill ? parseColor(glyph.fill) : void 0;
-			const col = animatorColor ?? colorOverride ?? (isHighlighted ? highlightColor : spanColor ?? baseColor);
+			const col = colorOverride ?? fillColor;
 			const writeInstance = (boldShift) => {
 				const offset = visibleCount * 24;
 				const fontScale = glyph.fontScale ?? fontSize / targetFont.unitsPerEm;
@@ -30983,8 +30983,13 @@ var BloomPipeline = class {
 	module;
 	pipelineLayout;
 	sampler;
-	mips = [];
-	mipKey = "";
+	/**
+	* Mip chains by size and depth. Scenes with different bloom share a frame
+	* (one command buffer), so a chain stays alive until the frame is done:
+	* chains not used in a frame are destroyed at the next `resetPools`.
+	*/
+	chains = /* @__PURE__ */ new Map();
+	usedThisFrame = /* @__PURE__ */ new Set();
 	placeholder;
 	uniformPool = new BufferPool(48, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
 	constructor(device) {
@@ -31087,17 +31092,18 @@ var BloomPipeline = class {
 		}
 		return pipe$1;
 	}
-	ensureMips(width, height, levels) {
+	mipChain(width, height, levels) {
 		const key = `${width}x${height}x${levels}`;
-		if (key === this.mipKey) return;
-		for (const t of this.mips) t.destroy();
-		this.mips = [];
+		this.usedThisFrame.add(key);
+		const cached$1 = this.chains.get(key);
+		if (cached$1) return cached$1;
+		const chain = [];
 		let w = width;
 		let h = height;
 		for (let i = 0; i < levels; i++) {
 			w = Math.max(1, Math.floor(w / 2));
 			h = Math.max(1, Math.floor(h / 2));
-			this.mips.push(this.device.createTexture({
+			chain.push(this.device.createTexture({
 				label: `BloomMip${i}`,
 				size: {
 					width: w,
@@ -31108,7 +31114,8 @@ var BloomPipeline = class {
 			}));
 			if (w === 1 && h === 1) break;
 		}
-		this.mipKey = key;
+		this.chains.set(key, chain);
+		return chain;
 	}
 	uniforms(texelW, texelH, opts) {
 		const data = new Float32Array([
@@ -31186,8 +31193,7 @@ var BloomPipeline = class {
 			mode: display ? 1 : 0
 		};
 		const levels = Math.max(1, Math.min(8, Math.round(options.radius ?? 6)));
-		this.ensureMips(source.width, source.height, levels);
-		const mips = this.mips;
+		const mips = this.mipChain(source.width, source.height, levels);
 		const u = (w, h) => this.uniforms(1 / w, 1 / h, opts);
 		const glowSource = hdrSource ?? source;
 		this.pass(encoder, this.prefilterPipe, mips[0].createView(), glowSource, this.placeholder, u(glowSource.width, glowSource.height), "clear");
@@ -31201,12 +31207,22 @@ var BloomPipeline = class {
 		}
 		this.pass(encoder, this.compositePipe(dest.format), dest.createView(), mips[0], source, u(mips[0].width, mips[0].height), "clear");
 	}
-	/** Call once per frame before `apply`: recycles the per-pass uniforms. */
+	/**
+	* Call once per frame before `apply`: recycles the per-pass uniforms and
+	* frees the mip chains the last frame did not use.
+	*/
 	resetPools() {
 		this.uniformPool.reset();
+		for (const [key, chain] of this.chains) {
+			if (this.usedThisFrame.has(key)) continue;
+			for (const t of chain) t.destroy();
+			this.chains.delete(key);
+		}
+		this.usedThisFrame.clear();
 	}
 	destroy() {
-		for (const t of this.mips) t.destroy();
+		for (const chain of this.chains.values()) for (const t of chain) t.destroy();
+		this.chains.clear();
 		this.placeholder.destroy();
 		this.uniformPool.destroy();
 	}
@@ -31595,15 +31611,56 @@ struct Shaded {
     hdr : vec3<f32>,
 };
 
+// Two-sided, art-directed diffuse lighting. Shares the full direct-light
+// storage, range/spot attenuation and PCF shadows with the physical renderer.
+fn shadeToon(worldPos: vec3<f32>, worldNormal: vec3<f32>, base: vec3<f32>, ambient: f32, shade: vec4<f32>, lightTint: vec4<f32>, params: vec4<f32>) -> vec3<f32> {
+    if (lights.params.y < 0.5) { return base; }
+    var N = normalize(worldNormal);
+    let V = normalize(cam.cameraPos.xyz - worldPos);
+    if (dot(N, V) < 0.0) { N = -N; }
+    var illumination = lights.ambientColor.rgb * ambient * lightTint.rgb;
+    var visibility = clamp(max(illumination.r, max(illumination.g, illumination.b)), 0.0, 1.0);
+    for (var i = 0; i < i32(lights.params.x); i++) {
+        let ls = sampleLight(i, worldPos);
+        if (!ls.valid) { continue; }
+        let cosine = dot(N, ls.L);
+        let softness = max(params.x, 0.0001);
+        let band = smoothstep(lightTint.w - softness * 0.5, lightTint.w + softness * 0.5, cosine);
+        let light = directLights[i];
+        let strength = band * ls.attenuation * light.colorIntensity.w * shadowFactor(worldPos, N, i);
+        let contribution = light.colorIntensity.rgb * lightTint.rgb * strength * mix(1.0, max(cosine, 0.0), shade.w);
+        // Remove the shadow floor only as actual modeled light arrives.
+        // Using the pre-diffuse band here creates a dark ring between the
+        // shadow floor and the lit region, which slides as a surface turns.
+        let energy = max(contribution.r, max(contribution.g, contribution.b));
+        visibility = max(visibility, clamp(energy, 0.0, 1.0));
+        illumination += contribution;
+    }
+    return base * (shade.rgb * (1.0 - visibility) + illumination);
+}
+
+// The existing linear-depth attachment doubles as a geometry buffer:
+// r = optical depth, gb = octahedral world normal, a = outline participation.
+// Geometric normals deliberately ignore normal maps and texture seams.
+fn geometryPixel(depth: f32, normal: vec3<f32>, outlined: f32) -> vec4<f32> {
+    let n = normalize(normal);
+    let p = n.xy / max(abs(n.x) + abs(n.y) + abs(n.z), 1e-6);
+    let signs = select(vec2<f32>(-1.0), vec2<f32>(1.0), p >= vec2<f32>(0.0));
+    let oct = select((1.0 - abs(p.yx)) * signs, p, n.z >= 0.0);
+    return vec4<f32>(depth, oct * 0.5 + 0.5, outlined);
+}
+
 /// Shades a surface for the scene's mode.
 /// material: x shininess, y specularIntensity, z ambientIntensity, w mode (0 unlit).
 /// pbr: x roughness (<0 = default), y metallic, z/w unused.
 /// emissive: rgb sRGB color, w strength.
-fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3<f32>, material: vec4<f32>, pbr: vec4<f32>, emissive: vec4<f32>) -> Shaded {
+fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3<f32>, material: vec4<f32>, pbr: vec4<f32>, emissive: vec4<f32>, toonShadow: vec4<f32>, toonLight: vec4<f32>, toonParams: vec4<f32>) -> Shaded {
     var out: Shaded;
     if (lights.params.z < 0.5) {
         var c = baseColor;
-        if (material.w >= 0.5) {
+        if (material.w > 1.5) {
+            c = shadeToon(worldPos, worldNormal, baseColor, material.z, toonShadow, toonLight, toonParams);
+        } else if (material.w >= 0.5) {
             c = applyLighting3D(worldPos, worldNormal, baseColor, material);
         }
         c += emissive.rgb * emissive.w;
@@ -31614,6 +31671,8 @@ fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3
     var radiance: vec3<f32>;
     if (material.w < 0.5) {
         radiance = srgbToLinear(baseColor);
+    } else if (material.w > 1.5) {
+        radiance = srgbToLinear(shadeToon(worldPos, worldNormal, baseColor, material.z, toonShadow, toonLight, toonParams));
     } else {
         let rough = select(pbr.x, 0.5, pbr.x < 0.0);
         radiance = shadePhysical(worldPos, worldNormal, srgbToLinear(baseColor), rough, clamp(pbr.y, 0.0, 1.0), material.z);
@@ -31649,9 +31708,6 @@ fn shadeSurfaceFull(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3
     return out;
 }
 
-fn shadeSurface(worldPos: vec3<f32>, worldNormal: vec3<f32>, baseColor: vec3<f32>, material: vec4<f32>, pbr: vec4<f32>, emissive: vec4<f32>) -> vec3<f32> {
-    return shadeSurfaceFull(worldPos, worldNormal, baseColor, material, pbr, emissive).display;
-}
 `;
 /** Group-3 bindings every lit 3D shader declares. */
 const lightsBindingsWgsl = `
@@ -31962,7 +32018,7 @@ fn fs_mrt(in: VsOut) -> FsOutputMrt {
     var out: FsOutputMrt;
     let s = shadeFloor(in);
     out.color = vec4<f32>(s.display * s.alpha, s.alpha);
-    out.linearDepth = vec4<f32>(s.linearDepth, 0.0, 0.0, 1.0);
+    out.linearDepth = geometryPixel(s.linearDepth, vec3<f32>(0.0, -1.0, 0.0), 1.0);
     out.depth = s.depth;
     return out;
 }
@@ -31982,7 +32038,7 @@ fn fs_mrt_bloom(in: VsOut) -> FsOutputMrtBloom {
     var out: FsOutputMrtBloom;
     let s = shadeFloor(in);
     out.color = vec4<f32>(s.display * s.alpha, s.alpha);
-    out.linearDepth = vec4<f32>(s.linearDepth, 0.0, 0.0, 1.0);
+    out.linearDepth = geometryPixel(s.linearDepth, vec3<f32>(0.0, -1.0, 0.0), 1.0);
     out.hdr = vec4<f32>(s.hdr * s.alpha, 1.0);
     out.depth = s.depth;
     return out;
@@ -32702,6 +32758,9 @@ struct ModelUniforms {
     shade          : vec4<f32>, // rgb = toon shadow-side color multiplier, a = alpha cutoff (0 = none)
     pbr            : vec4<f32>, // x = roughness (<0 = default), y = metallic
     emissive       : vec4<f32>, // rgb = sRGB emissive color, w = strength
+    toonShadow     : vec4<f32>, // rgb shadow-side multiplier, w diffuse modelling
+    toonLight      : vec4<f32>, // rgb lit-side multiplier, w terminator threshold
+    toonParams     : vec4<f32>, // x terminator softness, y outline participation
     maps           : vec4<f32>, // x = normal scale (0 = no map), y = occlusion strength, z = has metallic-roughness map, w = has emissive map
 };
 
@@ -32842,37 +32901,6 @@ fn vs_main(
     return out;
 }
 
-// Toon (MToon-style): the base color as authored where the light reaches,
-// the shade color past a soft terminator. Highlights stay out: the texture
-// already paints them.
-fn toonLighting(in: VertexOutput, baseColor: vec3<f32>) -> vec3<f32> {
-    var N = normalize(in.worldNormal);
-    let V = normalize(cam.cameraPos.xyz - in.worldPos);
-    if (dot(N, V) < 0.0) {
-        N = -N;
-    }
-    var lit = 0.0;
-    let numLights = i32(lights.params.x);
-    for (var i = 0; i < 8; i++) {
-        if (i >= numLights) {
-            break;
-        }
-        let light = lights.lights[i];
-        let lightType = light.posType.w;
-        var L = vec3<f32>(0.0, 0.0, 1.0);
-        if (lightType > 0.5 && lightType < 1.5) {
-            L = normalize(-light.dirRadius.xyz);
-        } else if (lightType >= 1.5) {
-            L = normalize(light.posType.xyz - in.worldPos);
-        } else {
-            continue;
-        }
-        let terminator = smoothstep(-0.05, 0.2, dot(N, L));
-        lit = max(lit, terminator * min(light.colorIntensity.w, 1.0));
-    }
-    return baseColor * mix(model.shade.rgb, vec3<f32>(1.0), lit);
-}
-
 struct MeshFragment {
     color : vec4<f32>, // premultiplied display color
     hdr   : vec4<f32>, // premultiplied scene radiance (bloom source)
@@ -32940,7 +32968,7 @@ fn shadeGlass(in: VertexOutput, Nin: vec3<f32>, tint: vec3<f32>, alpha: f32, rim
     let transmitted = col * depthTint * (1.0 - 0.45 * rim * rim);
     let f0 = pow((ior - 1.0) / (ior + 1.0), 2.0);
     let F = f0 + (1.0 - f0) * pow(rim, 5.0);
-    let lit = shadeSurfaceFull(in.worldPos, N, vec3<f32>(0.0), model.materialParams, vec4<f32>(model.pbr.x, 0.0, 0.0, 0.0), vec4<f32>(0.0));
+    let lit = shadeSurfaceFull(in.worldPos, N, vec3<f32>(0.0), model.materialParams, vec4<f32>(model.pbr.x, 0.0, 0.0, 0.0), vec4<f32>(0.0), model.toonShadow, model.toonLight, model.toonParams);
     // Grazing faces mirror the room; keep that faint so dark scenes stay dark
     // and the studio highlights below carry the shape.
     let sheen = vec3<f32>(0.9, 0.94, 1.0) * F * 0.22 + tint * 0.05 * (0.4 + rim);
@@ -32988,19 +33016,6 @@ fn shadeMesh(in: VertexOutput, isFront: bool) -> MeshFragment {
 
     let baseRgb = texColor.rgb * in.color.rgb * model.colorTint.rgb;
     var out: MeshFragment;
-    if (model.materialParams.w > 1.5) {
-        var toon = baseRgb;
-        if (lights.params.y >= 0.5) {
-            toon = toonLighting(in, baseRgb);
-        }
-        if (model.params.w > 0.5 && (in.emissive.w > 0.0 || dot(in.emissive.rgb, in.emissive.rgb) > 0.0)) {
-            toon += in.emissive.rgb * in.emissive.w;
-        }
-        out.color = vec4<f32>(toon * alpha, alpha);
-        out.hdr = vec4<f32>(srgbToLinear(toon) * alpha, alpha);
-        return out;
-    }
-
     var N = normalize(in.worldNormal);
     if (model.maps.x > 0.0) {
         var tn = normalSample * 2.0 - 1.0;
@@ -33030,7 +33045,7 @@ fn shadeMesh(in: VertexOutput, isFront: bool) -> MeshFragment {
     if (model.params.w > 0.5 && (in.emissive.w > 0.0 || dot(in.emissive.rgb, in.emissive.rgb) > 0.0)) {
         emissive = in.emissive;
     }
-    let shaded = shadeSurfaceFull(in.worldPos, N, baseRgb, material, pbr, emissive);
+    let shaded = shadeSurfaceFull(in.worldPos, N, baseRgb, material, pbr, emissive, model.toonShadow, model.toonLight, model.toonParams);
     out.color = vec4<f32>(shaded.display * alpha, alpha);
     out.hdr = vec4<f32>(shaded.hdr * alpha, alpha);
     return out;
@@ -33061,7 +33076,7 @@ fn fs_single(in: VertexOutput, @builtin(front_facing) isFront: bool) -> @locatio
 fn fs_mrt(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtOutput {
     var out: MrtOutput;
     out.color = shadeMesh(in, isFront).color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     return out;
 }
 
@@ -33079,7 +33094,7 @@ fn fs_mrt_bloom(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtBl
     let f = shadeMesh(in, isFront);
     var out: MrtBloomOutput;
     out.color = f.color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     out.hdr = f.hdr;
     return out;
 }
@@ -33104,6 +33119,9 @@ 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
+    toonShadow     : vec4<f32>, // rgb shadow-side multiplier, w diffuse modelling
+    toonLight      : vec4<f32>, // rgb lit-side multiplier, w terminator threshold
+    toonParams     : vec4<f32>, // x terminator softness, y outline participation
     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)
@@ -33298,7 +33316,7 @@ fn shadeQuad(in: VertexOutput, isFront: bool) -> QuadFragment {
         discard;
     }
     
-    let shaded = shadeSurfaceFull(in.worldPos, in.worldNormal, baseRgb, model.materialParams, model.pbr, model.emissive);
+    let shaded = shadeSurfaceFull(in.worldPos, in.worldNormal, baseRgb, model.materialParams, model.pbr, model.emissive, model.toonShadow, model.toonLight, model.toonParams);
     var out: QuadFragment;
     out.color = vec4<f32>(shaded.display * alpha, alpha);
     out.hdr = vec4<f32>(shaded.hdr * alpha, alpha);
@@ -33330,7 +33348,7 @@ fn fs_single(in: VertexOutput, @builtin(front_facing) isFront: bool) -> @locatio
 fn fs_mrt(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtOutput {
     var out: MrtOutput;
     out.color = shadeQuad(in, isFront).color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     return out;
 }
 
@@ -33348,7 +33366,7 @@ fn fs_mrt_bloom(in: VertexOutput, @builtin(front_facing) isFront: bool) -> MrtBl
     let f = shadeQuad(in, isFront);
     var out: MrtBloomOutput;
     out.color = f.color;
-    out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+    out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
     out.hdr = f.hdr;
     return out;
 }
@@ -33374,13 +33392,37 @@ const SHADOW_DEPTH_STENCIL = {
 	depthBiasSlopeScale: 2.5,
 	depthBiasClamp: .01
 };
-/** Floats appended to each 3D model uniform block: pbr vec4 + emissive vec4. */
-const SURFACE_PARAMS_FLOATS = 8;
-function packSurfaceParams(data, out, offset) {
+/** Shared model uniforms: PBR, emissive, and three art-direction vec4s. */
+const SURFACE_PARAMS_FLOATS = 20;
+function packSurfaceParams(data, out, offset, modelShade) {
 	out[offset] = data.roughness ?? -1;
 	out[offset + 1] = data.metallic ?? 0;
 	out[offset + 2] = 0;
 	out[offset + 3] = 0;
+	const shadow = data.toon?.shadowColor ? parseColor(data.toon.shadowColor) : null;
+	out.set(shadow ? [
+		shadow.r,
+		shadow.g,
+		shadow.b
+	] : modelShade ?? [
+		.5,
+		.5,
+		.55
+	], offset + 8);
+	out[offset + 11] = data.toon?.diffuse ?? 0;
+	const light = parseColor(data.toon?.lightColor ?? "#ffffff");
+	out.set([
+		light.r,
+		light.g,
+		light.b,
+		data.toon?.threshold ?? .075
+	], offset + 12);
+	out.set([
+		data.toon?.softness ?? .25,
+		data.outline === false ? 0 : 1,
+		0,
+		0
+	], offset + 16);
 	const e = data.emissive;
 	if (e === void 0 || e === null) {
 		out.fill(0, offset + 4, offset + 8);
@@ -33449,7 +33491,7 @@ function packMaterialParams(data) {
 		data.roughness !== void 0 ? Math.max(1, (1 - data.roughness) * 128) : data.shininess ?? 32,
 		data.metallic !== void 0 ? data.metallic : data.specularIntensity ?? .5,
 		data.ambientIntensity ?? 1,
-		data.material === "unlit" ? 0 : 1
+		data.material === "unlit" ? 0 : data.material === "toon" ? 2 : 1
 	];
 }
 var Quad3DPipeline = class {
@@ -34179,12 +34221,13 @@ var Mesh3DPipeline = class {
 		this.modelData[45] = shade[1];
 		this.modelData[46] = shade[2];
 		this.modelData[47] = data.alphaCutoff ?? 0;
-		packSurfaceParams(data, this.modelData, 48);
+		packSurfaceParams(data, this.modelData, 48, data.shadeColor);
 		const maps = data.maps;
-		this.modelData[56] = maps?.normal ? maps.normalScale ?? 1 : 0;
-		this.modelData[57] = maps?.occlusion ? maps.occlusionStrength ?? 1 : 0;
-		this.modelData[58] = maps?.metallicRoughness ? 1 : 0;
-		this.modelData[59] = maps?.emissive ? 1 : 0;
+		const mapsOffset = 48 + SURFACE_PARAMS_FLOATS;
+		this.modelData[mapsOffset] = maps?.normal ? maps.normalScale ?? 1 : 0;
+		this.modelData[mapsOffset + 1] = maps?.occlusion ? maps.occlusionStrength ?? 1 : 0;
+		this.modelData[mapsOffset + 2] = maps?.metallicRoughness ? 1 : 0;
+		this.modelData[mapsOffset + 3] = maps?.emissive ? 1 : 0;
 		const glass = data.glass;
 		if (glass) {
 			this.modelData[44] = glass.dispersion;
@@ -37963,6 +38006,309 @@ fn fs_dof(in: VSOut) -> @location(0) vec4<f32> {
     return accumColor / totalWeight;
 }
 `;
+function outlineShader(sampleCount) {
+	const multisampled = sampleCount > 1;
+	const textureType = multisampled ? "texture_multisampled_2d<f32>" : "texture_2d<f32>";
+	return `
+struct Uniforms {
+    params : vec4<f32>, // width, cosine(crease angle), relative depth threshold, opacity
+    ink : vec4<f32>,
+    fog : vec4<f32>,
+    fogRange : vec4<f32>,
+    projection : vec4<f32>, // inverse projection x/y scale, far depth
+};
+@group(0) @binding(0) var<uniform> u : Uniforms;
+@group(0) @binding(1) var colorTex : ${textureType};
+@group(0) @binding(2) var geometryTex : ${textureType};
+
+@vertex fn vs(@builtin(vertex_index) i : u32) -> @builtin(position) vec4<f32> {
+    let p = vec2<f32>(f32((i << 1u) & 2u), f32(i & 2u));
+    return vec4<f32>(p * 2.0 - 1.0, 0.0, 1.0);
+}
+
+fn geometry(p : vec2<i32>, sample : i32) -> vec4<f32> {
+    let size = vec2<i32>(textureDimensions(geometryTex));
+    // Beyond the viewport is the same surface: never ink the canvas border.
+    return textureLoad(geometryTex, clamp(p, vec2<i32>(0), size - 1), sample);
+}
+
+fn normal(oct : vec2<f32>) -> vec3<f32> {
+    let p = oct * 2.0 - 1.0;
+    var n = vec3<f32>(p, 1.0 - abs(p.x) - abs(p.y));
+    let t = max(-n.z, 0.0);
+    n = vec3<f32>(n.xy + select(vec2<f32>(t), vec2<f32>(-t), n.xy >= vec2<f32>(0.0)), n.z);
+    return normalize(n);
+}
+
+fn srgbToLinear(c : vec3<f32>) -> vec3<f32> {
+    return select(pow((max(c, vec3<f32>(0.0)) + 0.055) / 1.055, vec3<f32>(2.4)), c / 12.92, c <= vec3<f32>(0.04045));
+}
+fn linearToSrgb(c : vec3<f32>) -> vec3<f32> {
+    let x = max(c, vec3<f32>(0.0));
+    return select(1.055 * pow(x, vec3<f32>(1.0 / 2.4)) - 0.055, x * 12.92, x <= vec3<f32>(0.0031308));
+}
+
+fn edge(center : vec4<f32>, next : vec4<f32>, previous : vec4<f32>) -> f32 {
+    let z = 1.0 / max(center.r, 0.0001);
+    let a = 1.0 / max(next.r, 0.0001);
+    let b = 1.0 / max(previous.r, 0.0001);
+    // Inverse depth is affine on a perspective-projected plane. Its signed
+    // second difference suppresses grazing surfaces and inks only the near
+    // side of an occlusion, including thin geometry with background both sides.
+    let curvature = (2.0 * z - a - b) / z;
+    let depthEdge = smoothstep(u.params.z, u.params.z * 2.0, curvature);
+    let sameDepth = abs(center.r - next.r) / max(center.r, 0.0001) < 0.03;
+    let crease = select(0.0, 1.0, next.a > 0.5 && sameDepth && dot(normal(center.gb), normal(next.gb)) < u.params.y);
+    return max(depthEdge, crease);
+}
+
+@fragment fn fs(@builtin(position) pos : vec4<f32>${multisampled ? ", @builtin(sample_index) sampleIndex : u32" : ""}) -> @location(0) vec4<f32> {
+    let sample = ${multisampled ? "i32(sampleIndex)" : "0"};
+    let pixel = vec2<i32>(pos.xy);
+    let source = textureLoad(colorTex, pixel, sample);
+    let c = geometry(pixel, sample);
+    if (c.a <= 0.0 || u.params.x <= 0.0 || u.params.w <= 0.0) { return source; }
+    var coverage = 0.0;
+    let directions = array<vec2<f32>, 8>(
+        vec2<f32>(1.0, 0.0), vec2<f32>(-1.0, 0.0), vec2<f32>(0.0, 1.0), vec2<f32>(0.0, -1.0),
+        vec2<f32>(0.707107, 0.707107), vec2<f32>(-0.707107, 0.707107), vec2<f32>(0.707107, -0.707107), vec2<f32>(-0.707107, -0.707107));
+    for (var r = 1; r <= i32(ceil(u.params.x)); r++) {
+        let weight = clamp(u.params.x - f32(r) + 1.0, 0.0, 1.0);
+        for (var d = 0; d < 8; d++) {
+            let offset = vec2<i32>(round(directions[d] * f32(r)));
+            coverage = max(coverage, edge(c, geometry(pixel + offset, sample), geometry(pixel - offset, sample)) * weight);
+        }
+    }
+    var ink = u.ink.rgb;
+    if (u.fog.w > 0.5) {
+        let uv = pos.xy / vec2<f32>(textureDimensions(colorTex));
+        let ray = vec3<f32>((uv * 2.0 - 1.0) * u.projection.xy, 1.0);
+        let distance = c.r * length(ray);
+        let fog = smoothstep(u.fogRange.x, max(u.fogRange.y, u.fogRange.x + 1.0), distance) * u.fogRange.z;
+        // Match surface fog's linear-light blend; display-space interpolation
+        // would darken outlines halfway into a light-colored atmosphere.
+        ink = linearToSrgb(mix(srgbToLinear(ink), srgbToLinear(u.fog.rgb), fog));
+    }
+    let visibleCoverage = min(c.a / max(source.a, 0.0001), 1.0);
+    return vec4<f32>(mix(source.rgb, ink * source.a, coverage * visibleCoverage * u.params.w * u.ink.a), source.a);
+}
+`;
+}
+/** Ink shades original color/depth/normal samples, then resolves color with MSAA. */
+var GeometryOutlinePipeline = class {
+	layout;
+	pipeline;
+	multisampledOutput = null;
+	pool = new BufferPool(80, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST);
+	constructor(device, format, sampleCount = 1) {
+		this.device = device;
+		this.format = format;
+		this.sampleCount = sampleCount;
+		this.layout = device.createBindGroupLayout({
+			label: "GeometryOutlineLayout",
+			entries: [{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				buffer: { type: "uniform" }
+			}, ...[1, 2].map((binding) => ({
+				binding,
+				visibility: GPUShaderStage.FRAGMENT,
+				texture: {
+					sampleType: "unfilterable-float",
+					multisampled: sampleCount > 1
+				}
+			}))]
+		});
+		const module$1 = device.createShaderModule({
+			label: "geometry-outlines.wgsl",
+			code: outlineShader(sampleCount)
+		});
+		this.pipeline = device.createRenderPipeline({
+			label: "GeometryOutlines",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [this.layout] }),
+			vertex: {
+				module: module$1,
+				entryPoint: "vs"
+			},
+			fragment: {
+				module: module$1,
+				entryPoint: "fs",
+				targets: [{ format }]
+			},
+			primitive: { topology: "triangle-list" },
+			multisample: { count: sampleCount }
+		});
+	}
+	reset() {
+		this.pool.reset();
+	}
+	destroy() {
+		this.pool.destroy();
+		this.multisampledOutput?.destroy();
+	}
+	attachment(source, dest) {
+		if (this.sampleCount <= 1) return {
+			view: dest,
+			loadOp: "clear",
+			storeOp: "store"
+		};
+		if (!this.multisampledOutput || this.multisampledOutput.width !== source.width || this.multisampledOutput.height !== source.height) {
+			this.multisampledOutput?.destroy();
+			this.multisampledOutput = this.device.createTexture({
+				label: "GeometryOutlineMsaaOutput",
+				size: {
+					width: source.width,
+					height: source.height
+				},
+				format: this.format,
+				sampleCount: this.sampleCount,
+				usage: GPUTextureUsage.RENDER_ATTACHMENT
+			});
+		}
+		return {
+			view: this.multisampledOutput.createView(),
+			resolveTarget: dest,
+			loadOp: "clear",
+			storeOp: "discard"
+		};
+	}
+	render(encoder, source, geometry, dest, camera, options, fog) {
+		const data = new Float32Array(20);
+		data.set([
+			(options.width ?? 1.5) * source.height / (options.referenceHeight ?? 1080),
+			Math.cos((options.creaseAngle ?? 45) * Math.PI / 180),
+			options.depthThreshold ?? .01,
+			options.opacity ?? 1
+		]);
+		const color = parseColor(options.color ?? "#16131c");
+		data.set([
+			color.r,
+			color.g,
+			color.b,
+			color.a
+		], 4);
+		if (fog) {
+			const tint = parseColor(fog.color);
+			data.set([
+				tint.r,
+				tint.g,
+				tint.b,
+				1
+			], 8);
+			data.set([
+				fog.start,
+				fog.end,
+				fog.opacity ?? 1,
+				0
+			], 12);
+		}
+		const projection = Camera3D.computeProjectionMatrix(camera);
+		data.set([
+			1 / projection[0],
+			1 / projection[5],
+			camera.far,
+			0
+		], 16);
+		const bindGroup = this.device.createBindGroup({
+			layout: this.layout,
+			entries: [
+				{
+					binding: 0,
+					resource: { buffer: this.pool.getBuffer(this.device, data) }
+				},
+				{
+					binding: 1,
+					resource: source.createView()
+				},
+				{
+					binding: 2,
+					resource: geometry.createView()
+				}
+			]
+		});
+		const pass = encoder.beginRenderPass({ colorAttachments: [this.attachment(source, dest)] });
+		pass.setPipeline(this.pipeline);
+		pass.setBindGroup(0, bindGroup);
+		pass.draw(3);
+		pass.end();
+	}
+};
+/**
+* Color MSAA resolves average samples. Depth and octahedral normals cannot
+* be averaged across silhouettes: that invents a distant surface and a
+* normal that belongs to neither object. Keep the nearest visible sample
+* and carry outline coverage separately, without re-rendering geometry.
+*/
+const shader = `
+@group(0) @binding(0) var geometry : texture_multisampled_2d<f32>;
+@vertex fn vs(@builtin(vertex_index) i : u32) -> @builtin(position) vec4<f32> {
+    let p = vec2<f32>(f32((i << 1u) & 2u), f32(i & 2u));
+    return vec4<f32>(p * 2.0 - 1.0, 0.0, 1.0);
+}
+@fragment fn fs(@builtin(position) pos : vec4<f32>) -> @location(0) vec4<f32> {
+    let pixel = vec2<i32>(pos.xy);
+    let samples = i32(textureNumSamples(geometry));
+    var nearest = textureLoad(geometry, pixel, 0);
+    var coverage = 0.0;
+    for (var i = 0; i < samples; i++) {
+        let s = textureLoad(geometry, pixel, i);
+        if (s.r < nearest.r) { nearest = s; }
+        coverage += s.a;
+    }
+    return vec4<f32>(nearest.rgb, nearest.a * coverage / f32(samples));
+}
+`;
+var GeometryResolvePipeline = class {
+	layout;
+	pipeline;
+	constructor(device) {
+		this.device = device;
+		this.layout = device.createBindGroupLayout({ entries: [{
+			binding: 0,
+			visibility: GPUShaderStage.FRAGMENT,
+			texture: {
+				sampleType: "unfilterable-float",
+				multisampled: true
+			}
+		}] });
+		const module$1 = device.createShaderModule({
+			label: "geometry-resolve.wgsl",
+			code: shader
+		});
+		this.pipeline = device.createRenderPipeline({
+			label: "GeometryResolve",
+			layout: device.createPipelineLayout({ bindGroupLayouts: [this.layout] }),
+			vertex: {
+				module: module$1,
+				entryPoint: "vs"
+			},
+			fragment: {
+				module: module$1,
+				entryPoint: "fs",
+				targets: [{ format: "rgba16float" }]
+			},
+			primitive: { topology: "triangle-list" }
+		});
+	}
+	render(encoder, source, dest) {
+		const bindGroup = this.device.createBindGroup({
+			layout: this.layout,
+			entries: [{
+				binding: 0,
+				resource: source.createView()
+			}]
+		});
+		const pass = encoder.beginRenderPass({ colorAttachments: [{
+			view: dest,
+			loadOp: "clear",
+			storeOp: "store"
+		}] });
+		pass.setPipeline(this.pipeline);
+		pass.setBindGroup(0, bindGroup);
+		pass.draw(3);
+		pass.end();
+	}
+};
 function isKtx2(bytes) {
 	return bytes.length >= KTX2_IDENTIFIER.length && KTX2_IDENTIFIER.every((byte, i) => bytes[i] === byte);
 }
@@ -38327,6 +38673,9 @@ struct TextModelUniforms {
 	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
+    toonShadow     : vec4<f32>, // rgb shadow-side multiplier, w diffuse modelling
+    toonLight      : vec4<f32>, // rgb lit-side multiplier, w terminator threshold
+    toonParams     : vec4<f32>, // x terminator softness, y outline participation
 };
 
 @group(0) @binding(0) var<uniform> cam    : CameraUniforms;
@@ -38459,7 +38808,7 @@ fn shadeText(in : VSOut, fw : vec2<f32>) -> TextFragment {
 	if (shaded.a < 0.0001) {
 		return out;
 	}
-	let lit = shadeSurfaceFull(in.worldPos, in.worldNormal, shaded.rgb / shaded.a, model.materialParams, model.pbr, model.emissive);
+	let lit = shadeSurfaceFull(in.worldPos, in.worldNormal, shaded.rgb / shaded.a, model.materialParams, model.pbr, model.emissive, model.toonShadow, model.toonLight, model.toonParams);
 	out.color = vec4<f32>(lit.display * shaded.a, shaded.a);
 	out.hdr = vec4<f32>(lit.hdr * shaded.a, shaded.a);
 	return out;
@@ -38500,7 +38849,7 @@ struct MrtBloomOutput {
 @fragment fn fs_mrt(in : VSOut) -> MrtOutput {
 	var out : MrtOutput;
 	out.color = textFragment(in).color;
-	out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+	out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
 	return out;
 }
 
@@ -38516,7 +38865,7 @@ struct MrtBloomOutput {
 	let f = textFragment(in);
 	var out : MrtBloomOutput;
 	out.color = f.color;
-	out.depth = vec4<f32>(in.linearDepth, 0.0, 0.0, 1.0);
+	out.depth = geometryPixel(in.linearDepth, in.worldNormal, model.toonParams.y);
 	out.hdr = f.hdr;
 	return out;
 }
@@ -39580,6 +39929,8 @@ var Renderer3D = class {
 	shadowSampler = null;
 	meshBounds = /* @__PURE__ */ new WeakMap();
 	bloomPipeline = null;
+	outlinePipeline = null;
+	geometryResolvePipeline = null;
 	lastCameraBuffer = null;
 	/**
 	* Samples per pixel in the 3D pass. Mesh silhouettes (extruded text,
@@ -39646,7 +39997,39 @@ var Renderer3D = class {
 			primitive: { topology: "triangle-list" }
 		});
 	}
+	/**
+	* Size-dependent render targets, by label, size, samples and usage. One
+	* frame (one command buffer) can render 3D scenes of different sizes, so
+	* a target is never destroyed while the frame may use it: targets the last
+	* frame did not use are destroyed at the next `resetPools`.
+	*/
+	attachments = /* @__PURE__ */ new Map();
+	attachmentsUsed = /* @__PURE__ */ new Set();
+	attachment(label, width, height, desc) {
+		const key = `${label}:${width}x${height}:${desc.sampleCount ?? 1}:${desc.usage}`;
+		this.attachmentsUsed.add(key);
+		let texture = this.attachments.get(key);
+		if (!texture) {
+			texture = this.device.createTexture({
+				label,
+				size: {
+					width,
+					height
+				},
+				...desc
+			});
+			this.attachments.set(key, texture);
+		}
+		return texture;
+	}
 	resetPools() {
+		for (const [key, texture] of this.attachments) {
+			if (this.attachmentsUsed.has(key)) continue;
+			texture.destroy();
+			this.attachments.delete(key);
+		}
+		this.attachmentsUsed.clear();
+		this.outlinePipeline?.reset();
 		this.bloomPipeline?.resetPools();
 		this.cameraPool.reset();
 		this.lastCameraPose = null;
@@ -39661,33 +40044,18 @@ var Renderer3D = class {
 		this.morphPipeline.resetPools();
 	}
 	getOrCreateDepthTexture(width, height) {
-		if (!this.depthTexture || this.depthTexture.width !== width || this.depthTexture.height !== height) {
-			this.depthTexture?.destroy();
-			this.depthTexture = this.device.createTexture({
-				label: "Renderer3DDepthTexture",
-				size: {
-					width,
-					height
-				},
-				format: "depth24plus",
-				sampleCount: this.sampleCount,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
-			});
-		}
+		this.depthTexture = this.attachment("Renderer3DDepthTexture", width, height, {
+			format: "depth24plus",
+			sampleCount: this.sampleCount,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT
+		});
 		return this.depthTexture;
 	}
-	getOrCreateMsaaTexture(current, label, format, width, height) {
-		if (current && current.width === width && current.height === height) return current;
-		current?.destroy();
-		return this.device.createTexture({
-			label,
-			size: {
-				width,
-				height
-			},
+	getOrCreateMsaaTexture(_current, label, format, width, height, sampled = false) {
+		return this.attachment(label, width, height, {
 			format,
 			sampleCount: this.sampleCount,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | (sampled ? GPUTextureUsage.TEXTURE_BINDING : 0)
 		});
 	}
 	/** The HDR radiance target the last `beginPass(…, writeHdr)` drew into. */
@@ -39695,110 +40063,54 @@ var Renderer3D = class {
 		return this.hdrTexture;
 	}
 	getOrCreateHdrTexture(width, height) {
-		if (!this.hdrTexture || this.hdrTexture.width !== width || this.hdrTexture.height !== height) {
-			this.hdrTexture?.destroy();
-			this.hdrTexture = this.device.createTexture({
-				label: "Renderer3DHdrRadiance",
-				size: {
-					width,
-					height
-				},
-				format: "rgba16float",
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.hdrTexture = this.attachment("Renderer3DHdrRadiance", width, height, {
+			format: "rgba16float",
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.hdrTexture;
 	}
 	getOrCreateLinearDepthTexture(width, height) {
-		if (!this.linearDepthTexture || this.linearDepthTexture.width !== width || this.linearDepthTexture.height !== height) {
-			this.linearDepthTexture?.destroy();
-			this.linearDepthTexture = this.device.createTexture({
-				label: "Renderer3DLinearDepthTexture",
-				size: {
-					width,
-					height
-				},
-				format: "rgba16float",
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.linearDepthTexture = this.attachment("Renderer3DLinearDepthTexture", width, height, {
+			format: "rgba16float",
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.linearDepthTexture;
 	}
 	getOrCreateReflectionTexture(width, height) {
-		if (!this.reflectionColorTexture || this.reflectionColorTexture.width !== width || this.reflectionColorTexture.height !== height) {
-			this.reflectionColorTexture?.destroy();
-			this.reflectionColorTexture = this.device.createTexture({
-				label: "Renderer3DReflectionColor",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.reflectionColorTexture = this.attachment("Renderer3DReflectionColor", width, height, {
+			format: this.format,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.reflectionColorTexture;
 	}
 	getOrCreateReflectionMsaaTexture(width, height) {
-		if (!this.reflectionMsaaColorTexture || this.reflectionMsaaColorTexture.width !== width || this.reflectionMsaaColorTexture.height !== height) {
-			this.reflectionMsaaColorTexture?.destroy();
-			this.reflectionMsaaColorTexture = this.device.createTexture({
-				label: "Renderer3DReflectionMsaaColor",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				sampleCount: this.sampleCount,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
-			});
-		}
+		this.reflectionMsaaColorTexture = this.attachment("Renderer3DReflectionMsaaColor", width, height, {
+			format: this.format,
+			sampleCount: this.sampleCount,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT
+		});
 		return this.reflectionMsaaColorTexture;
 	}
 	getOrCreateReflectionDepthTexture(width, height) {
-		if (!this.reflectionDepthTexture || this.reflectionDepthTexture.width !== width || this.reflectionDepthTexture.height !== height) {
-			this.reflectionDepthTexture?.destroy();
-			this.reflectionDepthTexture = this.device.createTexture({
-				label: "Renderer3DReflectionDepth",
-				size: {
-					width,
-					height
-				},
-				format: "depth24plus",
-				sampleCount: this.sampleCount,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
-			});
-		}
+		this.reflectionDepthTexture = this.attachment("Renderer3DReflectionDepth", width, height, {
+			format: "depth24plus",
+			sampleCount: this.sampleCount,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT
+		});
 		return this.reflectionDepthTexture;
 	}
 	getOrCreateReflectionTempTexture(width, height) {
-		if (!this.reflectionTempTexture || this.reflectionTempTexture.width !== width || this.reflectionTempTexture.height !== height) {
-			this.reflectionTempTexture?.destroy();
-			this.reflectionTempTexture = this.device.createTexture({
-				label: "Renderer3DReflectionTemp",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.reflectionTempTexture = this.attachment("Renderer3DReflectionTemp", width, height, {
+			format: this.format,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.reflectionTempTexture;
 	}
 	getOrCreateReflectionBlurredTexture(width, height) {
-		if (!this.reflectionBlurredTexture || this.reflectionBlurredTexture.width !== width || this.reflectionBlurredTexture.height !== height) {
-			this.reflectionBlurredTexture?.destroy();
-			this.reflectionBlurredTexture = this.device.createTexture({
-				label: "Renderer3DReflectionBlurred",
-				size: {
-					width,
-					height
-				},
-				format: this.format,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-			});
-		}
+		this.reflectionBlurredTexture = this.attachment("Renderer3DReflectionBlurred", width, height, {
+			format: this.format,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+		});
 		return this.reflectionBlurredTexture;
 	}
 	packCameraUniforms(camera, surfaceWidth, surfaceHeight, time$2 = 0) {
@@ -40080,16 +40392,22 @@ var Renderer3D = class {
 			storeOp: "store",
 			clearValue
 		};
-		if (msaa) this.msaaColorTexture = this.getOrCreateMsaaTexture(this.msaaColorTexture, "Renderer3DMsaaColor", this.format, surfaceWidth, surfaceHeight);
+		if (msaa) this.msaaColorTexture = this.getOrCreateMsaaTexture(this.msaaColorTexture, "Renderer3DMsaaColor", this.format, surfaceWidth, surfaceHeight, Boolean(world?.environment?.outlines));
 		const colorAttachments = [attach(colorTargetView, msaa ? this.msaaColorTexture : null, clearColor, loadOp)];
+		if (msaa && world?.environment?.outlines) colorAttachments[0].storeOp = "store";
 		if (linearDepthTargetView) {
-			if (msaa) this.msaaLinearDepthTexture = this.getOrCreateMsaaTexture(this.msaaLinearDepthTexture, "Renderer3DMsaaLinearDepth", "rgba16float", surfaceWidth, surfaceHeight);
-			colorAttachments.push(attach(linearDepthTargetView, msaa ? this.msaaLinearDepthTexture : null, {
-				r: camera.far,
-				g: 0,
-				b: 0,
-				a: 1
-			}, "clear"));
+			if (msaa) this.msaaLinearDepthTexture = this.getOrCreateMsaaTexture(this.msaaLinearDepthTexture, "Renderer3DMsaaLinearDepth", "rgba16float", surfaceWidth, surfaceHeight, true);
+			const geometryAttachment = attach(linearDepthTargetView, msaa ? this.msaaLinearDepthTexture : null, {
+				r: Math.min(camera.far, 65504),
+				g: .5,
+				b: .5,
+				a: 0
+			}, "clear");
+			if (msaa && world?.environment?.outlines) {
+				geometryAttachment.resolveTarget = void 0;
+				geometryAttachment.storeOp = "store";
+			}
+			colorAttachments.push(geometryAttachment);
 		}
 		this.passWritesHdr = writeHdr;
 		if (writeHdr) {
@@ -40180,8 +40498,9 @@ var Renderer3D = class {
 		this.floorReflectionPipeline.draw(pass, cameraBindGroup, lightsBindGroup, reflectionTexture, floor, useMrt, useBloom);
 	}
 	/**
-	* A layer's unit quad ([-0.5, 0.5] square) in world space:
-	* T(pos) * Rz * Ry * Rx * S(w * sx, h * sy, sz) * T(0.5 - ax, 0.5 - ay, 0).
+	* A centered unit quad in world space. Translate to the authored pivot,
+	* rotate and scale, then offset the unit quad back from that pivot.
+	* Shared with children in preserve-3d containers.
 	*/
 	quadModelMatrix(opts) {
 		if (opts.modelMatrix) return opts.modelMatrix;
@@ -40195,7 +40514,7 @@ var Renderer3D = class {
 			1
 		], anchor = [.5, .5] } = opts;
 		let m = Matrix4Math.identity();
-		m = Matrix4Math.multiply(m, Matrix4Math.translate(position[0], position[1], position[2]));
+		m = Matrix4Math.multiply(m, Matrix4Math.translate(position[0] + (anchor[0] - .5) * width, position[1] + (anchor[1] - .5) * height, position[2]));
 		const rxRad = rotation[0] * Math.PI / 180;
 		const ryRad = rotation[1] * Math.PI / 180;
 		const rzRad = rotation[2] * Math.PI / 180;
@@ -40260,6 +40579,8 @@ var Renderer3D = class {
 				metallic: opts.metallic,
 				emissive: opts.emissive,
 				emissiveIntensity: opts.emissiveIntensity,
+				toon: opts.toon,
+				outline: opts.outline,
 				matte: opts.matte
 			}, useMrt, this.passWritesHdr);
 		}
@@ -40305,6 +40626,8 @@ var Renderer3D = class {
 			metallic,
 			emissive: opts.emissive,
 			emissiveIntensity: opts.emissiveIntensity,
+			toon: opts.toon,
+			outline: opts.outline,
 			matte: opts.matte,
 			relief: opts.relief
 		}, useMrt, this.passWritesHdr);
@@ -40548,6 +40871,8 @@ var Renderer3D = class {
 			metallic,
 			emissive: opts.emissive,
 			emissiveIntensity: opts.emissiveIntensity,
+			toon: opts.toon,
+			outline: opts.outline,
 			matte: opts.matte,
 			maps: opts.maps,
 			isInstanced: Boolean(opts.instanceBuffer || opts.instanceCount && opts.instanceCount > 1),
@@ -40702,6 +41027,23 @@ var Renderer3D = class {
 		this.bloomPipeline ??= new BloomPipeline(this.device);
 		this.bloomPipeline.apply(encoder, source, dest, options, hdrSource ?? void 0);
 	}
+	/** Geometry ink is applied before lens blur, independently of material shading. */
+	resolveGeometry(encoder, geometry) {
+		if (this.sampleCount <= 1 || !this.msaaLinearDepthTexture) return;
+		this.geometryResolvePipeline ??= new GeometryResolvePipeline(this.device);
+		this.geometryResolvePipeline.render(encoder, this.msaaLinearDepthTexture, geometry.createView());
+	}
+	applyOutlines(encoder, source, geometry, dest, camera, options, fog) {
+		let colorSource = source;
+		let geometrySource = geometry;
+		if (this.sampleCount > 1) {
+			if (!this.msaaColorTexture || !this.msaaLinearDepthTexture) throw new Error("Geometry outlines require the scene's retained MSAA color and geometry samples");
+			colorSource = this.msaaColorTexture;
+			geometrySource = this.msaaLinearDepthTexture;
+		}
+		this.outlinePipeline ??= new GeometryOutlinePipeline(this.device, this.format, this.sampleCount);
+		this.outlinePipeline.render(encoder, colorSource, geometrySource, dest, camera, options, fog);
+	}
 	applyDepthOfField(encoder, sourceColorTex, depthTex, destView, cameraBuffer) {
 		const sampler = this.samplerCache.getSampler(this.device);
 		const bindGroup = this.device.createBindGroup({
@@ -40754,7 +41096,10 @@ var Renderer3D = class {
 		}, useMrt);
 	}
 	destroy() {
+		for (const texture of this.attachments.values()) texture.destroy();
+		this.attachments.clear();
 		this.bloomPipeline?.destroy();
+		this.outlinePipeline?.destroy();
 		this.depthTexture?.destroy();
 		for (const texture of this.shadowTextures.values()) texture.destroy();
 		this.shadowTextures.clear();
@@ -41786,4 +42131,4 @@ if (typeof globalThis !== "undefined") globalThis.__GATEWAI_DELAYS__ = globalThi
 
 //#endregion
 export { poseNodes as $, TextAnchorConfigSchema as $t, emojiGraphemes as A, evaluateSkewMatrix as An, AnimatableGlyphPropsSchema as At, jointMatrices as B, sampleCurveGeometry as Bn, GlyphAnchorPointSchema as Bt, drawGifNode as C, distanceToCurveParameter as Cn, parseColorToRgb as Ct, drawSignalNode as D, evaluateExpressionSelector as Dn, AdvancedTextAnimatorSchema as Dt, drawParagraphNode as E, evaluateCubicBezierDerivative as En, AdvancedTextAnimatorBuilder as Et, getPrimitiveGeometry as F, generatePathSegments as Fn, DynamicStrokePropertiesSchema as Ft, measureMaxCaptionHeight as G, SelectorBasedOnSchema as Gt, loadModel3D as H, signalRegistry as Hn, LineSpacingDynamicsSchema as Ht, getRegisteredFontSource as I, getScramblePool as In, EnhancedTextNodeSchema as It, parseDashArray as J, SelectorUnitsSchema as Jt, mediaDecoderCache as K, SelectorModeSchema as Kt, getRenderer2D as L, getShuffledOrder as Ln, ExpressionSelectorSchema as Lt, fitSpansToText as M, evaluateTypewriterState as Mn, AudioSpectrumTypographySchema as Mt, generateExtrudedTextGeometry as N, evaluateVolumetricFormation as Nn, ChromaticGlitchConfigSchema as Nt, drawSvgNode as O, evaluateMarqueeOffset as On, AnchorGroupingSchema as Ot, getHeadlessFontPath as P, generateArcLengthLUT as Pn, CubicBezierSegmentSchema as Pt, parseSvgPathToSegments as Q, SpringPhysicsSchema as Qt, initHeadlessWebGPU as R, parseSvgPathToCubicBeziers as Rn, ExtendedGlyphPropertiesSchema as Rt, drawCaptionNode as S, deterministicWigglyNoise as Sn, linearRgb as St, drawLottieNode as T, evaluateCubicBezier as Tn, AETextAnimatorSchema as Tt, loadOBJ as U, waveToCubicBeziers as Un, LongShadowConfigSchema as Ut, loadFBX as V, samplePathChainGeometry as Vn, KineticMarqueeConfigSchema as Vt, lutStore as W, ParticleDissolveConfigSchema as Wt, parseMTL as X, SkewPropertiesSchema as Xt, parseFBX as Y, SignalRegistry as Yt, parseOBJ as Z, Spatial3DPropertiesSchema as Zt, buildShapeSvgPath as _, buildPathLUT as _n, Light3D as _t, GlassPipeline as a, TextPathSourceSchema as an, setRegisteredFontSource as at, colorMatrixWgsl as b, computeLineLeadingDisplacement as bn, Path3D as bt, Renderer2D as c, TextSelectorSchema as cn, srtLoader as ct, ScreenSpaceRelightPipeline as d, TypewriterAnimatorSchema as dn, transformScale as dt, TextAnimatorBuilder as en, probeVideoSize as et, ShadowPipeline as f, TypingCadenceSchema as fn, GetFontAssetUrl as ft, WebGPUAudioProcessor as g, VolumetricFormationModeSchema as gn, LIGHT_UNIFORM_SIZE_BYTES as gt, SlugPipeline as h, VolumetricFormationConfigSchema as hn, ENVIRONMENT_PRESETS as ht, EffectPipeline as i, TextPathOptionsSchema as in, sampleMorphWeights as it, ensureDevice as j, evaluateSpringProgress as jn, AudioSignalComputePipeline as jt, drawVideoNode as k, evaluateSelectorCombination as kn, AnchorPresetSchema as kt, Renderer3D as l, TextSignalSelectorSchema as ln, textureCache as lt, SlugGeometry as m, Vec2Schema as mn, Camera3D as mt, AudioLatentTrackCache as n, TextCursorStyleSchema as nn, resolveInputUrl as nt, MotionBlurPipeline as o, TextRangeSelectorSchema as on, shaderStore as ot, SlugFontCache as p, VariableFontAxesSchema as pn, resolveMediaSourceUrl as pt, parseColor as q, SelectorShapeSchema as qt, AudioMeshDeformPipeline as r, TextPathBuilder as rn, resolveTextSpans as rt, NodeSurfaceProvider as s, TextScrambleConfigSchema as sn, spansText as st, AudioLatentEngine as t, TextCursorConfigSchema as tn, registerHeadlessFont as tt, SSAOPipeline as u, TextWigglySelectorSchema as un, trackAudioPitch as ut, clearAllVideoCache as v, buildWGSLSignalFn as vn, MAX_LIGHTS as vt, drawImageNode as w, ellipseToCubicBeziers as wn, resolveEnvironment as wt, describeGpu as x, computeRangeSelectorWeight as xn, Vector3Math as xt, clearHeadlessFonts as y, computeAnchorPivotOffset as yn, Matrix4Math as yt, inputStore as z, sampleAudioSpectrumScale as zn, GlyphAnchorGroupingSchema as zt };
-//# sourceMappingURL=dist-DtPPPsZV.mjs.map
+//# sourceMappingURL=dist--Uu5bQ_6.mjs.map