@wave3d/core 0.3.0 → 0.4.1

package/dist/renderer/WaveRenderer.js

@@ -1,5 +1,5 @@
 import { ensureStudioConfig } from "../config/model.js";
-import { fragmentShader, lineFragmentShader, postFragmentShader, postVertexShader, vertexShader } from "./shaders.js";
+import { ditherFragmentShader, fragmentShader, halftoneCmykFragmentShader, halftoneFragmentShader, heatmapFragmentShader, innerLightFragmentShader, lineFragmentShader, paperTextureFragmentShader, postFragmentShader, postVertexShader, vertexShader } from "./shaders.js";
 import { WaveGeometry } from "./WaveGeometry.js";
 import { InteractionController, SCENE_APPLIERS, WAVE_APPLIERS, anyPointerFxActive, interactionActive, wavePointerFxActive, waveRipplesActive } from "./interaction.js";
 import { PALETTE_MAPS, buildBackgroundGradientCanvas, buildBackgroundImageCanvas, buildBackgroundMeshCanvas, buildPaletteTexture, canvasToTexture, configurePaletteTexture, drawBackgroundMediaFrame, loadPaletteImage, paletteMapCanvas, paletteSignature } from "./palette.js";
@@ -149,6 +149,12 @@ var WaveRenderer = class {
 	postPass;
 	/** Optional bloom pass — created lazily when bloomStrength first goes >0, removed at 0. */
 	bloomPass;
+	ditherPass;
+	innerLightPass;
+	halftonePass;
+	heatmapPass;
+	paperTexturePass;
+	halftoneCmykPass;
 	container;
 	respectReducedMotion;
 	skipIntroRamp;
@@ -372,6 +378,7 @@ var WaveRenderer = class {
 			uPointerPush: { value: 0 },
 			uPointerWake: { value: 0 },
 			uPointerVel: { value: new THREE.Vector2(0, 0) },
+			uShapeFlow: { value: 0 },
 			uPointerThin: { value: 0 },
 			uPointerHue: { value: 0 },
 			uPointerLighten: { value: 0 },
@@ -605,6 +612,7 @@ var WaveRenderer = class {
 			u.uOpacity.value = sc.opacity;
 		});
 		const sharedRadius = (this.config.interaction?.radius ?? .3) * 2;
+		const sharedFlow = this.config.interaction?.ribbonFlow ?? .8;
 		this.waves.forEach((wave, i) => {
 			const sc = this.config.waves[i] ?? this.config.waves[this.config.waves.length - 1];
 			if (!wavePointerFxActive(this.config, sc)) return;
@@ -618,6 +626,7 @@ var WaveRenderer = class {
 			u.uPointerHue.value = h?.hueShift ?? 0;
 			u.uPointerLighten.value = h?.lighten ?? 0;
 			u.uPointerRipple.value = sc.interaction?.press?.ripple ?? 0;
+			u.uShapeFlow.value = sharedFlow;
 		});
 		this.updatePaletteTextures();
 		this.syncVideoPlayback();
@@ -890,6 +899,12 @@ var WaveRenderer = class {
 		u.uGrainAmount.value = this.config.grain;
 		u.uBlurSamples.value = Math.round(this.config.blurSamples ?? 6);
 		this.applyBloom();
+		this.applyInnerLight();
+		this.applyHalftone();
+		this.applyHeatmap();
+		this.applyHalftoneCmyk();
+		this.applyPaperTexture();
+		this.applyDither();
 	}
 	/** 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
@@ -912,6 +927,172 @@ var WaveRenderer = class {
 			this.bloomPass = void 0;
 		}
 	}
+	/** Insert / tune / remove the dithering pass — a self-contained "layered" post shader (an ordered
+	*  Bayer dither, in the spirit of paper-design/shaders). Like bloom, dither 0 removes the pass
+	*  entirely so cost and pixels match dither-off, and it's created lazily on first enable. It is
+	*  appended AFTER OutputPass so it runs last and quantizes display-space colour (tone-mapped +
+	*  sRGB) — dithering the linear composer buffer would crush the steps in the shadows. */
+	applyDither() {
+		const strength = this.config.dither ?? 0;
+		if (strength > 0) {
+			if (!this.ditherPass) {
+				this.ditherPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uResolution: { value: this.renderer.getDrawingBufferSize(new THREE.Vector2()) },
+						uDitherStrength: { value: strength },
+						uDitherScale: { value: this.config.ditherScale ?? 2 },
+						uDitherSteps: { value: this.config.ditherSteps ?? 4 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: ditherFragmentShader
+				});
+				this.composer.addPass(this.ditherPass);
+			}
+			const u = this.ditherPass.uniforms;
+			u.uDitherStrength.value = strength;
+			u.uDitherScale.value = Math.max(1, this.config.ditherScale ?? 2);
+			u.uDitherSteps.value = Math.max(2, Math.round(this.config.ditherSteps ?? 4));
+		} else if (this.ditherPass) {
+			this.composer.removePass(this.ditherPass);
+			this.ditherPass.dispose();
+			this.ditherPass = void 0;
+		}
+	}
+	/** Insert / tune / remove the innerLight pass — volumetric light streaks scattered from the bright
+	*  wave toward a light point (innerLightX/Y in UV). Scene zone (index 1) so it scatters the raw wave
+	*  like bloom. innerLight 0 removes the pass entirely; created lazily on first enable. */
+	applyInnerLight() {
+		const strength = this.config.innerLight ?? 0;
+		if (strength > 0) {
+			const cx = this.config.innerLightX ?? .5;
+			const cy = this.config.innerLightY ?? .15;
+			if (!this.innerLightPass) {
+				this.innerLightPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uInnerLight: { value: strength },
+						uInnerLightDensity: { value: this.config.innerLightDensity ?? .5 },
+						uInnerLightDecay: { value: this.config.innerLightDecay ?? .95 },
+						uInnerLightCenter: { value: new THREE.Vector2(cx, cy) }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: innerLightFragmentShader
+				});
+				this.composer.insertPass(this.innerLightPass, 1);
+			}
+			const u = this.innerLightPass.uniforms;
+			u.uInnerLight.value = strength;
+			u.uInnerLightDensity.value = this.config.innerLightDensity ?? .5;
+			u.uInnerLightDecay.value = this.config.innerLightDecay ?? .95;
+			u.uInnerLightCenter.value.set(cx, cy);
+		} else if (this.innerLightPass) {
+			this.composer.removePass(this.innerLightPass);
+			this.innerLightPass.dispose();
+			this.innerLightPass = void 0;
+		}
+	}
+	/** Insert / tune / remove the halftone pass — a rotated dot screen (dot size scales with local
+	*  brightness) over the finished image. halftone 0 removes the pass; created lazily on enable. */
+	applyHalftone() {
+		const strength = this.config.halftone ?? 0;
+		if (strength > 0) {
+			if (!this.halftonePass) {
+				this.halftonePass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uResolution: { value: this.renderer.getDrawingBufferSize(new THREE.Vector2()) },
+						uHalftone: { value: strength },
+						uHalftoneCell: { value: this.config.halftoneCell ?? 6 },
+						uHalftoneAngle: { value: this.config.halftoneAngle ?? .4 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: halftoneFragmentShader
+				});
+				this.composer.addPass(this.halftonePass);
+			}
+			const u = this.halftonePass.uniforms;
+			u.uHalftone.value = strength;
+			u.uHalftoneCell.value = Math.max(2, this.config.halftoneCell ?? 6);
+			u.uHalftoneAngle.value = this.config.halftoneAngle ?? .4;
+		} else if (this.halftonePass) {
+			this.composer.removePass(this.halftonePass);
+			this.halftonePass.dispose();
+			this.halftonePass = void 0;
+		}
+	}
+	/** Heatmap: recolour the final image by luminance → thermal palette. Finish zone. */
+	applyHeatmap() {
+		const strength = this.config.heatmap ?? 0;
+		if (strength > 0) {
+			if (!this.heatmapPass) {
+				this.heatmapPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uHeatmap: { value: strength }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: heatmapFragmentShader
+				});
+				this.composer.addPass(this.heatmapPass);
+			}
+			this.heatmapPass.uniforms.uHeatmap.value = strength;
+		} else if (this.heatmapPass) {
+			this.composer.removePass(this.heatmapPass);
+			this.heatmapPass.dispose();
+			this.heatmapPass = void 0;
+		}
+	}
+	/** Paper texture: fibrous substrate shading multiplied over the image. Finish zone. */
+	applyPaperTexture() {
+		const strength = this.config.paperTexture ?? 0;
+		if (strength > 0) {
+			if (!this.paperTexturePass) {
+				this.paperTexturePass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uPaper: { value: strength },
+						uPaperScale: { value: this.config.paperTextureScale ?? 2 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: paperTextureFragmentShader
+				});
+				this.composer.addPass(this.paperTexturePass);
+			}
+			const u = this.paperTexturePass.uniforms;
+			u.uPaper.value = strength;
+			u.uPaperScale.value = Math.max(.5, this.config.paperTextureScale ?? 2);
+		} else if (this.paperTexturePass) {
+			this.composer.removePass(this.paperTexturePass);
+			this.paperTexturePass.dispose();
+			this.paperTexturePass = void 0;
+		}
+	}
+	/** CMYK halftone: four rotated dot screens (cyan/magenta/yellow/black). Finish zone. */
+	applyHalftoneCmyk() {
+		const strength = this.config.halftoneCmyk ?? 0;
+		if (strength > 0) {
+			if (!this.halftoneCmykPass) {
+				this.halftoneCmykPass = new ShaderPass({
+					uniforms: {
+						tDiffuse: { value: null },
+						uHalftoneCmyk: { value: strength },
+						uHalftoneCmykCell: { value: this.config.halftoneCmykCell ?? 6 }
+					},
+					vertexShader: postVertexShader,
+					fragmentShader: halftoneCmykFragmentShader
+				});
+				this.composer.addPass(this.halftoneCmykPass);
+			}
+			const u = this.halftoneCmykPass.uniforms;
+			u.uHalftoneCmyk.value = strength;
+			u.uHalftoneCmykCell.value = Math.max(2, this.config.halftoneCmykCell ?? 6);
+		} else if (this.halftoneCmykPass) {
+			this.composer.removePass(this.halftoneCmykPass);
+			this.halftoneCmykPass.dispose();
+			this.halftoneCmykPass = void 0;
+		}
+	}
 	onResize = () => {
 		this.resize();
 	};
@@ -944,6 +1125,8 @@ var WaveRenderer = class {
 		const dw = w * dpr;
 		const dh = h * dpr;
 		this.postPass.uniforms.uResolution.value.set(dw, dh);
+		if (this.ditherPass) this.ditherPass.uniforms.uResolution.value.set(dw, dh);
+		if (this.halftonePass) this.halftonePass.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;
@@ -1343,6 +1526,12 @@ var WaveRenderer = class {
 			s.palette.dispose();
 		}
 		this.bloomPass?.dispose();
+		this.ditherPass?.dispose();
+		this.innerLightPass?.dispose();
+		this.halftonePass?.dispose();
+		this.heatmapPass?.dispose();
+		this.paperTexturePass?.dispose();
+		this.halftoneCmykPass?.dispose();
 		this.composer.dispose();
 		this.renderer.dispose();
 		this.renderer.domElement.remove();