@wave3d/core 0.1.0

package/dist/renderer/WaveRenderer.js

@@ -0,0 +1,1118 @@
+import { ensureStudioConfig } from "../config/model.js";
+import { fragmentShader, lineFragmentShader, postFragmentShader, postVertexShader, vertexShader } from "./shaders.js";
+import { WaveGeometry } from "./WaveGeometry.js";
+import { PALETTE_MAPS, buildBackgroundGradientCanvas, buildBackgroundImageCanvas, buildBackgroundMeshCanvas, buildPaletteTexture, canvasToTexture, configurePaletteTexture, drawBackgroundMediaFrame, loadPaletteImage, paletteMapCanvas, paletteSignature } from "./palette.js";
+import { buildHeroPaletteCanvas, buildHeroPaletteTexture } from "./heroPalette.js";
+import * as THREE from "three";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
+import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
+import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
+//#region src/renderer/WaveRenderer.ts
+const BASE_SEGMENTS = 220;
+/** Reference frame (world units) the orthographic camera fills at cameraZoom 1. The wave is
+*  framed by COVERING this FRAME_W × FRAME_H rectangle (centred on cameraTarget) into the canvas
+*  — scaled to fill both dimensions, cropping the aspect overflow — so a given cameraZoom /
+*  cameraTarget frames the wave the SAME at any canvas size or aspect (only the cropped margin
+*  differs). FRAME_H = FRAME_W / (16/9) makes the reference a 16:9 rectangle; for canvases wider
+*  than that the width binds, narrower ones zoom in to fill instead of
+*  showing empty bands. This is what makes a saved preset reproduce on anyone's screen. */
+const FRAME_W = 1333;
+const FRAME_H = 750;
+/**
+* Per-wave 2D palette texture (+ optional looping video). One instance per wave, so each
+* wave carries its own palette. Guarded by a signature so it only rebuilds when that wave's
+* palette actually changes (not every refresh).
+*/
+var WavePalette = class {
+	makeVideo;
+	onVideoReady;
+	texture;
+	sig = "";
+	video;
+	videoUrl = "";
+	failedUrl = "";
+	constructor(makeVideo, onVideoReady) {
+		this.makeVideo = makeVideo;
+		this.onVideoReady = onVideoReady;
+	}
+	/** Rebuild this wave's palette texture from its config (video / custom image / stops /
+	*  built-in map / hero LUT) and point the wave's palette uniforms at it. */
+	apply(cfg, uniforms) {
+		const videoUrl = cfg.paletteVideoUrl;
+		const url = cfg.paletteImageUrl;
+		const source = cfg.paletteSource ?? "hero";
+		let sig;
+		let build;
+		if (videoUrl) {
+			this.ensureVideo(videoUrl);
+			if (this.video?.readyState && this.video.readyState >= 2) {
+				sig = "video|" + videoUrl;
+				build = () => configurePaletteTexture(new THREE.VideoTexture(this.video));
+			} else {
+				sig = "video-loading|" + videoUrl;
+				build = () => buildHeroPaletteTexture();
+			}
+		} else if (url) {
+			this.clearVideo();
+			sig = "url|" + url;
+			build = () => loadPaletteImage(url);
+		} else if (source === "stops") {
+			this.clearVideo();
+			const opts = {
+				stops: cfg.palette,
+				edgeColor: cfg.paletteEdgeColor ?? "#8e9dff",
+				edgeAmount: cfg.paletteEdgeAmount ?? .3
+			};
+			sig = "stops|" + paletteSignature(opts);
+			build = () => buildPaletteTexture(opts);
+		} else if (PALETTE_MAPS[source]) {
+			this.clearVideo();
+			sig = "map|" + source;
+			build = () => canvasToTexture(paletteMapCanvas(PALETTE_MAPS[source]));
+		} else {
+			this.clearVideo();
+			sig = "hero";
+			build = () => buildHeroPaletteTexture();
+		}
+		if (sig !== this.sig || !this.texture) {
+			this.texture?.dispose();
+			this.texture = build();
+			this.sig = sig;
+		}
+		uniforms.uPalette.value = this.texture;
+		uniforms.uUsePalette.value = cfg.usePaletteTexture === false ? 0 : 1;
+		uniforms.uPaletteRaw.value = 1;
+	}
+	/** Play/pause this wave's palette video with the render loop. */
+	syncPlayback(cfg, running) {
+		const v = this.video;
+		if (!v) return;
+		if (running && cfg.gradientType !== "mesh" && cfg.usePaletteTexture !== false && !!cfg.paletteVideoUrl) v.play().catch(() => {});
+		else v.pause();
+	}
+	ensureVideo(url) {
+		if (this.videoUrl === url || this.failedUrl === url) return;
+		this.clearVideo();
+		this.videoUrl = url;
+		const video = this.makeVideo(url);
+		video.addEventListener("loadeddata", () => {
+			this.video = video;
+			this.failedUrl = "";
+			this.sig = "";
+			this.onVideoReady();
+		}, { once: true });
+		video.addEventListener("error", () => {
+			this.failedUrl = url;
+			this.sig = "";
+			this.onVideoReady();
+		}, { once: true });
+		this.video = video;
+		video.load();
+	}
+	clearVideo() {
+		if (this.video) {
+			this.video.pause();
+			this.video.removeAttribute("src");
+			this.video.load();
+		}
+		this.video = void 0;
+		this.videoUrl = "";
+	}
+	dispose() {
+		this.texture?.dispose();
+		this.texture = void 0;
+		this.clearVideo();
+		this.failedUrl = "";
+	}
+};
+const HEX_SCRATCH = new THREE.Color();
+/** Convert an sRGB hex string to a linear-space RGB vector (three's ColorManagement does the
+*  sRGB→linear conversion on parse). Exported for the studio subclass's live light-uniform push. */
+function hexToLinearVec3(hex, target) {
+	const c = HEX_SCRATCH.set(hex);
+	return target.set(c.r, c.g, c.b);
+}
+/**
+* Renders a gradient "wave of light" from a {@link StudioConfig}. Framework-agnostic:
+* it needs only a DOM container and a config. The studio mutates the config in
+* place and calls `refresh()` / `rebuild()`.
+*/
+var WaveRenderer = class {
+	renderer;
+	scene = new THREE.Scene();
+	camera;
+	group = new THREE.Group();
+	composer;
+	postPass;
+	/** Optional bloom pass — created lazily when bloomStrength first goes >0, removed at 0. */
+	bloomPass;
+	container;
+	respectReducedMotion;
+	skipIntroRamp;
+	config;
+	waves = [];
+	backgroundTexture;
+	backgroundSig = "";
+	backgroundImage;
+	backgroundImageUrl = "";
+	failedBackgroundImageUrl = "";
+	backgroundVideo;
+	backgroundVideoUrl = "";
+	failedBackgroundVideoUrl = "";
+	backgroundVideoCanvas;
+	/** Authored default camera pose, for "Reset camera". */
+	homeCamPos = new THREE.Vector3();
+	homeCamTarget = new THREE.Vector3();
+	clipBox = new THREE.Box3();
+	clipSphere = new THREE.Sphere();
+	clipTmpA = new THREE.Vector3();
+	clipTmpB = new THREE.Vector3();
+	clock = new THREE.Clock();
+	time = 0;
+	rafId = 0;
+	running = false;
+	started = false;
+	visible = true;
+	pageVisible = true;
+	reducedMotion = false;
+	/** Intro ramp: eases animation time 0→1 over ~1s on load (when config.introRamp). */
+	introTimeRamp = 0;
+	resizeObserver;
+	intersectionObserver;
+	motionQuery;
+	capturing = false;
+	/** Fixed backing-buffer dimensions used by the studio's visible export frame. Embeds leave
+	*  this unset and continue to resize responsively with their container and device DPR. */
+	outputSize;
+	constructor(container, config, options = {}) {
+		this.container = container;
+		this.config = ensureStudioConfig(config);
+		this.respectReducedMotion = options.respectReducedMotion ?? true;
+		this.skipIntroRamp = options.skipIntroRamp ?? false;
+		this.renderer = new THREE.WebGLRenderer({
+			antialias: true,
+			alpha: true,
+			preserveDrawingBuffer: true,
+			powerPreference: "high-performance"
+		});
+		this.renderer.outputColorSpace = THREE.SRGBColorSpace;
+		this.renderer.setClearColor(0, 0);
+		container.appendChild(this.renderer.domElement);
+		this.renderer.domElement.addEventListener("webglcontextlost", this.onContextLost, false);
+		this.renderer.domElement.addEventListener("webglcontextrestored", this.onContextRestored, false);
+		this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 1e4);
+		this.camera.position.set(config.cameraPosition.x, config.cameraPosition.y, config.cameraPosition.z);
+		this.camera.zoom = config.cameraZoom ?? 1;
+		this.camera.lookAt(config.cameraTarget.x, config.cameraTarget.y, config.cameraTarget.z);
+		this.camera.updateProjectionMatrix();
+		this.homeCamPos.copy(this.camera.position);
+		this.homeCamTarget.set(config.cameraTarget.x, config.cameraTarget.y, config.cameraTarget.z);
+		this.scene.add(this.group);
+		this.composer = new EffectComposer(this.renderer);
+		this.composer.addPass(new RenderPass(this.scene, this.camera));
+		this.postPass = new ShaderPass({
+			uniforms: {
+				tDiffuse: { value: null },
+				uResolution: { value: new THREE.Vector2(1, 1) },
+				uBlurAmount: { value: config.blur },
+				uBlurSamples: { value: 6 },
+				uGrainAmount: { value: config.grain },
+				uTime: { value: 0 }
+			},
+			vertexShader: postVertexShader,
+			fragmentShader: postFragmentShader
+		});
+		this.composer.addPass(this.postPass);
+		this.composer.addPass(new OutputPass());
+		this.motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		this.reducedMotion = this.respectReducedMotion && this.motionQuery.matches;
+		this.motionQuery.addEventListener("change", this.onMotionChange);
+		document.addEventListener("visibilitychange", this.onVisibilityChange);
+		this.intersectionObserver = new IntersectionObserver((entries) => {
+			this.visible = entries[0]?.isIntersecting ?? true;
+			this.updateRunning();
+		}, { rootMargin: "100px" });
+		this.intersectionObserver.observe(container);
+		this.resizeObserver = new ResizeObserver(this.onResize);
+		this.resizeObserver.observe(container);
+		this.applyBackground();
+		this.buildWaves();
+		this.resize();
+	}
+	get segments() {
+		const q = this.config.quality / Math.sqrt(Math.max(1, this.config.waves.length));
+		return THREE.MathUtils.clamp(Math.round(BASE_SEGMENTS * q), 24, 360);
+	}
+	makeUniforms() {
+		const colors = [];
+		const colorPos = [];
+		for (let i = 0; i < 8; i++) {
+			colors.push(new THREE.Vector3(1, 1, 1));
+			colorPos.push(i / 7);
+		}
+		const meshPointPos = [];
+		const meshPointColor = [];
+		const meshPointInfluence = [];
+		for (let i = 0; i < 8; i++) {
+			meshPointPos.push(new THREE.Vector2(.5, .5));
+			meshPointColor.push(new THREE.Vector3(1, 1, 1));
+			meshPointInfluence.push(.65);
+		}
+		const lightPos = [];
+		const lightColor = [];
+		const lightIntensity = [];
+		for (let i = 0; i < 8; i++) {
+			lightPos.push(new THREE.Vector3());
+			lightColor.push(new THREE.Vector3(1, 1, 1));
+			lightIntensity.push(0);
+		}
+		const bandBounds = [];
+		const bandParams = [];
+		const bandParaPow = [];
+		for (let i = 0; i < 4; i++) {
+			bandBounds.push(new THREE.Vector4());
+			bandParams.push(new THREE.Vector4());
+			bandParaPow.push(0);
+		}
+		return {
+			uTime: { value: 0 },
+			uSpeed: { value: .05 },
+			uSeed: { value: 0 },
+			uDispFreqX: { value: .003234 },
+			uDispFreqZ: { value: .00799 },
+			uDispAmount: { value: 6.051 },
+			uDetailFreq: { value: .04 },
+			uDetailAmount: { value: 0 },
+			uTwFreqX: { value: -.055 },
+			uTwFreqY: { value: .077 },
+			uTwFreqZ: { value: -.518 },
+			uTwPowX: { value: 3.95 },
+			uTwPowY: { value: 5.85 },
+			uTwPowZ: { value: 6.33 },
+			uLoopSeconds: { value: 0 },
+			uColors: { value: colors },
+			uColorPos: { value: colorPos },
+			uColorCount: { value: 2 },
+			uGradType: { value: 0 },
+			uGradAngle: { value: 0 },
+			uGradShift: { value: .15 },
+			uMeshPointPos: { value: meshPointPos },
+			uMeshPointColor: { value: meshPointColor },
+			uMeshPointInfluence: { value: meshPointInfluence },
+			uMeshPointCount: { value: 0 },
+			uMeshSoftness: { value: .62 },
+			uPalette: { value: null },
+			uUsePalette: { value: 1 },
+			uPaletteRaw: { value: 1 },
+			uPaletteScale: { value: new THREE.Vector2(1, 1) },
+			uPaletteOffset: { value: new THREE.Vector2(0, 0) },
+			uPaletteRotation: { value: 0 },
+			uDebug: { value: 0 },
+			uSheen: { value: 1 },
+			uRoundness: { value: .35 },
+			uIridescence: { value: 0 },
+			uDepthTint: { value: 0 },
+			uDepthTintColor: { value: new THREE.Vector3() },
+			uHueShift: { value: 0 },
+			uContrast: { value: 1 },
+			uSaturation: { value: 1 },
+			uFiberCount: { value: 90 },
+			uFiberStrength: { value: .25 },
+			uTexture: { value: 0 },
+			uCreaseLight: { value: .15 },
+			uCreaseSharpness: { value: 2 },
+			uCreaseSoftness: { value: 1 },
+			uEdgeFade: { value: .06 },
+			uEdgeFeather: { value: .1 },
+			uOpacity: { value: 1 },
+			uSquared: { value: 1 },
+			uResolution: { value: new THREE.Vector2(1, 1) },
+			uAmbient: { value: .45 },
+			uNumLights: { value: 1 },
+			uLightPos: { value: lightPos },
+			uLightColor: { value: lightColor },
+			uLightIntensity: { value: lightIntensity },
+			uNumNoiseBands: { value: 0 },
+			uNoiseBandBounds: { value: bandBounds },
+			uNoiseBandParams: { value: bandParams },
+			uNoiseBandParaPow: { value: bandParaPow },
+			uLineAmount: { value: 425 },
+			uLineThickness: { value: 1 },
+			uLineDerivativePower: { value: .95 },
+			uMaxWidth: { value: 1232 },
+			uClearColor: { value: new THREE.Vector3(1, 1, 1) }
+		};
+	}
+	/** Vertex-shader #defines for a wave: TWIST_MOTION (per-wave animated twist wobble) and
+	*  LOOP_MOTION (scene-level seamless loop). Both select #ifdef-gated code paths; an empty
+	*  object compiles the default (linear-time) program. */
+	waveDefines(sc) {
+		const defines = {};
+		if (sc?.twistMotion) defines.TWIST_MOTION = "";
+		if ((this.config.loopSeconds ?? 0) > 0) defines.LOOP_MOTION = "";
+		if ((sc?.detailAmount ?? 0) !== 0) defines.DETAIL_OCTAVE = "";
+		if ((sc?.depthTint ?? 0) > 0) defines.DEPTH_TINT = "";
+		if ((sc?.edgeFeather ?? .1) !== .1) defines.EDGE_FEATHER = "";
+		return defines;
+	}
+	addWave() {
+		const geo = new WaveGeometry(this.segments);
+		const sc = this.config.waves[this.waves.length] ?? this.config.waves[0];
+		const material = new THREE.ShaderMaterial({
+			uniforms: this.makeUniforms(),
+			defines: this.waveDefines(sc),
+			vertexShader,
+			fragmentShader: sc?.theme === "wireframe" ? lineFragmentShader : fragmentShader,
+			transparent: true,
+			depthTest: true,
+			depthWrite: true,
+			side: THREE.DoubleSide
+		});
+		this.applyBlendMode(material, sc?.blendMode ?? "squared");
+		const mesh = new THREE.Mesh(geo.geometry, material);
+		mesh.frustumCulled = false;
+		this.group.add(mesh);
+		const palette = new WavePalette((url) => this.createLoopingVideo(url), () => {
+			this.updatePaletteTextures();
+			this.syncVideoPlayback();
+			if (!this.running) this.renderOnce();
+		});
+		this.waves.push({
+			mesh,
+			material,
+			geometry: geo,
+			palette
+		});
+	}
+	/**
+	* Apply config.blendMode to a material. "squared" (the default) is the hero blend:
+	* CustomBlending with AddEquation, src = SrcColorFactor, dst = ZeroFactor, so the
+	* framebuffer result is fragColor² — the squaring deepens the colours into the vivid
+	* hero look (without it the wave reads pastel). "additive"/"normal"/"multiply" are
+	* authoring overrides. Multiply uses Three's premultiplied-alpha path; the custom
+	* fragment shaders premultiply their output when Three injects PREMULTIPLIED_ALPHA.
+	* Returns true if material state changed (caller flags needsUpdate).
+	*/
+	applyBlendMode(material, mode) {
+		const squared = mode === "squared";
+		const blending = mode === "additive" ? THREE.AdditiveBlending : mode === "multiply" ? THREE.MultiplyBlending : THREE.NormalBlending;
+		const premultipliedAlpha = mode === "multiply" || squared;
+		material.uniforms.uSquared.value = squared ? 1 : 0;
+		if (material.blending === blending && material.premultipliedAlpha === premultipliedAlpha) return false;
+		material.blending = blending;
+		material.premultipliedAlpha = premultipliedAlpha;
+		return true;
+	}
+	disposeWaves() {
+		for (const s of this.waves) {
+			this.group.remove(s.mesh);
+			s.material.dispose();
+			s.geometry.dispose();
+			s.palette.dispose();
+		}
+		this.waves = [];
+	}
+	/**
+	* Reconcile the wave pool to `waveCount` WITHOUT tearing everything down:
+	* keep existing waves (so the compiled shader program is never deleted and
+	* re-compiled — that churn can crash some GPU drivers), add/remove only the
+	* delta, and resize each geometry to the current quality.
+	*/
+	buildWaves() {
+		const target = Math.max(1, this.config.waves.length);
+		while (this.waves.length > target) {
+			const s = this.waves.pop();
+			if (!s) break;
+			this.group.remove(s.mesh);
+			s.material.dispose();
+			s.geometry.dispose();
+			s.palette.dispose();
+		}
+		while (this.waves.length < target) this.addWave();
+		const segments = this.segments;
+		this.waves.forEach((s, i) => {
+			s.geometry.resize(segments);
+			s.mesh.renderOrder = i;
+		});
+		this.refresh();
+	}
+	/** Re-read per-frame-independent values from the (mutated) config. */
+	refresh() {
+		this.applyBackground();
+		this.applyPost();
+		if (!this.isCameraExternallyDriven()) {
+			const p = this.config.cameraPosition;
+			const tg = this.config.cameraTarget;
+			this.camera.position.set(p.x, p.y, p.z);
+			this.camera.lookAt(tg.x, tg.y, tg.z);
+		}
+		this.waves.forEach((wave, i) => {
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			const u = wave.material.uniforms;
+			if (this.applyBlendMode(wave.material, sc.blendMode)) wave.material.needsUpdate = true;
+			const wantDefines = this.waveDefines(sc);
+			const curDefines = wave.material.defines ?? {};
+			if (Object.keys(wantDefines).sort().join(",") !== Object.keys(curDefines).sort().join(",")) {
+				wave.material.defines = wantDefines;
+				wave.material.needsUpdate = true;
+			}
+			const wantFrag = sc.theme === "wireframe" ? lineFragmentShader : fragmentShader;
+			if (wave.material.fragmentShader !== wantFrag) {
+				wave.material.fragmentShader = wantFrag;
+				wave.material.needsUpdate = true;
+			}
+			const stops = [...sc.palette].sort((a, b) => a.pos - b.pos);
+			const colorCount = Math.max(1, Math.min(stops.length, 8));
+			const colors = u.uColors.value;
+			const colorPos = u.uColorPos.value;
+			for (let c = 0; c < 8; c++) {
+				const stop = stops[Math.min(c, colorCount - 1)] ?? {
+					color: "#ffffff",
+					pos: 0
+				};
+				hexToLinearVec3(stop.color, colors[c]);
+				colorPos[c] = stop.pos;
+			}
+			u.uColorCount.value = colorCount;
+			u.uGradType.value = sc.gradientType === "radial" ? 1 : sc.gradientType === "conic" ? 2 : sc.gradientType === "mesh" ? 3 : 0;
+			u.uGradAngle.value = (sc.gradientAngle ?? 0) * Math.PI / 180;
+			u.uGradShift.value = sc.gradientShift ?? 0;
+			const meshPoints = sc.meshGradientPoints.slice(0, 8);
+			const meshPointPos = u.uMeshPointPos.value;
+			const meshPointColor = u.uMeshPointColor.value;
+			const meshPointInfluence = u.uMeshPointInfluence.value;
+			for (let pointIndex = 0; pointIndex < 8; pointIndex++) {
+				const point = meshPoints[pointIndex] ?? meshPoints[meshPoints.length - 1];
+				if (!point) continue;
+				meshPointPos[pointIndex].set(point.x, point.y);
+				hexToLinearVec3(point.color, meshPointColor[pointIndex]);
+				meshPointInfluence[pointIndex] = point.influence;
+			}
+			u.uMeshPointCount.value = meshPoints.length;
+			u.uMeshSoftness.value = sc.meshGradientSoftness;
+			u.uPaletteScale.value.set(sc.paletteTextureScale?.x ?? 1, sc.paletteTextureScale?.y ?? 1);
+			u.uPaletteOffset.value.set(sc.paletteTextureOffset?.x ?? 0, sc.paletteTextureOffset?.y ?? 0);
+			u.uPaletteRotation.value = (sc.paletteTextureRotation ?? 0) * Math.PI / 180;
+			u.uHueShift.value = sc.hueShift;
+			u.uContrast.value = sc.colorContrast;
+			u.uSaturation.value = sc.colorSaturation;
+			u.uLineAmount.value = sc.lineAmount ?? 425;
+			u.uLineThickness.value = sc.lineThickness ?? 1;
+			u.uLineDerivativePower.value = sc.lineDerivativePower ?? .95;
+			u.uMaxWidth.value = sc.maxWidth ?? 1232;
+			hexToLinearVec3(this.config.background, u.uClearColor.value);
+			u.uFiberCount.value = sc.fiberCount;
+			u.uFiberStrength.value = sc.fiberStrength;
+			u.uTexture.value = sc.texture;
+			u.uCreaseLight.value = sc.creaseLight;
+			u.uCreaseSharpness.value = sc.creaseSharpness;
+			u.uCreaseSoftness.value = sc.creaseSoftness;
+			u.uSheen.value = sc.sheen ?? 1;
+			u.uRoundness.value = sc.roundness ?? .35;
+			u.uIridescence.value = sc.iridescence ?? 0;
+			u.uDepthTint.value = sc.depthTint ?? 0;
+			hexToLinearVec3(sc.depthTintColor ?? "#0a2540", u.uDepthTintColor.value);
+			u.uEdgeFade.value = sc.edgeFade;
+			u.uEdgeFeather.value = sc.edgeFeather ?? .1;
+			const lights = this.config.lights ?? [];
+			u.uAmbient.value = this.config.ambient ?? .45;
+			u.uNumLights.value = Math.min(lights.length, 8);
+			const lPos = u.uLightPos.value;
+			const lCol = u.uLightColor.value;
+			const lInt = u.uLightIntensity.value;
+			for (let li = 0; li < 8; li++) {
+				const light = lights[li];
+				if (light) {
+					lPos[li].set(light.position.x, light.position.y, light.position.z);
+					hexToLinearVec3(light.color, lCol[li]);
+					lInt[li] = light.intensity;
+				} else lInt[li] = 0;
+			}
+			const bands = sc.noiseBands ?? [];
+			u.uNumNoiseBands.value = Math.min(bands.length, 4);
+			const bBounds = u.uNoiseBandBounds.value;
+			const bParams = u.uNoiseBandParams.value;
+			const bPara = u.uNoiseBandParaPow.value;
+			for (let bi = 0; bi < 4; bi++) {
+				const band = bands[bi];
+				if (band) {
+					bBounds[bi].set(band.startX, band.endX, band.startY, band.endY);
+					bParams[bi].set(band.feather, band.strength, band.frequency, band.colorAttenuation);
+					bPara[bi] = band.parabolaPower;
+				}
+			}
+			u.uSpeed.value = sc.speed;
+			u.uSeed.value = sc.seed;
+			u.uLoopSeconds.value = this.config.loopSeconds ?? 0;
+			u.uDispFreqX.value = sc.displaceFrequency.x;
+			u.uDispFreqZ.value = sc.displaceFrequency.y;
+			u.uDispAmount.value = sc.displaceAmount;
+			u.uDetailFreq.value = sc.detailFrequency ?? .04;
+			u.uDetailAmount.value = sc.detailAmount ?? 0;
+			u.uTwFreqX.value = sc.twistFrequency.x;
+			u.uTwFreqY.value = sc.twistFrequency.y;
+			u.uTwFreqZ.value = sc.twistFrequency.z;
+			u.uTwPowX.value = sc.twistPower.x;
+			u.uTwPowY.value = sc.twistPower.y;
+			u.uTwPowZ.value = sc.twistPower.z;
+			wave.mesh.scale.set(sc.scale.x, sc.scale.y, sc.scale.z);
+			wave.mesh.rotation.set(THREE.MathUtils.degToRad(sc.rotation.x), THREE.MathUtils.degToRad(sc.rotation.y), THREE.MathUtils.degToRad(sc.rotation.z));
+			wave.mesh.position.set(sc.position.x, sc.position.y, sc.position.z);
+			u.uOpacity.value = sc.opacity;
+		});
+		this.updatePaletteTextures();
+		this.syncVideoPlayback();
+		this.group.scale.set(this.config.mirrorH ? -1 : 1, this.config.mirrorV ? -1 : 1, 1);
+		this.onAfterRefresh();
+		if (!this.running) this.renderOnce();
+	}
+	/** Point every wave's palette sampler at its own WavePalette texture (each rebuilt only
+	*  when that wave's palette actually changes — see WavePalette.apply). */
+	updatePaletteTextures() {
+		this.waves.forEach((wave, i) => {
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			wave.palette.apply(sc, wave.material.uniforms);
+		});
+	}
+	/** Dev: 0 = normal, 1 = visualise the crease value, 2 = visualise derivative normal. */
+	setDebug(v) {
+		for (const s of this.waves) s.material.uniforms.uDebug.value = v;
+		this.renderOnce();
+	}
+	/** Rebuild geometry + waves (call when waveCount or quality changes). */
+	rebuild() {
+		this.buildWaves();
+	}
+	applyBackground() {
+		if (this.config.transparentBackground) {
+			this.scene.background = null;
+			this.renderer.setClearColor(0, 0);
+			return;
+		}
+		const matte = new THREE.Color(this.config.background);
+		this.renderer.setClearColor(matte, 1);
+		if (this.config.backgroundMode === "color") {
+			this.applyColorBackground(matte);
+			return;
+		}
+		const { width, height } = this.backgroundCanvasSize(this.config.backgroundVideoUrl ? 2048 : 4096);
+		if (this.config.backgroundMode === "gradient") this.applyGradientBackground(width, height);
+		else this.applyImageBackground(matte, width, height);
+	}
+	applyColorBackground(matte) {
+		this.clearBackgroundVideo();
+		this.backgroundTexture?.dispose();
+		this.backgroundTexture = void 0;
+		this.backgroundSig = "";
+		this.scene.background = matte;
+	}
+	applyGradientBackground(width, height) {
+		this.clearBackgroundVideo();
+		const gradType = this.config.backgroundGradientType;
+		if (gradType === "mesh") {
+			const pts = this.config.backgroundMeshPoints ?? [];
+			const softness = this.config.backgroundMeshSoftness ?? .62;
+			const ptSig = pts.map((p) => `${p.color}@${p.x.toFixed(3)},${p.y.toFixed(3)},${p.influence.toFixed(3)}`).join(",");
+			const sig = [
+				"mesh",
+				softness.toFixed(3),
+				ptSig,
+				width,
+				height
+			].join("|");
+			if (sig !== this.backgroundSig || !this.backgroundTexture) {
+				const canvas = buildBackgroundMeshCanvas(pts, softness, width, height);
+				this.backgroundTexture?.dispose();
+				this.backgroundTexture = canvasToTexture(canvas);
+				this.backgroundSig = sig;
+			}
+			this.scene.background = this.backgroundTexture;
+			return;
+		}
+		const source = this.config.backgroundGradientSource ?? "stops";
+		const def = PALETTE_MAPS[source];
+		const stops = source !== "stops" && def?.kind === "gradient" && def.stops ? def.stops : this.config.backgroundPalette;
+		const stopSig = stops.map((stop) => `${stop.color}@${stop.pos.toFixed(3)}`).join(",");
+		const sig = [
+			"gradient",
+			source,
+			gradType,
+			this.config.backgroundGradientAngle,
+			stopSig,
+			width,
+			height
+		].join("|");
+		if (sig !== this.backgroundSig || !this.backgroundTexture) {
+			const canvas = buildBackgroundGradientCanvas({
+				stops,
+				type: gradType,
+				angle: this.config.backgroundGradientAngle,
+				width,
+				height
+			});
+			this.backgroundTexture?.dispose();
+			this.backgroundTexture = canvasToTexture(canvas);
+			this.backgroundSig = sig;
+		}
+		this.scene.background = this.backgroundTexture;
+	}
+	/** Image mode: a live video, a user-loaded image, or a built-in map. `matte` shows while an
+	*  async source is still loading. */
+	applyImageBackground(matte, width, height) {
+		const fit = this.config.backgroundImageFit ?? "cover";
+		const zoom = this.config.backgroundImageZoom ?? 1;
+		const position = this.config.backgroundImagePosition ?? {
+			x: 0,
+			y: 0
+		};
+		const videoUrl = this.config.backgroundVideoUrl;
+		const customUrl = this.config.backgroundImageUrl;
+		let source;
+		let sourceWidth;
+		let sourceHeight;
+		let sourceSig;
+		if (videoUrl) {
+			this.ensureBackgroundVideo(videoUrl);
+			if (!this.backgroundVideo || this.backgroundVideo.readyState < 2) {
+				this.scene.background = matte;
+				return;
+			}
+			source = this.backgroundVideo;
+			sourceWidth = this.backgroundVideo.videoWidth;
+			sourceHeight = this.backgroundVideo.videoHeight;
+			sourceSig = `video|${videoUrl}`;
+		} else if (customUrl) {
+			this.clearBackgroundVideo();
+			if (!this.backgroundImage || this.backgroundImageUrl !== customUrl || !this.backgroundImage.complete) {
+				this.loadBackgroundImage(customUrl);
+				this.scene.background = matte;
+				return;
+			}
+			source = this.backgroundImage;
+			sourceWidth = this.backgroundImage.naturalWidth;
+			sourceHeight = this.backgroundImage.naturalHeight;
+			sourceSig = `custom|${customUrl}`;
+		} else {
+			this.clearBackgroundVideo();
+			const imageSource = this.config.backgroundImageSource ?? "vaporwave";
+			const canvas = imageSource === "hero" ? buildHeroPaletteCanvas() : PALETTE_MAPS[imageSource]?.kind === "image" ? paletteMapCanvas(PALETTE_MAPS[imageSource], Math.max(width, height)) : null;
+			if (!canvas) {
+				this.scene.background = matte;
+				return;
+			}
+			source = canvas;
+			sourceWidth = canvas.width;
+			sourceHeight = canvas.height;
+			sourceSig = `map|${imageSource}`;
+		}
+		const sig = [
+			"image",
+			sourceSig,
+			fit,
+			zoom,
+			position.x,
+			position.y,
+			this.config.background,
+			width,
+			height
+		].join("|");
+		if (sig !== this.backgroundSig || !this.backgroundTexture) {
+			const canvas = buildBackgroundImageCanvas(source, sourceWidth, sourceHeight, width, height, fit, this.config.background, zoom, position.x, position.y);
+			this.backgroundTexture?.dispose();
+			this.backgroundTexture = canvasToTexture(canvas);
+			this.backgroundSig = sig;
+			this.backgroundVideoCanvas = videoUrl ? canvas : void 0;
+		}
+		this.scene.background = this.backgroundTexture;
+	}
+	backgroundCanvasSize(maxRequestedEdge = 4096) {
+		const rawWidth = this.outputSize?.width ?? Math.max(1, this.container.clientWidth);
+		const rawHeight = this.outputSize?.height ?? Math.max(1, this.container.clientHeight);
+		const maxEdge = Math.min(maxRequestedEdge, this.renderer.capabilities.maxTextureSize);
+		const scale = Math.min(1, maxEdge / Math.max(rawWidth, rawHeight));
+		return {
+			width: Math.max(1, Math.round(rawWidth * scale)),
+			height: Math.max(1, Math.round(rawHeight * scale))
+		};
+	}
+	loadBackgroundImage(url) {
+		if (this.backgroundImageUrl === url || this.failedBackgroundImageUrl === url) return;
+		this.backgroundImageUrl = url;
+		this.backgroundImage = void 0;
+		const image = new Image();
+		image.decoding = "async";
+		if (!url.startsWith("data:") && !url.startsWith("blob:")) image.crossOrigin = "anonymous";
+		image.addEventListener("load", () => {
+			if (this.config.backgroundImageUrl !== url) return;
+			this.backgroundImage = image;
+			this.failedBackgroundImageUrl = "";
+			this.backgroundSig = "";
+			this.applyBackground();
+			if (!this.running) this.renderOnce();
+		}, { once: true });
+		image.addEventListener("error", () => {
+			if (this.config.backgroundImageUrl !== url) return;
+			this.failedBackgroundImageUrl = url;
+			this.backgroundSig = "";
+			this.applyBackground();
+			if (!this.running) this.renderOnce();
+		}, { once: true });
+		image.src = url;
+	}
+	ensureBackgroundVideo(url) {
+		if (this.backgroundVideoUrl === url || this.failedBackgroundVideoUrl === url) return;
+		this.clearBackgroundVideo();
+		this.backgroundVideoUrl = url;
+		const video = this.createLoopingVideo(url);
+		video.addEventListener("loadeddata", () => {
+			if (this.config.backgroundVideoUrl !== url) return;
+			this.backgroundVideo = video;
+			this.failedBackgroundVideoUrl = "";
+			this.backgroundSig = "";
+			this.applyBackground();
+			this.syncVideoPlayback();
+			if (!this.running) this.renderOnce();
+		}, { once: true });
+		video.addEventListener("error", () => {
+			if (this.config.backgroundVideoUrl !== url) return;
+			this.failedBackgroundVideoUrl = url;
+			this.backgroundSig = "";
+			this.applyBackground();
+			if (!this.running) this.renderOnce();
+		}, { once: true });
+		this.backgroundVideo = video;
+		video.load();
+	}
+	clearBackgroundVideo() {
+		if (this.backgroundVideo) {
+			this.backgroundVideo.pause();
+			this.backgroundVideo.removeAttribute("src");
+			this.backgroundVideo.load();
+		}
+		this.backgroundVideo = void 0;
+		this.backgroundVideoUrl = "";
+		this.failedBackgroundVideoUrl = "";
+		this.backgroundVideoCanvas = void 0;
+	}
+	createLoopingVideo(url) {
+		const video = document.createElement("video");
+		video.muted = true;
+		video.defaultMuted = true;
+		video.loop = true;
+		video.playsInline = true;
+		video.preload = "auto";
+		if (!url.startsWith("data:") && !url.startsWith("blob:")) video.crossOrigin = "anonymous";
+		video.src = url;
+		return video;
+	}
+	syncVideoPlayback() {
+		const backgroundActive = this.running && !this.config.transparentBackground && this.config.backgroundMode === "image" && !!this.config.backgroundVideoUrl;
+		if (this.backgroundVideo) if (backgroundActive) this.backgroundVideo.play().catch(() => {});
+		else this.backgroundVideo.pause();
+		this.waves.forEach((wave, i) => {
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			wave.palette.syncPlayback(sc, this.running);
+		});
+	}
+	updateBackgroundVideoFrame() {
+		const video = this.backgroundVideo;
+		const canvas = this.backgroundVideoCanvas;
+		if (!video || !canvas || video.readyState < 2 || !this.backgroundTexture) return;
+		const position = this.config.backgroundImagePosition ?? {
+			x: 0,
+			y: 0
+		};
+		drawBackgroundMediaFrame(canvas, video, video.videoWidth, video.videoHeight, this.config.backgroundImageFit ?? "cover", this.config.background, this.config.backgroundImageZoom ?? 1, position.x, position.y);
+		this.backgroundTexture.needsUpdate = true;
+	}
+	applyPost() {
+		const u = this.postPass.uniforms;
+		u.uBlurAmount.value = this.config.blur;
+		u.uGrainAmount.value = this.config.grain;
+		u.uBlurSamples.value = Math.round(this.config.blurSamples ?? 6);
+		this.applyBloom();
+	}
+	/** Insert / tune / remove the bloom pass. strength 0 removes it from the composer entirely, so
+	*  cost and pixels are identical to bloom-off; the pass (and its mip-chain render targets) is
+	*  created lazily the first time bloom is enabled and disposed when turned back off. It sits
+	*  right after the scene RenderPass so it blooms the wave before the grain/blur pass. */
+	applyBloom() {
+		const strength = this.config.bloomStrength ?? 0;
+		if (strength > 0) {
+			if (!this.bloomPass) {
+				const size = this.renderer.getDrawingBufferSize(new THREE.Vector2());
+				this.bloomPass = new UnrealBloomPass(size, strength, this.config.bloomRadius ?? .4, this.config.bloomThreshold ?? .85);
+				this.composer.insertPass(this.bloomPass, 1);
+			}
+			this.bloomPass.strength = strength;
+			this.bloomPass.radius = this.config.bloomRadius ?? .4;
+			this.bloomPass.threshold = this.config.bloomThreshold ?? .85;
+		} else if (this.bloomPass) {
+			this.composer.removePass(this.bloomPass);
+			this.bloomPass.dispose();
+			this.bloomPass = void 0;
+		}
+	}
+	onResize = () => {
+		this.resize();
+	};
+	onContextLost = (e) => {
+		e.preventDefault();
+		cancelAnimationFrame(this.rafId);
+		this.running = false;
+	};
+	onContextRestored = () => {
+		this.disposeWaves();
+		this.backgroundTexture?.dispose();
+		this.backgroundTexture = void 0;
+		this.backgroundSig = "";
+		this.buildWaves();
+		this.resize();
+		this.updateRunning();
+	};
+	resize() {
+		const w = this.outputSize?.width ?? Math.max(1, this.container.clientWidth);
+		const h = this.outputSize?.height ?? Math.max(1, this.container.clientHeight);
+		const dpr = this.outputSize ? 1 : Math.min(window.devicePixelRatio || 1, this.config.dprMax);
+		this.renderer.setPixelRatio(dpr);
+		this.renderer.setSize(w, h, !this.outputSize);
+		if (this.outputSize) {
+			this.renderer.domElement.style.width = "100%";
+			this.renderer.domElement.style.height = "100%";
+		}
+		this.composer.setPixelRatio(dpr);
+		this.composer.setSize(w, h);
+		const dw = w * dpr;
+		const dh = h * dpr;
+		this.postPass.uniforms.uResolution.value.set(dw, dh);
+		for (const s of this.waves) s.material.uniforms.uResolution.value.set(dw, dh);
+		this.camera.left = -dw / 2;
+		this.camera.right = dw / 2;
+		this.camera.top = dh / 2;
+		this.camera.bottom = -dh / 2;
+		this.applyZoom();
+		this.applyBackground();
+		this.onAfterResize();
+		if (!this.running) this.renderOnce();
+	}
+	/** Set an exact output buffer while CSS scales the canvas into the on-screen export frame. */
+	setOutputSize(width, height) {
+		this.outputSize = {
+			width: THREE.MathUtils.clamp(Math.round(width), 64, 8192),
+			height: THREE.MathUtils.clamp(Math.round(height), 64, 8192)
+		};
+		this.resize();
+	}
+	start() {
+		this.started = true;
+		this.updateRunning();
+	}
+	stop() {
+		this.started = false;
+		this.updateRunning();
+	}
+	onMotionChange = (e) => {
+		this.reducedMotion = this.respectReducedMotion && e.matches;
+		this.updateRunning();
+	};
+	onVisibilityChange = () => {
+		this.pageVisible = document.visibilityState === "visible";
+		this.updateRunning();
+	};
+	updateRunning() {
+		const shouldAnimate = this.started && this.visible && this.pageVisible && !this.config.paused && !this.reducedMotion;
+		if (shouldAnimate && !this.running) {
+			this.running = true;
+			this.clock.start();
+			this.clock.getDelta();
+			this.rafId = requestAnimationFrame(this.loop);
+		} else if (!shouldAnimate && this.running) {
+			this.running = false;
+			cancelAnimationFrame(this.rafId);
+		}
+		if (!this.running) {
+			this.introTimeRamp = 1;
+			this.renderOnce();
+		}
+		this.syncVideoPlayback();
+	}
+	loop = () => {
+		if (!this.running) return;
+		this.time += this.clock.getDelta();
+		if (this.introTimeRamp < 1) this.introTimeRamp = Math.min(1, this.introTimeRamp + .016);
+		this.renderOnce();
+		this.rafId = requestAnimationFrame(this.loop);
+	};
+	/** Advance the per-frame clock uniforms (geometry itself is static). Time model:
+	*  time = elapsed·introTimeRamp + timeOffset — the ramp eases the animation in on load. */
+	updateTime() {
+		const ramp = this.config.introRamp === false || this.skipIntroRamp ? 1 : this.introTimeRamp;
+		const t = this.time * ramp + (this.config.timeOffset ?? 0);
+		for (let i = 0; i < this.waves.length; i++) {
+			const u = this.waves[i].material.uniforms;
+			u.uTime.value = t;
+			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
+			const dx = sc.paletteDriftX ?? 0;
+			const dy = sc.paletteDriftY ?? 0;
+			if (dx !== 0 || dy !== 0) {
+				const base = sc.paletteTextureOffset;
+				u.uPaletteOffset.value.set(base.x + dx * t, base.y + dy * t);
+			}
+		}
+		this.postPass.uniforms.uTime.value = t;
+	}
+	/** Render exactly one frame at the current time. */
+	renderOnce() {
+		this.updateBackgroundVideoFrame();
+		this.updateTime();
+		this.updateClipPlanes();
+		this.composer.render();
+		this.onAfterRenderFrame();
+	}
+	/** Re-evaluate play/pause after `config.paused` changes. */
+	refreshPlayback() {
+		this.updateRunning();
+	}
+	/** Jump the camera to the config's authored framing (cameraPosition / cameraTarget /
+	*  cameraZoom). Called on whole-config swaps (preset / reset / randomize / import). The base
+	*  applies the pose directly; the studio subclass overrides it to also drive the orbit target
+	*  and sync the panel. Hook ⑤. */
+	applyCameraFromConfig() {
+		const p = this.config.cameraPosition;
+		const tg = this.config.cameraTarget;
+		this.camera.position.set(p.x, p.y, p.z);
+		this.camera.up.set(0, 1, 0);
+		this.camera.lookAt(tg.x, tg.y, tg.z);
+		this.applyZoom();
+		if (!this.running) this.renderOnce();
+	}
+	/** Hook ①: true while orbit or an edit gizmo owns the camera, so refresh() won't reset it. */
+	isCameraExternallyDriven() {
+		return false;
+	}
+	/** Hook ②: called at the end of refresh(), before the trailing renderOnce(). */
+	onAfterRefresh() {}
+	/** Hook ③: called at the end of renderOnce(), after the composed frame is drawn. */
+	onAfterRenderFrame() {}
+	/** Hook ④: called at the end of resize(), before the trailing renderOnce(). */
+	onAfterResize() {}
+	/** Responsive ortho zoom: COVER the FRAME_W × FRAME_H reference frame onto the canvas so the
+	*  wave frames the same at any size/aspect/dpr (only the cropped margin differs), times the
+	*  user's cameraZoom. `max(...)` = cover (fill both axes, crop overflow); `min(...)` would be
+	*  contain (fit with letterbox bands). Cover keeps the wave filling the frame on every screen. */
+	applyZoom() {
+		const dw = this.camera.right - this.camera.left;
+		const dh = this.camera.top - this.camera.bottom;
+		this.camera.zoom = Math.max(dw / FRAME_W, dh / 750) * (this.config.cameraZoom ?? 1);
+		this.camera.updateProjectionMatrix();
+	}
+	/** Fit the orthographic near/far planes to the scene before every render, so no part of a wave
+	*  is ever clipped as the camera orbits / dollies / pans (or when waves are added or scaled).
+	*
+	*  The camera is *constructed* with fixed 1..10000 planes that only suit the authored hero
+	*  framing; once the view moves, the wave's depth extent along the view axis easily crosses
+	*  them and the GPU hard-slices the geometry along a flat plane — chunks of the wave vanish.
+	*
+	*  The in-shader twist rotates each vertex about its LOCAL origin, so it can never move a vertex
+	*  further from that origin than the base geometry already sits. A sphere at each mesh's origin
+	*  (radius = base extent × the mesh's largest world scale, plus the Y displacement, ×1.2 slack)
+	*  therefore safely contains the fully-deformed wave. We union those, then bracket the union
+	*  along the view axis with a margin. Bracketing to the scene (rather than a fixed huge slab)
+	*  keeps clip-space depth scene-normalised — so the wireframe theme's depth fade, which reads
+	*  gl_Position.z, looks the same at any camera distance instead of washing out. Runs each frame;
+	*  it's a handful of vector ops over 1–8 meshes with no allocation. */
+	updateClipPlanes() {
+		this.clipBox.makeEmpty();
+		for (const wave of this.waves) {
+			const mesh = wave.mesh;
+			mesh.updateWorldMatrix(true, false);
+			const bs = mesh.geometry.boundingSphere;
+			if (!bs) continue;
+			const center = this.clipTmpA.setFromMatrixPosition(mesh.matrixWorld);
+			const disp = Math.abs(Number(wave.material.uniforms.uDispAmount.value) || 0);
+			const radius = (bs.center.length() + bs.radius + disp) * mesh.matrixWorld.getMaxScaleOnAxis() * 1.2;
+			this.clipBox.expandByPoint(this.clipTmpB.copy(center).addScalar(radius));
+			this.clipBox.expandByPoint(this.clipTmpB.copy(center).addScalar(-radius));
+		}
+		if (this.clipBox.isEmpty()) return;
+		this.clipBox.getBoundingSphere(this.clipSphere);
+		const viewDir = this.camera.getWorldDirection(this.clipTmpA);
+		const centerDepth = this.clipTmpB.copy(this.clipSphere.center).sub(this.camera.position).dot(viewDir);
+		const radius = this.clipSphere.radius;
+		const margin = radius * .25 + 10;
+		this.camera.near = centerDepth - radius - margin;
+		this.camera.far = centerDepth + radius + margin;
+		this.camera.updateProjectionMatrix();
+	}
+	/** A world-space position delta that drops a duplicated wave into open frame space beside the
+	*  one it was copied from — screen-left and a touch down, sized to the visible frame — instead
+	*  of hidden exactly on top of it or (for the hero, which fills the right of the frame) pushed
+	*  off-frame. Camera-relative: it's "left on screen" no matter how the view is rotated/zoomed,
+	*  because it's built from the camera's right/up axes and the frame's visible world size. */
+	async captureImage(mime, transparent = true, quality) {
+		const prev = this.config.transparentBackground;
+		if (transparent !== prev) {
+			this.config.transparentBackground = transparent;
+			this.applyBackground();
+		}
+		let blob = null;
+		try {
+			this.capturing = true;
+			this.renderOnce();
+			blob = await new Promise((resolve) => this.canvas.toBlob(resolve, mime, quality));
+		} finally {
+			this.capturing = false;
+			if (transparent !== prev) {
+				this.config.transparentBackground = prev;
+				this.applyBackground();
+			}
+			this.renderOnce();
+		}
+		if (!blob || blob.type !== mime) throw new Error(`Failed to capture ${mime}`);
+		return blob;
+	}
+	captureStream(fps = 60) {
+		return this.canvas.captureStream(fps);
+	}
+	get canvas() {
+		return this.renderer.domElement;
+	}
+	getConfig() {
+		return this.config;
+	}
+	setConfig(config) {
+		const next = ensureStudioConfig(config);
+		const structural = next.waves.length !== this.waves.length || next.quality !== this.config.quality;
+		this.config = next;
+		if (structural) this.rebuild();
+		else this.refresh();
+		this.applyCameraFromConfig();
+	}
+	dispose() {
+		cancelAnimationFrame(this.rafId);
+		this.running = false;
+		this.resizeObserver.disconnect();
+		this.intersectionObserver.disconnect();
+		this.motionQuery.removeEventListener("change", this.onMotionChange);
+		document.removeEventListener("visibilitychange", this.onVisibilityChange);
+		this.renderer.domElement.removeEventListener("webglcontextlost", this.onContextLost);
+		this.renderer.domElement.removeEventListener("webglcontextrestored", this.onContextRestored);
+		this.clearBackgroundVideo();
+		this.backgroundTexture?.dispose();
+		for (const s of this.waves) {
+			s.material.dispose();
+			s.geometry.dispose();
+			s.palette.dispose();
+		}
+		this.bloomPass?.dispose();
+		this.composer.dispose();
+		this.renderer.dispose();
+		this.renderer.domElement.remove();
+	}
+};
+//#endregion
+export { FRAME_H, FRAME_W, WaveRenderer, hexToLinearVec3 };
+
+//# sourceMappingURL=WaveRenderer.js.map