@selvajs/visualization 1.6.0-beta.9 → 1.6.0

package/dist/render.cjs

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_gpu_ownership = require("./gpu-ownership-ADRZBxxs.cjs");
-const require_gpu_dispose = require("./gpu-dispose-fRI12OCL.cjs");
+const require_gpu_dispose = require("./gpu-dispose-D66GqIWS.cjs");
 const require_merged_draw = require("./merged-draw-ma_2r4N8.cjs");
 let three = require("three");
 three = require_gpu_ownership.__toESM(three, 1);
 let three_addons_lines_Line2_js = require("three/addons/lines/Line2.js");
 let three_addons_lines_LineGeometry_js = require("three/addons/lines/LineGeometry.js");
 let three_addons_lines_LineMaterial_js = require("three/addons/lines/LineMaterial.js");
-let three_addons_environments_RoomEnvironment_js = require("three/addons/environments/RoomEnvironment.js");
 let three_addons_lines_LineSegments2_js = require("three/addons/lines/LineSegments2.js");
 let three_addons_lines_LineSegmentsGeometry_js = require("three/addons/lines/LineSegmentsGeometry.js");
 let three_addons_renderers_CSS2DRenderer_js = require("three/addons/renderers/CSS2DRenderer.js");
+let three_mesh_bvh = require("three-mesh-bvh");
 let three_addons_helpers_ViewHelper_js = require("three/addons/helpers/ViewHelper.js");
 let three_addons_postprocessing_EffectComposer_js = require("three/addons/postprocessing/EffectComposer.js");
 let three_addons_postprocessing_RenderPass_js = require("three/addons/postprocessing/RenderPass.js");
@@ -18,8 +18,8 @@ let three_addons_postprocessing_ShaderPass_js = require("three/addons/postproces
 let three_addons_postprocessing_GTAOPass_js = require("three/addons/postprocessing/GTAOPass.js");
 let three_addons_postprocessing_SMAAPass_js = require("three/addons/postprocessing/SMAAPass.js");
 let three_addons_postprocessing_OutputPass_js = require("three/addons/postprocessing/OutputPass.js");
-let three_addons_postprocessing_UnrealBloomPass_js = require("three/addons/postprocessing/UnrealBloomPass.js");
 let three_addons_postprocessing_Pass_js = require("three/addons/postprocessing/Pass.js");
+let three_addons_postprocessing_UnrealBloomPass_js = require("three/addons/postprocessing/UnrealBloomPass.js");
 let three_addons_controls_OrbitControls_js = require("three/addons/controls/OrbitControls.js");
 let three_addons_loaders_HDRLoader_js = require("three/addons/loaders/HDRLoader.js");
 // src/shared/types.ts
@@ -68,8 +68,84 @@ function isOwnedBy(object, id) {
 	if (id === void 0) return isHostOwned(object);
 	return object.userData?.source === appSource(id);
 }
+// src/render/scene-setup/studio-environment.ts
+/** What a softbox costs to set up, in radiance: only their ratio to the room matters to a reflection. */
+const OVERHEAD = 2.5;
+const KEY_STRIP = 11;
+const FILL_STRIP = 4.5;
+const RIM = 3.5;
+const FLOOR = .05;
+const WALL_LOW = .06;
+const WALL_HORIZON = .65;
+const WALL_HIGH = .8;
+const ROOM_SIZE = 10;
+function softbox(radiance, width, height, position) {
+	const panel = new three.Mesh(new three.PlaneGeometry(width, height), new three.MeshBasicMaterial({
+		color: new three.Color().setScalar(radiance),
+		side: three.DoubleSide
+	}));
+	panel.position.set(...position);
+	panel.lookAt(0, 0, 0);
+	return panel;
+}
+/**
+* A photographer's table, for PMREM to bake into a reflection probe: softboxes on a dark room.
+* Shape comes from the gaps between lights. A surface that reflects light everywhere has no contour,
+* which is why three's `RoomEnvironment`, bright on all sides, leaves metal looking like flat paint.
+* The floor stays dark so an underside reads as turned away from the light.
+*/
+function createStudioScene() {
+	const scene = new three.Scene();
+	const room = new three.Mesh(gradedRoom(), new three.MeshBasicMaterial({
+		vertexColors: true,
+		side: three.BackSide
+	}));
+	const floor = new three.Mesh(new three.PlaneGeometry(ROOM_SIZE, ROOM_SIZE), new three.MeshBasicMaterial({ color: new three.Color().setScalar(FLOOR) }));
+	floor.rotation.x = -Math.PI / 2;
+	floor.position.y = -4;
+	scene.add(room, floor, softbox(OVERHEAD, 6.5, 4.5, [
+		0,
+		4.8,
+		.6
+	]), softbox(KEY_STRIP, 1.4, 5.5, [
+		-4.7,
+		.8,
+		1.6
+	]), softbox(FILL_STRIP, .9, 5, [
+		4.7,
+		.5,
+		2.4
+	]), softbox(RIM, 5, .8, [
+		.6,
+		2.2,
+		-4.7
+	]));
+	return scene;
+}
+function gradedRoom() {
+	const geometry = new three.BoxGeometry(ROOM_SIZE, ROOM_SIZE, ROOM_SIZE, 1, 16, 1);
+	const position = geometry.attributes.position;
+	const colors = new Float32Array(position.count * 3);
+	for (let i = 0; i < position.count; i++) {
+		const t = position.getY(i) / (ROOM_SIZE / 2);
+		const radiance = t < 0 ? three.MathUtils.lerp(WALL_HORIZON, WALL_LOW, -t) : three.MathUtils.lerp(WALL_HORIZON, WALL_HIGH, t);
+		colors.fill(radiance, i * 3, i * 3 + 3);
+	}
+	geometry.setAttribute("color", new three.BufferAttribute(colors, 3));
+	return geometry;
+}
+/** Frees what {@link createStudioScene} built, once PMREM has baked it. */
+function disposeStudioScene(scene) {
+	scene.traverse((object) => {
+		const mesh = object;
+		mesh.geometry?.dispose();
+		mesh.material?.dispose();
+	});
+}
 // src/render/scene-setup/reflection-environment.ts
 const METAL = .5;
+/** Above PMREM's blur for a mirror, so a softbox has an edge in chrome without showing as a shape. */
+const STUDIO_BLUR = .03;
 const KEY = "selvaReflectionEnvironment";
 /**
 * Builds the studio probe once per scene. `rotation` turns its Y-up room to the scene's up, the same
@@ -77,9 +153,9 @@ const KEY = "selvaReflectionEnvironment";
 */
 function createReflectionEnvironment(scene, renderer, rotation) {
 	const pmrem = new three.PMREMGenerator(renderer);
-	const room = new three_addons_environments_RoomEnvironment_js.RoomEnvironment();
-	const texture = pmrem.fromScene(room, .04).texture;
-	room.dispose();
+	const studio = createStudioScene();
+	const texture = pmrem.fromScene(studio, STUDIO_BLUR).texture;
+	disposeStudioScene(studio);
 	pmrem.dispose();
 	installReflectionEnvironment(scene, texture, rotation);
 }
@@ -295,6 +371,8 @@ function applyDefaults(options) {
 			toneMappingExposure: options.render?.toneMappingExposure ?? preset.toneMappingExposure,
 			preserveDrawingBuffer: options.render?.preserveDrawingBuffer ?? false,
 			lowPower,
+			idleRefineFrames: options.render?.idleRefineFrames ?? (lowPower ? 0 : 32),
+			lightOrbitFrameMs: options.render?.lightOrbitFrameMs ?? 22,
 			ambientOcclusion: options.render?.ambientOcclusion ?? preset.ambientOcclusion,
 			aoIntensity: options.render?.aoIntensity ?? 1,
 			bloom: options.render?.bloom ?? preset.bloom,
@@ -357,6 +435,108 @@ function applyDefaults(options) {
 		onMaxAnisotropy: options.onMaxAnisotropy
 	};
 }
+// src/render/scene-setup/idle-refine.ts
+/** Long enough to skip the pauses inside an orbit, or a drag would keep restarting the average. */
+const SETTLE_MS = 150;
+/** Ambient occlusion is the largest cost of a frame, and the only one that can fade without a pop. */
+const AO_FADE_FRAMES = 8;
+/** Enough moving frames that one hitch can't decide it. */
+const ORBIT_SAMPLES = 12;
+/** Low-discrepancy sequence in [0, 1): N samples cover the range far more evenly than random ones. */
+function halton(index, base) {
+	let result = 0;
+	let fraction = 1 / base;
+	for (let i = index; i > 0; i = Math.floor(i / base)) {
+		result += i % base * fraction;
+		fraction /= base;
+	}
+	return result;
+}
+/** Counts what a forgotten `invalidate()` most likely changed: visibility and materials. */
+function sceneStamp(scene) {
+	let stamp = 0;
+	scene.traverseVisible((object) => {
+		stamp += 1;
+		const { material } = object;
+		for (const each of Array.isArray(material) ? material : material ? [material] : []) stamp += each.version * 31;
+	});
+	return stamp;
+}
+/**
+* Softens the picture while nothing moves. Each frame moves the camera by under a pixel and every
+* light within its real size, and the average of those frames has true penumbras and clean edges at
+* no cost to orbiting. The averaged image would be lost to the render loop's safety repaint, so
+* while it holds, that repaint only checks whether the scene changed.
+*
+* It also keeps orbiting smooth on a slow GPU. Once frames run over `lightOrbitFrameMs`, ambient
+* occlusion fades out while the camera moves and back in as it rests. Decided once, so a machine
+* near the limit doesn't flip between the two, and a fast one never sees it.
+*/
+function createIdleRefiner(params) {
+	const { scene, renderer, getPipeline, frames, lightOrbitFrameMs, jitterLights, restoreLights } = params;
+	let index = 0;
+	let changedAt = 0;
+	let stamp = 0;
+	const size = new three.Vector2();
+	let lightOrbit = frames > 0 && lightOrbitFrameMs <= 0;
+	let aoWeight = 1;
+	const orbitSamples = [];
+	const setAoWeight = (weight) => {
+		aoWeight = Math.min(1, Math.max(0, weight));
+		getPipeline()?.setAoWeight(aoWeight);
+	};
+	const measureOrbit = (deltaMs) => {
+		orbitSamples.push(deltaMs);
+		if (orbitSamples.length < ORBIT_SAMPLES) return;
+		orbitSamples.sort((a, b) => a - b);
+		lightOrbit = orbitSamples[6] > lightOrbitFrameMs;
+		orbitSamples.length = 0;
+	};
+	const jitterCamera = (camera, sample) => {
+		const lens = camera;
+		if (!lens.setViewOffset) return;
+		renderer.getDrawingBufferSize(size);
+		const x = sample ? halton(sample, 2) - .5 : 0;
+		const y = sample ? halton(sample, 3) - .5 : 0;
+		lens.setViewOffset(size.x, size.y, x, y, size.x, size.y);
+	};
+	return {
+		reset: (now) => {
+			index = 0;
+			changedAt = now;
+		},
+		moving: (deltaMs) => {
+			if (frames === 0) return;
+			if (lightOrbit) setAoWeight(aoWeight - 1 / AO_FADE_FRAMES);
+			else measureOrbit(deltaMs);
+		},
+		wants: (now) => (index < frames || aoWeight < 1) && now - changedAt >= SETTLE_MS && !!getPipeline(),
+		step: (camera) => {
+			const pipeline = getPipeline();
+			if (!pipeline) return;
+			if (aoWeight < 1) {
+				setAoWeight(aoWeight + 1 / AO_FADE_FRAMES);
+				pipeline.setCamera(camera);
+				pipeline.accumulate(0);
+				return;
+			}
+			if (index > 0) jitterLights(index);
+			jitterCamera(camera, index);
+			pipeline.setCamera(camera);
+			pipeline.accumulate(index);
+			camera.clearViewOffset?.();
+			if (index > 0) restoreLights();
+			index += 1;
+			if (index === frames) stamp = sceneStamp(scene);
+		},
+		present: () => {
+			if (frames === 0 || index < frames) return false;
+			getPipeline()?.presentAccumulated();
+			return !!getPipeline();
+		},
+		isHolding: () => frames > 0 && index >= frames && !!getPipeline() && stamp === sceneStamp(scene)
+	};
+}
 // src/render/scene-setup/setup-lighting.ts
 const SHADOW_NORMAL_BIAS = .02;
 /**
@@ -366,6 +546,11 @@ const SHADOW_NORMAL_BIAS = .02;
 const SUN_SHADOW_BLUR = 6;
 /** Sky and bounce always fill a shadow in, so a fully dark one looks painted on. */
 const SUN_SHADOW_DENSITY = .62;
+/**
+* How far the sun moves while the view refines, as a tangent: about 1 degree. The real sun's 0.27
+* looks hard on a model this size, and much past 1 a small part's shadow dissolves completely.
+*/
+const SUN_DISC_RADIUS = .018;
 /** Survives a solve with the sun, which would otherwise aim at a target outside the scene. */
 const SUN_TARGET_ID = "sun-target";
 function setupLighting(scene, config) {
@@ -411,6 +596,19 @@ function setupLighting(scene, config) {
 		sun: sunlight
 	};
 }
+/** Moves the sun within its disc and returns how to put it back. */
+function jitterSun(light, index) {
+	const home = light.position.clone();
+	const toSun = home.clone().sub(light.target.position);
+	const side = new three.Vector3(0, 0, 1).cross(toSun);
+	if (side.lengthSq() === 0) side.set(1, 0, 0);
+	side.setLength(toSun.length() * SUN_DISC_RADIUS);
+	const across = toSun.clone().cross(side).setLength(side.length());
+	const angle = halton(index, 2) * Math.PI * 2;
+	const reach = Math.sqrt(halton(index, 3));
+	light.position.addScaledVector(side, Math.cos(angle) * reach).addScaledVector(across, Math.sin(angle) * reach);
+	return () => light.position.copy(home);
+}
 /**
 * Sizes a directional light's orthographic shadow frustum to the scene content's bounding sphere —
 * the dominant lever on shadow crispness. No-op on an empty or zero-size box: the frustum would
@@ -1612,10 +1810,143 @@ function createLabelLayer(container, scene) {
 		}
 	};
 }
+// src/render/scene-pick.ts
+const bvhCache = /* @__PURE__ */ new WeakMap();
+function versionOf$1(attribute) {
+	return attribute?.version ?? 0;
+}
+/** BVH for a mesh geometry, building it on first use. Null when the geometry can't take one. */
+function bvhFor(geometry) {
+	const position = geometry.attributes.position;
+	if (!position || position.count === 0) return null;
+	const index = geometry.index;
+	const key = index ?? position;
+	const cached = bvhCache.get(key);
+	if (cached === null) return null;
+	if (cached && cached.position === position && cached.positionVersion === versionOf$1(position) && cached.indexVersion === versionOf$1(index)) return cached.bvh;
+	const proxy = new three.BufferGeometry();
+	proxy.setAttribute("position", position);
+	if (index) proxy.setIndex(index);
+	try {
+		const bvh = new three_mesh_bvh.MeshBVH(proxy, { indirect: true });
+		bvhCache.set(key, {
+			position,
+			positionVersion: versionOf$1(position),
+			indexVersion: versionOf$1(index),
+			bvh
+		});
+		return bvh;
+	} catch {
+		bvhCache.set(key, null);
+		return null;
+	}
+}
+function isBvhMesh(object) {
+	const o = object;
+	return o.isMesh === true && !o.isInstancedMesh && !o.isSkinnedMesh && !o.isBatchedMesh && !o.isLineSegments2 && !object.morphTargetInfluences?.length;
+}
+/**
+* Visible, pickable objects under `root`: hidden subtrees, viewer aids and edge overlays are
+* skipped. Overlays are skipped because they double the mesh's own edges and, as fat lines, cost a
+* linear scan of every segment per ray.
+*/
+function collectPickable(root, out = []) {
+	for (const child of root.children) {
+		if (!child.visible || isViewerAidRoot(child) || isEdgeOverlay(child)) continue;
+		out.push(child);
+		collectPickable(child, out);
+	}
+	return out;
+}
+/**
+* Index-buffer ranges a merged mesh currently draws, or null when it draws everything. Hidden
+* members are the gaps between groups (`shared/merged-draw.ts`).
+*/
+function drawnRanges(mesh) {
+	const { groups } = mesh.geometry;
+	if (!Array.isArray(mesh.material) || groups.length === 0) return null;
+	const materials = mesh.material;
+	return groups.filter((g) => materials[g.materialIndex ?? 0]?.visible !== false).map((g) => ({
+		start: g.start,
+		end: g.start + g.count
+	}));
+}
+const _inverse = new three.Matrix4();
+const _localRay = new three.Ray();
+const _sphere = new three.Sphere();
+function raycastMeshBvh(mesh, bvh, raycaster) {
+	_inverse.copy(mesh.matrixWorld).invert();
+	_localRay.copy(raycaster.ray).applyMatrix4(_inverse);
+	const ranges = drawnRanges(mesh);
+	let best = null;
+	if (!ranges) best = bvh.raycastFirst(_localRay, three.DoubleSide);
+	else for (const hit of bvh.raycast(_localRay, three.DoubleSide)) {
+		const at = (hit.faceIndex ?? 0) * 3;
+		if (!ranges.some((r) => at >= r.start && at < r.end)) continue;
+		if (!best || hit.distance < best.distance) best = hit;
+	}
+	if (!best) return null;
+	best.point.applyMatrix4(mesh.matrixWorld);
+	best.distance = best.point.distanceTo(raycaster.ray.origin);
+	best.object = mesh;
+	if (best.distance < raycaster.near || best.distance > raycaster.far) return null;
+	return best;
+}
+/**
+* Every hit along `raycaster`'s ray over the visible content of `scene`, nearest first. Meshes use
+* the BVH; lines, points and instanced meshes fall back to their own `raycast`.
+*/
+function raycastVisible(scene, raycaster) {
+	const hits = [];
+	for (const object of collectPickable(scene)) {
+		if (!object.layers.test(raycaster.layers)) continue;
+		if (isBvhMesh(object)) {
+			const { geometry } = object;
+			if (!geometry.boundingSphere) geometry.computeBoundingSphere();
+			if (!geometry.boundingSphere) continue;
+			_sphere.copy(geometry.boundingSphere).applyMatrix4(object.matrixWorld);
+			if (!raycaster.ray.intersectsSphere(_sphere)) continue;
+			const bvh = bvhFor(geometry);
+			if (bvh) {
+				const hit = raycastMeshBvh(object, bvh, raycaster);
+				if (hit) hits.push(hit);
+				continue;
+			}
+		}
+		object.raycast(raycaster, hits);
+	}
+	return hits.sort((a, b) => a.distance - b.distance);
+}
+/**
+* Builds BVHs for the visible meshes under `root` one per idle slice, so the first hover over a
+* large model doesn't pay for all of them at once. Returns a cancel function.
+*/
+function warmPickIndex(root) {
+	const queue = collectPickable(root).filter(isBvhMesh);
+	const idle = typeof requestIdleCallback === "function" ? (fn) => requestIdleCallback(fn, { timeout: 500 }) : (fn) => setTimeout(fn, 16);
+	const cancelIdle = typeof cancelIdleCallback === "function" ? cancelIdleCallback : (id) => clearTimeout(id);
+	let handle = 0;
+	let cancelled = false;
+	const step = () => {
+		if (cancelled) return;
+		const mesh = queue.shift();
+		if (!mesh) return;
+		bvhFor(mesh.geometry);
+		handle = idle(step);
+	};
+	handle = idle(step);
+	return () => {
+		cancelled = true;
+		cancelIdle(handle);
+	};
+}
 // src/render/measure.ts
 const DEFAULT_SNAP_PIXELS = 12;
 const DEFAULT_COLOR = 16763904;
 const LINE_PICK_FRACTION = .015;
+const RENDER_ORDER_LINE = 998;
+const RENDER_ORDER_MARKER = 999;
+const RENDER_ORDER_HOVER = 1e3;
 const UNIT_DISPLAY = {
 	Millimeters: {
 		metersPerUnit: 1 / 1e3,
@@ -1638,10 +1969,33 @@ const UNIT_DISPLAY = {
 		suffix: "ft"
 	}
 };
-/** @internal exported for tests */
+/**
+* Three significant figures below 1000, whole units above. `toPrecision(3)` alone switches to
+* exponent notation past 999 ("1.23e+4 mm"), which is unreadable on a building-scale model.
+*
+* @internal exported for tests
+*/
 function makeFormatter(displayUnit) {
 	const unit = displayUnit && UNIT_DISPLAY[displayUnit] || UNIT_DISPLAY.Meters;
-	return (meters) => `${(meters / unit.metersPerUnit).toPrecision(3)} ${unit.suffix}`;
+	return (meters) => {
+		const value = meters / unit.metersPerUnit;
+		const abs = Math.abs(value);
+		const decimals = abs === 0 ? 0 : Math.min(6, Math.max(0, 2 - Math.floor(Math.log10(abs))));
+		return `${value.toFixed(decimals)} ${unit.suffix}`;
+	};
+}
+/** @internal exported for tests */
+function makeDefaultFormat(fmt) {
+	return (distance, delta) => {
+		const eps = distance * 1e-6;
+		const axes = [
+			"x",
+			"y",
+			"z"
+		].filter((axis) => delta[axis] > eps);
+		if (axes.length < 2) return fmt(distance);
+		return `${fmt(distance)}\n${axes.map((axis) => `Δ${axis} ${fmt(delta[axis])}`).join("  ")}`;
+	};
 }
 /**
 * Raycast threshold for picking lines/points, as a fixed fraction of view size so the grab band
@@ -1659,138 +2013,129 @@ function pickThreshold(camera, viewTarget) {
 	return ((viewTarget ? camera.position.distanceTo(viewTarget) : camera.position.length()) || 1) * LINE_PICK_FRACTION;
 }
 /**
-* Vertex indices to consider snapping to, by object type: Mesh → struck triangle's 3 vertices;
-* Line/LineSegments → struck segment's 2 endpoints; Points → the struck vertex. Null when the hit
-* carries no usable index (e.g. a fat `Line2`), so the caller keeps the raw hit point.
+* Local-space vertices to consider snapping to, by object type: Mesh → struck triangle's 3
+* vertices; Line/LineSegments and fat Line2/LineSegments2 → struck segment's 2 endpoints; Points →
+* the struck vertex. Null when the hit carries no usable index, so the caller keeps the raw point.
 */
-function snapCandidateIndices(hit) {
+function snapCandidates(hit) {
 	const obj = hit.object;
-	if (obj instanceof three.Mesh) return hit.face ? [
+	const geometry = obj.geometry;
+	if (!geometry) return null;
+	if (obj.isLineSegments2) {
+		const start = geometry.attributes.instanceStart;
+		const end = geometry.attributes.instanceEnd;
+		const i = hit.faceIndex;
+		if (!start || !end || i == null || i >= start.count) return null;
+		return [new three.Vector3().fromBufferAttribute(start, i), new three.Vector3().fromBufferAttribute(end, i)];
+	}
+	const pos = geometry.attributes.position;
+	if (!pos) return null;
+	const at = (indices) => indices.filter((i) => i < pos.count).map((i) => new three.Vector3().fromBufferAttribute(pos, i));
+	if (obj instanceof three.Mesh) return hit.face ? at([
 		hit.face.a,
 		hit.face.b,
 		hit.face.c
-	] : null;
-	if (obj instanceof three.Points) return hit.index != null ? [hit.index] : null;
+	]) : null;
+	if (obj instanceof three.Points) return hit.index != null ? at([hit.index]) : null;
 	if (obj instanceof three.Line) {
 		if (hit.index == null) return null;
-		const index = obj.geometry.index;
+		const index = geometry.index;
 		if (index) {
 			if (hit.index + 1 >= index.count) return null;
-			return [index.getX(hit.index), index.getX(hit.index + 1)];
+			return at([index.getX(hit.index), index.getX(hit.index + 1)]);
 		}
-		return [hit.index, hit.index + 1];
+		return at([hit.index, hit.index + 1]);
 	}
 	return null;
 }
-/** Snap a raycast hit to the nearest geometry vertex within `snapPixels` on screen, else the raw hit point. */
-function snapToVertex(hit, camera, screenSize, snapPixels) {
-	const raw = hit.point.clone();
-	const obj = hit.object;
-	const indices = snapCandidateIndices(hit);
-	if (!indices || !obj.geometry) return raw;
-	const pos = obj.geometry.attributes.position;
-	if (!pos) return raw;
-	const toScreen = (worldP) => {
-		const ndc = worldP.clone().project(camera);
-		return new three.Vector2((ndc.x + 1) / 2 * screenSize.width, (1 - ndc.y) / 2 * screenSize.height);
-	};
-	const rawScreen = toScreen(raw);
-	let best = raw;
+function toScreen(world, camera, screenSize) {
+	const ndc = world.clone().project(camera);
+	return new three.Vector2((ndc.x + 1) / 2 * screenSize.width, (1 - ndc.y) / 2 * screenSize.height);
+}
+/** Where a hit sits on screen: fat lines report the nearest point on the line separately. */
+function hitPoint(hit) {
+	return hit.pointOnLine ?? hit.point;
+}
+function snapHit(hit, camera, screenSize, snapPixels) {
+	const raw = hitPoint(hit).clone();
+	const candidates = snapCandidates(hit);
+	if (!candidates) return {
+		point: raw,
+		snapped: false
+	};
+	const rawScreen = toScreen(raw, camera, screenSize);
+	let best = {
+		point: raw,
+		snapped: false
+	};
 	let bestPx = snapPixels;
-	for (const idx of indices) {
-		if (idx >= pos.count) continue;
-		const world = new three.Vector3().fromBufferAttribute(pos, idx).applyMatrix4(obj.matrixWorld);
-		const px = toScreen(world).distanceTo(rawScreen);
+	for (const local of candidates) {
+		const world = local.applyMatrix4(hit.object.matrixWorld);
+		const px = toScreen(world, camera, screenSize).distanceTo(rawScreen);
 		if (px < bestPx) {
 			bestPx = px;
-			best = world;
+			best = {
+				point: world,
+				snapped: true
+			};
 		}
 	}
 	return best;
 }
+/** Snap a raycast hit to the nearest geometry vertex within `snapPixels` on screen, else the raw hit point. */
+function snapToVertex(hit, camera, screenSize, snapPixels) {
+	return snapHit(hit, camera, screenSize, snapPixels).point;
+}
 function createMeasureTool(deps) {
 	const { canvas, scene, getActiveCamera, getViewTarget, labelLayer, options = {} } = deps;
+	const requestRender = deps.requestRender ?? (() => {});
 	const snapPixels = options.snapPixels ?? DEFAULT_SNAP_PIXELS;
 	const color = new three.Color(options.color ?? DEFAULT_COLOR);
-	const fmt = makeFormatter(options.displayUnit);
-	const defaultFormat = (d, delta) => `${fmt(d)}\nΔx ${fmt(delta.x)}  Δy ${fmt(delta.y)}  Δz ${fmt(delta.z)}`;
-	const format = options.format ?? defaultFormat;
+	const format = options.format ?? makeDefaultFormat(makeFormatter(options.displayUnit));
 	const raycaster = new three.Raycaster();
 	const pointer = new three.Vector2();
 	let enabled = false;
-	const points = [];
-	const markers = [];
-	let line = null;
-	let label = null;
+	let start = null;
+	const measurements = [];
 	const markerMaterial = new three.PointsMaterial({
 		color,
 		size: 8,
 		sizeAttenuation: false,
 		depthTest: false
 	});
-	const hoverMaterial = new three.PointsMaterial({
+	const hoverSnappedMaterial = new three.PointsMaterial({
+		color,
+		size: 12,
+		sizeAttenuation: false,
+		depthTest: false
+	});
+	const hoverFreeMaterial = new three.PointsMaterial({
 		color,
-		size: 11,
+		size: 7,
 		sizeAttenuation: false,
 		depthTest: false,
 		transparent: true,
-		opacity: .5
+		opacity: .6
 	});
-	let hoverMarker = null;
-	const showHover = (p) => {
-		if (!p) {
-			if (hoverMarker) hoverMarker.visible = false;
-			return;
-		}
-		if (!hoverMarker) {
-			const geometry = new three.BufferGeometry();
-			geometry.setAttribute("position", new three.Float32BufferAttribute([
-				0,
-				0,
-				0
-			], 3));
-			hoverMarker = new three.Points(geometry, hoverMaterial);
-			hoverMarker.renderOrder = 1e3;
-			hoverMarker.userData.id = "measure";
-			hoverMarker.raycast = () => {};
-			scene.add(hoverMarker);
-		}
-		hoverMarker.position.copy(p);
-		hoverMarker.visible = true;
+	const tag = (object, renderOrder) => {
+		object.renderOrder = renderOrder;
+		object.userData.id = "measure";
+		object.raycast = () => {};
+		object.frustumCulled = false;
+		return object;
 	};
-	const makeMarker = (p) => {
+	const makePoints = (...ps) => {
 		const geometry = new three.BufferGeometry();
-		geometry.setAttribute("position", new three.Float32BufferAttribute([
+		geometry.setAttribute("position", new three.Float32BufferAttribute(ps.flatMap((p) => [
 			p.x,
 			p.y,
 			p.z
-		], 3));
-		const marker = new three.Points(geometry, markerMaterial);
-		marker.renderOrder = 999;
-		marker.userData.id = "measure";
-		marker.raycast = () => {};
-		scene.add(marker);
-		return marker;
+		]), 3));
+		const points = tag(new three.Points(geometry, markerMaterial), RENDER_ORDER_MARKER);
+		scene.add(points);
+		return points;
 	};
-	const clear = () => {
-		points.length = 0;
-		markers.forEach((m) => {
-			m.geometry.dispose();
-			m.removeFromParent();
-		});
-		markers.length = 0;
-		if (line) {
-			line.geometry.dispose();
-			line.material.dispose();
-			line.removeFromParent();
-			line = null;
-		}
-		label?.remove();
-		label = null;
-	};
-	const drawMeasurement = () => {
-		if (points.length !== 2) return;
-		const [a, b] = points;
+	const makeLine = (a, b, opacity = 1) => {
 		const geometry = new three_addons_lines_LineGeometry_js.LineGeometry();
 		geometry.setPositions([
 			a.x,
@@ -1800,33 +2145,102 @@ function createMeasureTool(deps) {
 			b.y,
 			b.z
 		]);
-		const material = new three_addons_lines_LineMaterial_js.LineMaterial({ color });
+		const material = new three_addons_lines_LineMaterial_js.LineMaterial({
+			color,
+			transparent: opacity < 1,
+			opacity
+		});
 		material.linewidth = 2;
 		material.depthTest = false;
-		line = new three_addons_lines_Line2_js.Line2(geometry, material);
-		line.renderOrder = 998;
-		line.userData.id = "measure";
-		line.raycast = () => {};
+		const line = tag(new three_addons_lines_Line2_js.Line2(geometry, material), RENDER_ORDER_LINE);
 		scene.add(line);
-		const mid = a.clone().add(b).multiplyScalar(.5);
+		return line;
+	};
+	const moveLine = (line, a, b) => {
+		const buffer = line.geometry.attributes.instanceStart.data;
+		buffer.array.set([
+			a.x,
+			a.y,
+			a.z,
+			b.x,
+			b.y,
+			b.z
+		]);
+		buffer.needsUpdate = true;
+	};
+	const disposeLine = (line) => {
+		line.geometry.dispose();
+		line.material.dispose();
+		line.removeFromParent();
+	};
+	const disposePoints = (points) => {
+		points.geometry.dispose();
+		points.removeFromParent();
+	};
+	const labelText = (a, b) => {
 		const delta = new three.Vector3(Math.abs(b.x - a.x), Math.abs(b.y - a.y), Math.abs(b.z - a.z));
-		label = labelLayer.addLabel(format(a.distanceTo(b), delta), mid, options.labelClassName);
+		return format(a.distanceTo(b), delta);
+	};
+	const midpoint = (a, b) => a.clone().add(b).multiplyScalar(.5);
+	let hoverMarker = null;
+	let rubberBand = null;
+	let rubberLabel = null;
+	const hidePreview = () => {
+		if (hoverMarker) hoverMarker.visible = false;
+		if (rubberBand) rubberBand.visible = false;
+		rubberLabel?.remove();
+		rubberLabel = null;
+	};
+	const showPreview = (snap) => {
+		if (!snap) {
+			hidePreview();
+			return;
+		}
+		if (!hoverMarker) {
+			hoverMarker = makePoints(new three.Vector3());
+			hoverMarker.renderOrder = RENDER_ORDER_HOVER;
+		}
+		hoverMarker.material = snap.snapped ? hoverSnappedMaterial : hoverFreeMaterial;
+		hoverMarker.position.copy(snap.point);
+		hoverMarker.visible = true;
+		if (!start) {
+			if (rubberBand) rubberBand.visible = false;
+			rubberLabel?.remove();
+			rubberLabel = null;
+			return;
+		}
+		if (!rubberBand) rubberBand = makeLine(start.point, snap.point, .7);
+		moveLine(rubberBand, start.point, snap.point);
+		rubberBand.visible = true;
+		const text = labelText(start.point, snap.point);
+		const mid = midpoint(start.point, snap.point);
+		if (rubberLabel) {
+			rubberLabel.setText(text);
+			rubberLabel.setPosition(mid);
+		} else rubberLabel = labelLayer.addLabel(text, mid, options.labelClassName);
 	};
-	const pickPoint = (event) => {
+	const pick = (event) => {
 		const rect = canvas.getBoundingClientRect();
-		pointer.x = (event.clientX - rect.left) / rect.width * 2 - 1;
-		pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+		const cursorX = event.clientX - rect.left;
+		const cursorY = event.clientY - rect.top;
+		pointer.x = cursorX / rect.width * 2 - 1;
+		pointer.y = -(cursorY / rect.height) * 2 + 1;
 		const camera = getActiveCamera();
 		raycaster.setFromCamera(pointer, camera);
-		const threshold = pickThreshold(camera, getViewTarget?.());
+		const threshold = pickThreshold(camera, getViewTarget?.()) * 2;
 		raycaster.params.Line.threshold = threshold;
 		raycaster.params.Points.threshold = threshold;
-		const hits = raycaster.intersectObjects(scene.children, true).filter((i) => i.object.userData.id !== "measure" && i.object.userData.id !== "grid");
-		if (hits.length === 0) return null;
-		return snapToVertex(hits[0], camera, {
+		raycaster.params.Line2 = { threshold: snapPixels / 2 };
+		const screen = {
 			width: rect.width,
 			height: rect.height
-		}, snapPixels);
+		};
+		const cursor = new three.Vector2(cursorX, cursorY);
+		for (const hit of raycastVisible(scene, raycaster)) {
+			if (!(hit.object.isMesh && hit.face != null) && toScreen(hitPoint(hit), camera, screen).distanceTo(cursor) > snapPixels) continue;
+			return snapHit(hit, camera, screen, snapPixels);
+		}
+		return null;
 	};
 	let pendingMove = null;
 	let moveRaf = 0;
@@ -1846,42 +2260,104 @@ function createMeasureTool(deps) {
 			const latest = pendingMove;
 			pendingMove = null;
 			if (!enabled || !latest) return;
-			showHover(pickPoint(latest));
+			showPreview(pick(latest));
+			requestRender();
 		});
 	};
+	const handleLeave = () => {
+		cancelPendingMove();
+		hidePreview();
+		requestRender();
+	};
+	const dropStart = () => {
+		if (!start) return;
+		disposePoints(start.marker);
+		start = null;
+	};
+	const clear = () => {
+		dropStart();
+		for (const m of measurements) {
+			disposePoints(m.markers);
+			disposeLine(m.line);
+			m.label.remove();
+		}
+		measurements.length = 0;
+		hidePreview();
+		requestRender();
+	};
+	const cancel = () => {
+		if (start) {
+			dropStart();
+			hidePreview();
+			requestRender();
+		} else clear();
+	};
 	const handleClick = (event) => {
 		if (!enabled) return false;
-		if (points.length === 2) clear();
-		const point = pickPoint(event);
-		if (point === null) return true;
-		points.push(point);
-		markers.push(makeMarker(point));
-		if (points.length === 2) drawMeasurement();
+		cancelPendingMove();
+		const snap = pick(event);
+		if (!snap) return true;
+		if (!start) start = {
+			point: snap.point,
+			marker: makePoints(snap.point)
+		};
+		else if (!snap.point.equals(start.point)) {
+			const a = start.point;
+			const b = snap.point;
+			dropStart();
+			measurements.push({
+				markers: makePoints(a, b),
+				line: makeLine(a, b),
+				label: labelLayer.addLabel(labelText(a, b), midpoint(a, b), options.labelClassName)
+			});
+		}
+		showPreview(snap);
+		requestRender();
 		return true;
 	};
+	const handleKey = (event) => {
+		if (event.key !== "Escape") return;
+		if (event.target?.closest?.("input, textarea, select, [contenteditable]")) return;
+		cancel();
+	};
+	let previousCursor = "";
+	let cancelWarm = null;
+	const setEnabled = (value) => {
+		if (value === enabled) return;
+		enabled = value;
+		if (value) {
+			previousCursor = canvas.style.cursor;
+			canvas.style.cursor = "crosshair";
+			canvas.addEventListener("mouseleave", handleLeave);
+			window.addEventListener("keydown", handleKey);
+			cancelWarm = warmPickIndex(scene);
+		} else {
+			canvas.style.cursor = previousCursor;
+			canvas.removeEventListener("mouseleave", handleLeave);
+			window.removeEventListener("keydown", handleKey);
+			cancelWarm?.();
+			cancelWarm = null;
+			cancelPendingMove();
+			clear();
+		}
+	};
 	return {
-		setEnabled: (value) => {
-			enabled = value;
-			if (!value) {
-				cancelPendingMove();
-				clear();
-				showHover(null);
-			}
-		},
+		setEnabled,
 		isEnabled: () => enabled,
 		handleClick,
 		handleMove,
+		cancel,
 		clear,
 		dispose: () => {
-			cancelPendingMove();
+			setEnabled(false);
 			clear();
-			if (hoverMarker) {
-				hoverMarker.geometry.dispose();
-				hoverMarker.removeFromParent();
-				hoverMarker = null;
-			}
+			if (hoverMarker) disposePoints(hoverMarker);
+			if (rubberBand) disposeLine(rubberBand);
+			hoverMarker = null;
+			rubberBand = null;
 			markerMaterial.dispose();
-			hoverMaterial.dispose();
+			hoverSnappedMaterial.dispose();
+			hoverFreeMaterial.dispose();
 		}
 	};
 }
@@ -2304,7 +2780,7 @@ function createViewGizmo(deps) {
 	};
 }
 // src/render/scene-setup/animation-loop.ts
-function createAnimationLoop(renderer, scene, camera, getActiveCamera, cameraController, controls, getCanvasSize, getPixelRatio, onFrame, grid, gizmo, getRenderPipeline, labelLayer, nearFitter, onDemand = true) {
+function createAnimationLoop(renderer, scene, camera, getActiveCamera, cameraController, controls, getCanvasSize, getPixelRatio, onFrame, grid, gizmo, getRenderPipeline, labelLayer, nearFitter, onDemand = true, refiner) {
 	let animationId = null;
 	let lastTime = performance.now();
 	let renderRequested = true;
@@ -2350,17 +2826,22 @@ function createAnimationLoop(renderer, scene, camera, getActiveCamera, cameraCon
 			invalidate();
 		}
 	};
+	const drawOverlays = (activeCamera) => {
+		if (labelLayer) labelLayer.render(scene, activeCamera);
+		if (gizmo) gizmo.render(renderer);
+	};
 	const drawFrame = (activeCamera, delta) => {
 		const renderPipeline = getRenderPipeline?.();
 		if (renderPipeline) {
 			renderPipeline.setCamera(activeCamera);
 			renderPipeline.render(delta);
 		} else renderer.render(scene, activeCamera);
-		if (labelLayer) labelLayer.render(scene, activeCamera);
-		if (gizmo) gizmo.render(renderer);
+		drawOverlays(activeCamera);
 	};
 	const renderNow = () => {
-		drawFrame(getActiveCamera(), 0);
+		const activeCamera = getActiveCamera();
+		if (refiner?.present()) drawOverlays(activeCamera);
+		else drawFrame(activeCamera, 0);
 	};
 	const animate = function() {
 		animationId = requestAnimationFrame(animate);
@@ -2374,9 +2855,20 @@ function createAnimationLoop(renderer, scene, camera, getActiveCamera, cameraCon
 		onFrame?.(delta);
 		const activeCamera = getActiveCamera();
 		if (onDemand) {
-			if (!(renderRequested || cameraMoved(activeCamera) || now - lastRenderTime >= IDLE_REPAINT_INTERVAL_MS)) return;
-			renderRequested = false;
+			const moved = cameraMoved(activeCamera);
+			if (moved) refiner?.moving(delta * 1e3);
+			const changed = renderRequested || moved;
+			if (!changed && refiner?.wants(now)) {
+				refiner.step(activeCamera);
+				drawOverlays(activeCamera);
+				return;
+			}
+			const repaint = now - lastRenderTime >= IDLE_REPAINT_INTERVAL_MS;
+			if (!changed && !repaint) return;
 			lastRenderTime = now;
+			if (!changed && refiner?.isHolding()) return;
+			renderRequested = false;
+			refiner?.reset(now);
 		}
 		drawFrame(activeCamera, delta);
 	};
@@ -2493,6 +2985,7 @@ function pickLightSources(sources, maxLights = DEFAULT_MAX_LIGHTS) {
 function createEmissiveLights(scene) {
 	const lights = [];
 	const silenced = /* @__PURE__ */ new Set();
+	const offset = new three.Vector3();
 	const addLight = (shadowed) => {
 		const key = new three.PointLight(16777215, 1, 0, 2);
 		const bounce = new three.PointLight(16777215, 1, 0, 1);
@@ -2504,7 +2997,9 @@ function createEmissiveLights(scene) {
 		}
 		const pair = {
 			key,
-			bounce
+			bounce,
+			home: new three.Vector3(),
+			size: new three.Vector3()
 		};
 		lights.push(pair);
 		scene.add(key, bounce);
@@ -2545,12 +3040,14 @@ function createEmissiveLights(scene) {
 		};
 		const sources = pickLightSources(sourcesFrom(parts, maxLights), maxLights);
 		sources.forEach((source, index) => {
-			const { key, bounce } = lights[index] ?? addLight(index < MAX_SHADOWED_LIGHTS);
+			const { key, bounce, home, size } = lights[index] ?? addLight(index < MAX_SHADOWED_LIGHTS);
 			const intensity = source.light ?? source.strength * INTENSITY_PER_STRENGTH * radius * radius;
 			key.color.copy(source.color);
 			const spread = source.bounds.getSize(new three.Vector3()).length() / 2 / radius;
 			key.intensity = !source.light && spread > MAX_POINT_SOURCE_SPREAD ? 0 : intensity;
 			source.bounds.getCenter(key.position);
+			home.copy(key.position);
+			source.bounds.getSize(size);
 			bounce.color.copy(source.color);
 			bounce.intensity = intensity * BOUNCE_SHARE / radius;
 			bounce.position.copy(key.position);
@@ -2571,8 +3068,16 @@ function createEmissiveLights(scene) {
 		}
 		silence(parts, sources);
 	};
+	const place = (position) => {
+		for (const { key, home, size } of lights) {
+			key.position.copy(position(home, size));
+			if (key.castShadow) key.shadow.needsUpdate = true;
+		}
+	};
 	return {
 		sync,
+		jitter: (index) => place((home, size) => offset.set(halton(index, 2) - .5, halton(index, 3) - .5, halton(index, 5) - .5).multiply(size).add(home)),
+		settle: () => place((home) => home),
 		dispose: () => sync(false)
 	};
 }
@@ -2750,6 +3255,8 @@ function createAppearanceController(params) {
 		setAoIntensity,
 		setLook,
 		syncEmissiveLights,
+		jitterEmissiveLights: emissiveLights.jitter,
+		settleEmissiveLights: emissiveLights.settle,
 		getMaterialAppearance: () => require_gpu_dispose.materialAppearanceForLook(activeLook)
 	};
 }
@@ -2908,7 +3415,9 @@ var EdgeDetectionPass = class extends three_addons_postprocessing_Pass_js.Pass {
 		renderer.setClearColor(7829503, 1);
 		renderer.autoClear = true;
 		this.scene.overrideMaterial = this.normalMaterial;
+		const showGlass = require_gpu_dispose.hideGlass(this.scene);
 		renderer.render(this.scene, this.camera);
+		showGlass();
 		this.scene.overrideMaterial = previousOverride;
 		renderer.setClearColor(previousClearColor, previousClearAlpha);
 		renderer.autoClear = previousAutoClear;
@@ -2959,6 +3468,68 @@ const HDR_CLAMP_SHADER = {
 			gl_FragColor = vec4(safe(color.r), safe(color.g), safe(color.b), color.a);
 		}`
 };
+const AVERAGE_SHADER = {
+	vertexShader: `
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position.xy, 0.0, 1.0);
+		}`,
+	fragmentShader: `
+		uniform sampler2D tFrame;
+		varying vec2 vUv;
+		void main() {
+			gl_FragColor = texture2D(tFrame, vUv);
+		}`
+};
+/**
+* Keeps the running average of the composer's finished frames. They're already tone mapped, which
+* suits what gets averaged here: shadows and edges, not HDR highlights. Half float, because 32
+* frames blended into 8 bits would band in a soft shadow.
+*/
+function createAccumulator(renderer) {
+	const target = new three.WebGLRenderTarget(1, 1, {
+		type: three.HalfFloatType,
+		depthBuffer: false
+	});
+	const material = new three.ShaderMaterial({
+		...AVERAGE_SHADER,
+		uniforms: { tFrame: { value: null } },
+		depthTest: false,
+		depthWrite: false,
+		toneMapped: false,
+		blending: three.CustomBlending,
+		blendSrc: three.ConstantAlphaFactor,
+		blendDst: three.OneMinusConstantAlphaFactor
+	});
+	const quad = new three_addons_postprocessing_Pass_js.FullScreenQuad(material);
+	const draw = (texture, weight) => {
+		material.uniforms.tFrame.value = texture;
+		material.blendAlpha = weight;
+		const autoClear = renderer.autoClear;
+		renderer.autoClear = false;
+		quad.render(renderer);
+		renderer.autoClear = autoClear;
+	};
+	const present = () => {
+		renderer.setRenderTarget(null);
+		draw(target.texture, 1);
+	};
+	return {
+		add: (frame, index, width, height) => {
+			if (target.width !== width || target.height !== height) target.setSize(width, height);
+			renderer.setRenderTarget(target);
+			draw(frame, 1 / (index + 1));
+			present();
+		},
+		present,
+		dispose: () => {
+			target.dispose();
+			material.dispose();
+			quad.dispose();
+		}
+	};
+}
 /**
 * Without MSAA a sub-pixel feature (a sheet's bright hem edge) comes out as a dashed line, which
 * SMAA can't rebuild. At 2× DPR each CSS pixel already holds four samples, and 4× MSAA on top
@@ -2967,6 +3538,20 @@ const HDR_CLAMP_SHADER = {
 function msaaSamplesFor(pixelRatio) {
 	return pixelRatio >= 2 ? 0 : 4;
 }
+function skipGlass(pass) {
+	const hooks = pass;
+	const overrideVisibility = hooks._overrideVisibility.bind(pass);
+	const restoreVisibility = hooks._restoreVisibility.bind(pass);
+	let showGlass = () => {};
+	hooks._overrideVisibility = () => {
+		overrideVisibility();
+		showGlass = require_gpu_dispose.hideGlass(pass.scene);
+	};
+	hooks._restoreVisibility = () => {
+		showGlass();
+		restoreVisibility();
+	};
+}
 function createRenderPipeline(renderer, scene, camera, width, height, options) {
 	const sceneTarget = new three.WebGLRenderTarget(width, height, { type: three.HalfFloatType });
 	const composer = new three_addons_postprocessing_EffectComposer_js.EffectComposer(renderer, sceneTarget);
@@ -2983,6 +3568,7 @@ function createRenderPipeline(renderer, scene, camera, width, height, options) {
 		gtaoPass = new three_addons_postprocessing_GTAOPass_js.GTAOPass(scene, camera, width, height);
 		gtaoPass.blendIntensity = options.aoIntensity ?? 1;
 		gtaoPass.updateGtaoMaterial({ screenSpaceRadius: true });
+		skipGlass(gtaoPass);
 		composer.addPass(gtaoPass);
 	}
 	let clampPass = null;
@@ -3003,6 +3589,7 @@ function createRenderPipeline(renderer, scene, camera, width, height, options) {
 	composer.addPass(outputPass);
 	renderer.toneMapping = options.toneMapping;
 	renderer.toneMappingExposure = options.toneMappingExposure;
+	let accumulator = null;
 	const aoPixelRatioCap = options.aoPixelRatio ?? 1;
 	let aoScale = 1;
 	if (gtaoPass) {
@@ -3041,8 +3628,23 @@ function createRenderPipeline(renderer, scene, camera, width, height, options) {
 			edgePass.enabled = enabled;
 		},
 		edgeDetectionEnabled: () => edgePass.enabled,
+		accumulate: (index) => {
+			composer.renderToScreen = false;
+			renderFrame(0);
+			composer.renderToScreen = true;
+			accumulator ??= createAccumulator(renderer);
+			const { texture, width, height } = composer.readBuffer;
+			accumulator.add(texture, index, width, height);
+		},
+		presentAccumulated: () => accumulator?.present(),
+		setAoWeight: (weight) => {
+			if (!gtaoPass) return;
+			gtaoPass.enabled = weight > 0;
+			gtaoPass.blendIntensity = (options.aoIntensity ?? 1) * weight;
+		},
 		dispose: () => {
 			composer.dispose();
+			accumulator?.dispose();
 			gtaoPass?.dispose();
 			clampPass?.dispose();
 			bloomPass?.dispose();
@@ -3604,6 +4206,8 @@ const initThree = function(canvas, options) {
 		canvas,
 		scene,
 		getActiveCamera,
+		getViewTarget: () => controls.target,
+		requestRender: () => requestRender(),
 		labelLayer,
 		options: {
 			snapPixels: config.measure.snapPixels,
@@ -3704,7 +4308,23 @@ const initThree = function(canvas, options) {
 		fullPixelRatio,
 		requestRender: () => requestRender()
 	});
-	const { animate, dispose: disposeAnimation, invalidate, renderNow } = createAnimationLoop(renderer, scene, camera, getActiveCamera, cameraController, controls, getCanvasSize, () => config.render.pixelRatio, config.events.onFrame, grid, gizmo, () => pipeline.get(), labelLayer, nearFitter, config.render.onDemand ?? true);
+	let restoreSun;
+	const refiner = createIdleRefiner({
+		scene,
+		renderer,
+		getPipeline: () => pipeline.get(),
+		frames: config.render.idleRefineFrames,
+		lightOrbitFrameMs: config.render.lightOrbitFrameMs,
+		jitterLights: (index) => {
+			if (sunlight) restoreSun = jitterSun(sunlight, index);
+			appearance.jitterEmissiveLights(index);
+		},
+		restoreLights: () => {
+			restoreSun?.();
+			appearance.settleEmissiveLights();
+		}
+	});
+	const { animate, dispose: disposeAnimation, invalidate, renderNow } = createAnimationLoop(renderer, scene, camera, getActiveCamera, cameraController, controls, getCanvasSize, () => config.render.pixelRatio, config.events.onFrame, grid, gizmo, () => pipeline.get(), labelLayer, nearFitter, config.render.onDemand ?? true, refiner);
 	requestRender = invalidate;
 	animate();
 	scene.up.set(sceneUp.x, sceneUp.y, sceneUp.z);