@react-three/postprocessing 3.0.5 → 3.1.1

package/dist/index.js

@@ -1,859 +1,2351 @@
-import { applyProps as e, createPortal as t, extend as n, useFrame as r, useLoader as i, useThree as a } from "@react-three/fiber";
-import { BloomEffect as o, BrightnessContrastEffect as s, ChromaticAberrationEffect as c, ColorAverageEffect as l, ColorDepthEffect as u, CopyPass as d, DepthDownsamplingPass as f, DepthEffect as p, DepthOfFieldEffect as m, DepthPickingPass as h, DotScreenEffect as g, Effect as _, EffectComposer as v, EffectPass as y, FXAAEffect as b, GlitchEffect as x, GlitchMode as S, GodRaysEffect as C, GridEffect as w, HueSaturationEffect as T, LUT3DEffect as E, MaskFunction as D, NoiseEffect as O, NormalPass as ee, OutlineEffect as te, Pass as ne, PixelationEffect as re, RenderPass as ie, SMAAEffect as ae, SSAOEffect as oe, ScanlineEffect as se, SelectiveBloomEffect as ce, SepiaEffect as le, ShockWaveEffect as ue, TextureEffect as de, TiltShiftEffect as fe, ToneMappingEffect as pe, VignetteEffect as me } from "postprocessing";
-import { createContext as he, memo as ge, use as k, useCallback as _e, useContext as A, useEffect as j, useImperativeHandle as M, useLayoutEffect as N, useMemo as P, useRef as F, useState as I } from "react";
-import { CanvasTexture as ve, Color as L, HalfFloatType as ye, Mesh as be, NearestFilter as R, NoToneMapping as xe, RepeatWrapping as z, SRGBColorSpace as Se, Texture as Ce, TextureLoader as we, Uniform as B, Vector2 as V, Vector3 as H } from "three";
-import { Fragment as Te, jsx as U, jsxs as W } from "react/jsx-runtime";
-import { easing as Ee } from "maath";
-import { N8AOPostPass as De } from "n8ao";
+import { applyProps, createPortal, extend, useFrame, useLoader, useThree } from "@react-three/fiber";
+import { createContext, memo, use, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { CanvasTexture, Color, HalfFloatType, Mesh, NearestFilter, NoToneMapping, RepeatWrapping, SRGBColorSpace, Texture as Texture$1, TextureLoader, Uniform, Vector2, Vector3 } from "three";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, CopyPass, DepthDownsamplingPass, DepthEffect, DepthOfFieldEffect, DepthPickingPass, DotScreenEffect, Effect, EffectComposer as EffectComposer$1, EffectPass, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, MaskFunction, NoiseEffect, NormalPass, OutlineEffect, Pass, PixelationEffect, RenderPass, SMAAEffect, SSAOEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, ShockWaveEffect, TextureEffect, TiltShiftEffect as TiltShiftEffect$1, ToneMappingEffect, VignetteEffect } from "postprocessing";
+import { easing } from "maath";
+import { N8AOPostPass } from "n8ao";
+//#region src/Selection.tsx
+var selectionContext = /* @__PURE__ */ createContext(null);
+function Selection({ children, enabled = true }) {
+	const [selected, select] = useState([]);
+	const value = useMemo(() => ({
+		selected,
+		select,
+		enabled
+	}), [
+		selected,
+		select,
+		enabled
+	]);
+	return /* @__PURE__ */ jsx(selectionContext.Provider, {
+		value,
+		children
+	});
+}
+function isSelectable(object) {
+	const o = object;
+	return !!(o.isMesh || o.isLine || o.isPoints);
+}
+function Select({ enabled = false, children, ...props }) {
+	const group = useRef(null);
+	const select = use(selectionContext)?.select;
+	const claimed = useRef([]);
+	useEffect(() => {
+		if (!select) return;
+		const current = [];
+		if (enabled) group.current.traverse((o) => {
+			if (isSelectable(o)) current.push(o);
+		});
+		const previouslyClaimed = claimed.current;
+		claimed.current = current;
+		select((prev) => {
+			const prevSet = new Set(prev);
+			const currentSet = new Set(current);
+			const toAdd = current.filter((o) => !prevSet.has(o));
+			const toRemove = previouslyClaimed.filter((o) => !currentSet.has(o) && prevSet.has(o));
+			if (!toAdd.length && !toRemove.length) return prev;
+			const toRemoveSet = toRemove.length ? new Set(toRemove) : null;
+			const kept = toRemoveSet ? prev.filter((o) => !toRemoveSet.has(o)) : prev;
+			return toAdd.length ? [...kept, ...toAdd] : kept;
+		});
+	}, [
+		enabled,
+		children,
+		select
+	]);
+	useEffect(() => {
+		return () => {
+			if (!select || !claimed.current.length) return;
+			const stillClaimed = new Set(claimed.current);
+			select((prev) => {
+				const next = prev.filter((o) => !stillClaimed.has(o));
+				return next.length !== prev.length ? next : prev;
+			});
+		};
+	}, [select]);
+	return /* @__PURE__ */ jsx("group", {
+		ref: group,
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/util.tsx
+var EMPTY_ARRAY = [];
+var resolveRef = (ref) => typeof ref === "object" && ref != null && "current" in ref ? ref.current : ref;
+function useMergeRefs(localRef, outerRef) {
+	return useCallback((instance) => {
+		localRef.current = instance;
+		if (typeof outerRef !== "function") {
+			if (outerRef) outerRef.current = instance;
+			return;
+		}
+		const cleanup = outerRef(instance);
+		if (typeof cleanup !== "function") return;
+		return () => {
+			localRef.current = null;
+			cleanup();
+		};
+	}, [localRef, outerRef]);
+}
+function readGroupChildren(group, filter) {
+	const groupInstance = group.__r3f;
+	return groupInstance ? groupInstance.children.map((child) => child.object).filter(filter) : [];
+}
+function updateIfChanged(ref, next) {
+	const previous = ref.current;
+	if (next.length === previous.length && next.every((item, i) => item === previous[i])) return false;
+	ref.current = next;
+	return true;
+}
+function useSelectionSync(effect, selection, selectionLayer) {
+	const invalidate = useThree((state) => state.invalidate);
+	const api = use(selectionContext);
+	useEffect(() => {
+		effect.selection.layer = selectionLayer;
+		invalidate();
+	}, [
+		effect,
+		invalidate,
+		selectionLayer
+	]);
+	useEffect(() => {
+		if (api) return;
+		const resolved = (Array.isArray(selection) ? selection.map((o) => resolveRef(o)) : [resolveRef(selection)]).filter((o) => o != null);
+		if (!resolved.length) return;
+		effect.selection.set(resolved);
+		invalidate();
+		return () => {
+			effect.selection.clear();
+			invalidate();
+		};
+	}, [
+		effect,
+		selection,
+		api,
+		invalidate
+	]);
+	useEffect(() => {
+		if (api && api.enabled && api.selected?.length) {
+			effect.selection.set(api.selected);
+			invalidate();
+			return () => {
+				effect.selection.clear();
+				invalidate();
+			};
+		}
+	}, [
+		api,
+		effect.selection,
+		invalidate
+	]);
+}
+var useDispose = (instance) => {
+	useEffect(() => {
+		return () => {
+			instance?.dispose?.();
+		};
+	}, [instance]);
+};
+function readPierced(instance, key) {
+	let target = instance;
+	for (const part of key.split("-")) {
+		if (target == null) return void 0;
+		target = target[part];
+	}
+	return target;
+}
+function applyPierced(instance, key, value) {
+	const parts = key.split("-");
+	let target = instance;
+	for (let idx = 0; idx < parts.length - 1; idx++) {
+		if (target == null) return;
+		target = target[parts[idx]];
+	}
+	if (target == null) return;
+	target[parts[parts.length - 1]] = value;
+}
+function useLiveDefaults(instance, values, keys, get = readPierced, set = applyPierced) {
+	const snapshotRef = useRef(null);
+	const invalidate = useThree((state) => state.invalidate);
+	useLayoutEffect(() => {
+		const resolved = resolveRef(instance);
+		if (!resolved) return;
+		if (snapshotRef.current?.instance !== resolved) snapshotRef.current = {
+			instance: resolved,
+			defaults: /* @__PURE__ */ new Map(),
+			applied: /* @__PURE__ */ new Map()
+		};
+		const { defaults, applied } = snapshotRef.current;
+		let changed = false;
+		for (const key of keys) {
+			if (!defaults.has(key)) {
+				const current = get(resolved, key);
+				defaults.set(key, current);
+				applied.set(key, current);
+			}
+			const next = values[key] !== void 0 ? values[key] : defaults.get(key);
+			if (Object.is(applied.get(key), next)) continue;
+			set(resolved, key, next);
+			applied.set(key, next);
+			changed = true;
+		}
+		if (changed) invalidate();
+	});
+}
+var useVector2 = (props, key) => {
+	const value = props[key];
+	return useMemo(() => {
+		if (typeof value === "number") return new Vector2(value, value);
+		if (value instanceof Vector2) return value;
+		if (value) return new Vector2(...value);
+		return new Vector2();
+	}, [value]);
+};
+var useVector3 = (props, key) => {
+	const value = props[key];
+	return useMemo(() => {
+		if (typeof value === "number") return new Vector3(value, value, value);
+		if (value instanceof Vector3) return value;
+		if (value) return new Vector3(...value);
+		return new Vector3();
+	}, [value]);
+};
+//#endregion
+//#region src/createEffectComponent.tsx
+var components$1 = /* @__PURE__ */ new WeakMap();
+var i$1 = 0;
+var BLEND_KEYS = ["blendMode-blendFunction", "blendMode-opacity-value"];
+/**
+* Registers `effect` as a JSX intrinsic once per class and returns a
+* component that renders it. Everything else - construction from `args`,
+* live prop application (with the same Color/Vector coercion and reset-
+* to-default on removal any r3f element gets), disposal - is r3f's own
+* reconciler, same rules as `<mesh>`/`<meshStandardMaterial>`. Only fits
+* effects whose constructor works with zero arguments (`new Effect()`) -
+* r3f's own reset-on-removal falls back to `0` otherwise, which is wrong
+* for anything non-numeric. Effects that require e.g. scene/camera stay
+* hand-rolled (see Outline.tsx, SelectiveBloom.tsx, ShockWave.tsx).
+*
+* `blendFunction`/`opacity` are pierced through to `blendMode-*` - every
+* `Effect` has them on a nested `blendMode`, not on the effect itself, so a
+* plain top-level prop would silently land on a stray, unread property.
+* Applied via useLiveDefaults, not as plain JSX props: BlendMode's own
+* constructor requires `blendFunction` (no default), so its constructor
+* length isn't 0 either, and r3f's native reset-on-removal falls back to
+* `changedProps[prop] = 0` - which is 9, not a merely
+* "wrong" blend function but one that hides the effect entirely.
+*/
+function createEffectComponent(effect) {
+	return function EffectComponent({ blendFunction, opacity, ref, ...props }) {
+		let Component = components$1.get(effect);
+		if (!Component) {
+			const key = `@react-three/postprocessing/${effect.name}-${i$1++}`;
+			extend({ [key]: effect });
+			components$1.set(effect, Component = key);
+		}
+		const camera = useThree((state) => state.camera);
+		const localRef = useRef(null);
+		const setRef = useMergeRefs(localRef, ref);
+		useLiveDefaults(localRef, {
+			"blendMode-blendFunction": blendFunction,
+			"blendMode-opacity-value": opacity
+		}, BLEND_KEYS);
+		return /* @__PURE__ */ jsx(Component, {
+			ref: setRef,
+			camera,
+			...props
+		});
+	};
+}
+//#endregion
 //#region src/EffectComposer.tsx
-var G = /* @__PURE__ */ he(null), Oe = (e) => (e.getAttributes() & 2) == 2;
-function ke(e) {
-	let t = /* @__PURE__ */ new WeakMap();
+var EffectComposerContext = /* @__PURE__ */ createContext(null);
+var isConvolution = (effect) => (effect.getAttributes() & 2) === 2;
+function createRendererPropertyGuard(property) {
+	const refs = /* @__PURE__ */ new WeakMap();
 	return {
-		acquire(n, r) {
-			let i = t.get(n);
-			i ? (i.count++, i.forcedValue = r) : t.set(n, {
+		acquire(gl, forcedValue) {
+			const existing = refs.get(gl);
+			if (existing) {
+				existing.count++;
+				existing.forcedValue = forcedValue;
+			} else refs.set(gl, {
 				count: 1,
-				original: n[e],
-				forcedValue: r
+				original: gl[property],
+				forcedValue
 			});
 		},
-		release(n) {
-			let r = t.get(n);
-			r && --r.count <= 0 && (n[e] === r.forcedValue && (n[e] = r.original), t.delete(n));
+		release(gl) {
+			const entry = refs.get(gl);
+			if (!entry) return;
+			if (--entry.count <= 0) {
+				if (gl[property] === entry.forcedValue) gl[property] = entry.original;
+				refs.delete(gl);
+			}
 		}
 	};
 }
-var Ae = /* @__PURE__ */ ke("autoClear"), je = /* @__PURE__ */ ke("toneMapping");
-function Me(e, t) {
-	let n = [];
-	for (let r = 0; r < e.length; r++) {
-		let i = e[r];
-		if (i instanceof _) {
-			let a = [i];
-			if (!Oe(i)) {
-				let t;
-				for (; (t = e[r + 1]) instanceof _ && !Oe(t);) a.push(t), r++;
+var autoClearGuard = /* @__PURE__ */ createRendererPropertyGuard("autoClear");
+var toneMappingGuard = /* @__PURE__ */ createRendererPropertyGuard("toneMapping");
+var glSize = /* @__PURE__ */ new Vector2();
+var defaultRenderPass = (scene, camera) => new RenderPass(scene, camera);
+var generatedPasses = /* @__PURE__ */ new WeakSet();
+var groupPasses = /* @__PURE__ */ new WeakSet();
+function disposePassWithoutEffects(pass) {
+	if (pass instanceof EffectPass) pass.setEffects([]);
+	Pass.prototype.dispose.call(pass);
+}
+function disposeGeneratedPass(pass) {
+	if (!generatedPasses.has(pass)) return;
+	disposePassWithoutEffects(pass);
+}
+function buildPasses(nodes, camera, mergeMode) {
+	const passes = [];
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (node instanceof Effect) {
+			const effects = [node];
+			let hasConvolution = isConvolution(node);
+			if (mergeMode !== "none") {
+				let next;
+				while ((next = nodes[i + 1]) instanceof Effect) {
+					const nextIsConvolution = isConvolution(next);
+					if (mergeMode === "auto" && hasConvolution && nextIsConvolution) break;
+					effects.push(next);
+					hasConvolution ||= nextIsConvolution;
+					i++;
+				}
 			}
-			n.push(new y(t, ...a));
-		} else i instanceof ne && n.push(i);
-	}
-	return n;
-}
-var Ne = /* @__PURE__ */ ge(function({ children: e, camera: t, scene: n, resolutionScale: i, enabled: o = !0, renderPriority: s = 1, autoClear: c = !0, depthBuffer: l, enableNormalPass: u, stencilBuffer: d, multisampling: p = 8, frameBufferType: m = ye, ref: h }) {
-	let { gl: g, scene: y, camera: b, size: x } = a(), S = n || y, C = t || b, [w, T] = I(null);
-	j(() => {
-		Ae.acquire(g, !1);
-		let e = new v(g, {
-			depthBuffer: l,
-			stencilBuffer: d,
-			multisampling: p,
-			frameBufferType: m
+			const pass = new EffectPass(camera, ...effects);
+			generatedPasses.add(pass);
+			passes.push(pass);
+		} else if (node instanceof Pass) passes.push(node);
+	}
+	return passes;
+}
+var EffectComposer = /* @__PURE__ */ memo(function EffectComposer({ children, camera: _camera, scene: _scene, resolutionScale, enabled = true, renderPriority = 1, autoClear = true, autoRenderToScreen = true, depthBuffer, enableNormalPass, stencilBuffer, multisampling = 8, frameBufferType = HalfFloatType, renderPass = defaultRenderPass, mergeMode = "auto", ref }) {
+	const { gl, scene: defaultScene, camera: defaultCamera } = useThree();
+	const scene = _scene || defaultScene;
+	const camera = _camera || defaultCamera;
+	gl.getSize(glSize);
+	const [composerState, setComposerState] = useState(null);
+	const [, requestRebuild] = useReducer((c) => c + 1, 0);
+	useEffect(() => {
+		autoClearGuard.acquire(gl, false);
+		const effectComposer = new EffectComposer$1(gl, {
+			depthBuffer,
+			stencilBuffer,
+			multisampling,
+			frameBufferType
 		});
-		e.addPass(new ie(S, C));
-		let t = null, n = null;
-		return u && (t = new ee(S, C), t.enabled = !1, e.addPass(t), i !== void 0 && (n = new f({
-			normalBuffer: t.texture,
-			resolutionScale: i
-		}), n.enabled = !1, e.addPass(n))), e.setSize(x.width, x.height), T({
-			composer: e,
-			normalPass: t,
-			downSamplingPass: n
-		}), () => {
-			e.dispose(), Ae.release(g);
+		effectComposer.autoRenderToScreen = autoRenderToScreen;
+		effectComposer.addPass(renderPass(scene, camera));
+		let normalPass = null;
+		let downSamplingPass = null;
+		if (enableNormalPass) {
+			normalPass = new NormalPass(scene, camera);
+			normalPass.enabled = false;
+			effectComposer.addPass(normalPass);
+			if (resolutionScale !== void 0) {
+				downSamplingPass = new DepthDownsamplingPass({
+					normalBuffer: normalPass.texture,
+					resolutionScale
+				});
+				downSamplingPass.enabled = false;
+				effectComposer.addPass(downSamplingPass);
+			}
+		}
+		effectComposer.setSize(glSize.width, glSize.height);
+		setComposerState({
+			composer: effectComposer,
+			normalPass,
+			downSamplingPass
+		});
+		return () => {
+			for (const pass of effectComposer.passes) disposeGeneratedPass(pass);
+			effectComposer.dispose();
+			autoClearGuard.release(gl);
 		};
 	}, [
-		C,
-		g,
-		l,
-		d,
-		p,
-		m,
-		S,
-		u,
-		i
-	]), j(() => {
-		w?.composer.setSize(x.width, x.height);
-	}, [w, x]), r((e, t) => {
-		if (!o || !w) return;
-		let { composer: n } = w, r = g.autoClear;
-		g.autoClear = c, d && !c && g.clearStencil(), n.render(t), g.autoClear = r;
-	}, o ? s : 0);
-	let E = F(null);
-	N(() => {
-		if (!w) return;
-		let { composer: e, normalPass: t, downSamplingPass: n } = w, r = [], i = E.current.__r3f;
-		if (i) {
-			let e = i.children.map((e) => e.object).filter((e) => e instanceof _ || e instanceof ne);
-			r.push(...Me(e, C));
+		camera,
+		gl,
+		depthBuffer,
+		stencilBuffer,
+		multisampling,
+		frameBufferType,
+		autoRenderToScreen,
+		renderPass,
+		scene,
+		enableNormalPass,
+		resolutionScale
+	]);
+	const appliedSizeRef = useRef({
+		width: -1,
+		height: -1
+	});
+	useFrame((_, delta) => {
+		if (!enabled || !composerState) return;
+		const { composer } = composerState;
+		gl.getSize(glSize);
+		if (glSize.width !== appliedSizeRef.current.width || glSize.height !== appliedSizeRef.current.height) {
+			composer.setSize(glSize.width, glSize.height);
+			appliedSizeRef.current.width = glSize.width;
+			appliedSizeRef.current.height = glSize.height;
 		}
-		for (let t of r) e.addPass(t);
-		return r.length && (t && (t.enabled = !0), n && (n.enabled = !0)), () => {
-			for (let t of r) e.removePass(t);
-			t && (t.enabled = !1), n && (n.enabled = !1);
+		const currentAutoClear = gl.autoClear;
+		gl.autoClear = autoClear;
+		if (stencilBuffer && !autoClear) gl.clearStencil();
+		composer.render(delta);
+		gl.autoClear = currentAutoClear;
+	}, enabled ? renderPriority : 0);
+	const group = useRef(null);
+	const nodesRef = useRef([]);
+	const [nodesVersion, setNodesVersion] = useState(0);
+	useLayoutEffect(() => {
+		if (!composerState) return;
+		const nodes = readGroupChildren(group.current, (object) => object instanceof Effect || object instanceof Pass);
+		if (updateIfChanged(nodesRef, nodes)) setNodesVersion((v) => v + 1);
+	});
+	useLayoutEffect(() => {
+		if (!composerState) return;
+		const { composer, normalPass, downSamplingPass } = composerState;
+		const passes = buildPasses(nodesRef.current, camera, mergeMode);
+		if (passes.some((pass) => groupPasses.has(pass))) {
+			const trailingCopyPass = new CopyPass();
+			generatedPasses.add(trailingCopyPass);
+			passes.push(trailingCopyPass);
+		}
+		for (const pass of passes) composer.addPass(pass);
+		if (passes.length) {
+			if (normalPass) normalPass.enabled = true;
+			if (downSamplingPass) downSamplingPass.enabled = true;
+		}
+		return () => {
+			for (const pass of passes) {
+				composer.removePass(pass);
+				disposeGeneratedPass(pass);
+			}
+			if (normalPass) normalPass.enabled = false;
+			if (downSamplingPass) downSamplingPass.enabled = false;
 		};
 	}, [
-		w,
-		e,
-		C
-	]), j(() => (je.acquire(g, xe), g.toneMapping = xe, () => {
-		je.release(g);
-	}), [g]);
-	let D = P(() => w ? {
-		composer: w.composer,
-		normalPass: w.normalPass,
-		downSamplingPass: w.downSamplingPass,
-		resolutionScale: i,
-		camera: C,
-		scene: S
+		composerState,
+		nodesVersion,
+		camera,
+		mergeMode
+	]);
+	useEffect(() => {
+		toneMappingGuard.acquire(gl, NoToneMapping);
+		gl.toneMapping = NoToneMapping;
+		return () => {
+			toneMappingGuard.release(gl);
+		};
+	}, [gl]);
+	const state = useMemo(() => composerState ? {
+		composer: composerState.composer,
+		normalPass: composerState.normalPass,
+		downSamplingPass: composerState.downSamplingPass,
+		resolutionScale,
+		camera,
+		scene,
+		requestRebuild,
+		autoClear
 	} : null, [
-		w,
-		i,
-		C,
-		S
+		composerState,
+		resolutionScale,
+		camera,
+		scene,
+		requestRebuild,
+		autoClear
 	]);
-	return M(h, () => w?.composer, [w]), D ? /* @__PURE__ */ U(G.Provider, {
-		value: D,
-		children: /* @__PURE__ */ U("group", {
-			ref: E,
-			children: e
+	useImperativeHandle(ref, () => composerState?.composer, [composerState]);
+	if (!state) return null;
+	return /* @__PURE__ */ jsx(EffectComposerContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx("group", {
+			ref: group,
+			children
 		})
-	}) : null;
-}), K = /* @__PURE__ */ he(null);
-function Pe({ children: e, enabled: t = !0 }) {
-	let [n, r] = I([]), i = P(() => ({
-		selected: n,
-		select: r,
-		enabled: t
-	}), [
-		n,
-		r,
-		t
-	]);
-	return /* @__PURE__ */ U(K.Provider, {
-		value: i,
-		children: e
 	});
-}
-function Fe(e) {
-	let t = e;
-	return !!(t.isMesh || t.isLine || t.isPoints);
-}
-function Ie({ enabled: e = !1, children: t, ...n }) {
-	let r = F(null), i = k(K)?.select, a = F([]);
-	return j(() => {
-		if (!i) return;
-		let t = [];
-		e && r.current.traverse((e) => {
-			Fe(e) && t.push(e);
-		});
-		let n = a.current;
-		a.current = t, i((e) => {
-			let r = new Set(e), i = new Set(t), a = t.filter((e) => !r.has(e)), o = n.filter((e) => !i.has(e) && r.has(e));
-			if (!a.length && !o.length) return e;
-			let s = o.length ? new Set(o) : null, c = s ? e.filter((e) => !s.has(e)) : e;
-			return a.length ? [...c, ...a] : c;
-		});
-	}, [
-		e,
-		t,
-		i
-	]), j(() => () => {
-		if (!i || !a.current.length) return;
-		let e = new Set(a.current);
-		i((t) => {
-			let n = t.filter((t) => !e.has(t));
-			return n.length === t.length ? t : n;
-		});
-	}, [i]), /* @__PURE__ */ U("group", {
-		ref: r,
-		...n,
-		children: t
+});
+//#endregion
+//#region src/EffectGroup.tsx
+function EffectGroup({ enabled = true, children, ref }) {
+	const { camera, requestRebuild } = use(EffectComposerContext);
+	const group = useRef(null);
+	const effectsRef = useRef([]);
+	const [pass, setPass] = useState(null);
+	useLayoutEffect(() => {
+		const effects = readGroupChildren(group.current, (object) => object instanceof Effect);
+		if (!updateIfChanged(effectsRef, effects)) return;
+		if (!effects.length) {
+			setPass(null);
+			return;
+		}
+		const newPass = new EffectPass(camera, ...effects);
+		groupPasses.add(newPass);
+		setPass(newPass);
 	});
+	useLayoutEffect(() => {
+		if (pass) pass.enabled = enabled;
+	}, [pass, enabled]);
+	useLayoutEffect(() => {
+		requestRebuild();
+	}, [pass, requestRebuild]);
+	useLayoutEffect(() => {
+		return () => {
+			if (pass) disposePassWithoutEffects(pass);
+		};
+	}, [pass]);
+	useImperativeHandle(ref, () => pass, [pass]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("group", {
+		ref: group,
+		children
+	}), pass && /* @__PURE__ */ jsx("primitive", { object: pass })] });
 }
 //#endregion
-//#region src/util.tsx
-var q = [], J = (e) => typeof e == "object" && e && "current" in e ? e.current : e;
-function Y(e, t, n) {
-	let r = a((e) => e.invalidate), i = k(K);
-	j(() => {
-		e.selection.layer = n, r();
-	}, [
-		e,
-		r,
-		n
-	]), j(() => {
-		if (i) return;
-		let n = (Array.isArray(t) ? t.map((e) => J(e)) : [J(t)]).filter((e) => e != null);
-		if (n.length) return e.selection.set(n), r(), () => {
-			e.selection.clear(), r();
-		};
-	}, [
-		e,
-		t,
-		i,
-		r
-	]), j(() => {
-		if (i && i.enabled && i.selected?.length) return e.selection.set(i.selected), r(), () => {
-			e.selection.clear(), r();
-		};
-	}, [
-		i,
-		e.selection,
-		r
-	]);
+//#region src/wrapEffect.tsx
+var i = 0;
+var components = /* @__PURE__ */ new WeakMap();
+var identityTokens = /* @__PURE__ */ new WeakMap();
+var nextIdentityToken = 0;
+function identityOf(value) {
+	let token = identityTokens.get(value);
+	if (token === void 0) {
+		token = nextIdentityToken++;
+		identityTokens.set(value, token);
+	}
+	return token;
 }
-var X = (e) => {
-	let t = F(/* @__PURE__ */ new WeakSet());
-	j(() => {
-		let n = t.current;
-		return () => {
-			e && typeof e == "object" && !n.has(e) && (n.add(e), e.dispose?.());
-		};
-	}, [e]);
-}, Z = (e, t) => {
-	let n = e[t];
-	return P(() => typeof n == "number" ? new V(n, n) : n ? new V(...n) : new V(), [n]);
-}, Le = 0, Re = /* @__PURE__ */ new WeakMap(), ze = /* @__PURE__ */ new WeakMap(), Be = 0;
-function Ve(e) {
-	let t = ze.get(e);
-	return t === void 0 && (t = Be++, ze.set(e, t)), t;
-}
-function Q(e, t) {
-	if (typeof e != "object" || !e) return e;
-	if (t.has(e)) return "[Circular]";
-	if (ArrayBuffer.isView(e) || e instanceof ArrayBuffer) return Ve(e);
-	if (t.add(e), Array.isArray(e)) return e.map((e) => Q(e, t));
-	let n = {};
-	for (let r of Object.keys(e).sort()) n[r] = Q(e[r], t);
-	return n;
-}
-function He(e) {
-	return JSON.stringify(Q(e, /* @__PURE__ */ new WeakSet()));
-}
-function $(e, t) {
-	return function({ ref: r, blendFunction: i = t?.blendFunction, opacity: o = t?.opacity, ...s }) {
-		let c = Re.get(e);
-		if (!c) {
-			let t = `@react-three/postprocessing/${e.name}-${Le++}`;
-			n({ [t]: e }), Re.set(e, c = t);
+function fingerprint(value, seen) {
+	if (value === null || typeof value !== "object") return value;
+	if (seen.has(value)) return "[Circular]";
+	if (ArrayBuffer.isView(value) || value instanceof ArrayBuffer) return identityOf(value);
+	seen.add(value);
+	if (Array.isArray(value)) return value.map((item) => fingerprint(item, seen));
+	const out = {};
+	for (const key of Object.keys(value).sort()) out[key] = fingerprint(value[key], seen);
+	return out;
+}
+function stableStringify(value) {
+	return JSON.stringify(fingerprint(value, /* @__PURE__ */ new WeakSet()));
+}
+function wrapEffect(effect, defaults) {
+	return function WrappedEffect({ ref, blendFunction = defaults?.blendFunction, opacity = defaults?.opacity, ...props }) {
+		let Component = components.get(effect);
+		if (!Component) {
+			const key = `@react-three/postprocessing/${effect.name}-${i++}`;
+			extend({ [key]: effect });
+			components.set(effect, Component = key);
 		}
-		let l = a((e) => e.camera), u = P(() => [...t?.args ?? [], ...s.args ?? [{
-			...t,
-			...s
-		}]], [He(s)]);
-		return /* @__PURE__ */ U(c, {
-			camera: l,
-			"blendMode-blendFunction": i,
-			"blendMode-opacity-value": o,
-			...s,
-			args: u,
-			ref: r
+		const camera = useThree((state) => state.camera);
+		const args = useMemo(() => [...defaults?.args ?? [], ...props.args ?? [{
+			...defaults,
+			...props
+		}]], [stableStringify(props)]);
+		return /* @__PURE__ */ jsx(Component, {
+			camera,
+			"blendMode-blendFunction": blendFunction,
+			"blendMode-opacity-value": opacity,
+			...props,
+			args,
+			ref
 		});
 	};
 }
 //#endregion
 //#region src/effects/ASCII.tsx
-var Ue = "\n  uniform sampler2D uCharacters;\n  uniform float uCharactersCount;\n  uniform float uCellSize;\n  uniform bool uInvert;\n  uniform vec3 uColor;\n\n  const vec2 SIZE = vec2(16.);\n\n  vec3 greyscale(vec3 color, float strength) {\n    float g = dot(color, vec3(0.299, 0.587, 0.114));\n    return mix(color, vec3(g), strength);\n  }\n\n  vec3 greyscale(vec3 color) {\n    return greyscale(color, 1.0);\n  }\n\n  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n    vec2 cell = resolution / uCellSize;\n    vec2 grid = 1.0 / cell;\n    vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));\n    vec4 pixelized = texture2D(inputBuffer, pixelizedUV);\n    float greyscaled = greyscale(pixelized.rgb).r;\n\n    if (uInvert) {\n        greyscaled = 1.0 - greyscaled;\n    }\n\n    float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);\n    vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));\n    vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;\n    vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;\n    vec4 asciiCharacter = texture2D(uCharacters, charUV);\n\n    asciiCharacter.rgb = uColor * asciiCharacter.r;\n    asciiCharacter.a = pixelized.a;\n    outputColor = asciiCharacter;\n  }\n", We = class extends _ {
-	constructor({ font: e = "arial", characters: t = " .:,'-^=*+?!|0#X%WM@", fontSize: n = 54, cellSize: r = 16, color: i = "#ffffff", invert: a = !1 } = {}) {
-		let o = /* @__PURE__ */ new Map([
-			["uCharacters", new B(new Ce())],
-			["uCellSize", new B(r)],
-			["uCharactersCount", new B(t.length)],
-			["uColor", new B(new L(i))],
-			["uInvert", new B(a)]
+var fragment = `
+  uniform sampler2D uCharacters;
+  uniform float uCharactersCount;
+  uniform float uCellSize;
+  uniform bool uInvert;
+  uniform vec3 uColor;
+
+  const vec2 SIZE = vec2(16.);
+
+  vec3 greyscale(vec3 color, float strength) {
+    float g = dot(color, vec3(0.299, 0.587, 0.114));
+    return mix(color, vec3(g), strength);
+  }
+
+  vec3 greyscale(vec3 color) {
+    return greyscale(color, 1.0);
+  }
+
+  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 cell = resolution / uCellSize;
+    vec2 grid = 1.0 / cell;
+    vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));
+    vec4 pixelized = texture2D(inputBuffer, pixelizedUV);
+    float greyscaled = greyscale(pixelized.rgb).r;
+
+    if (uInvert) {
+        greyscaled = 1.0 - greyscaled;
+    }
+
+    float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);
+    vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));
+    vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;
+    vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;
+    vec4 asciiCharacter = texture2D(uCharacters, charUV);
+
+    asciiCharacter.rgb = uColor * asciiCharacter.r;
+    asciiCharacter.a = pixelized.a;
+    outputColor = asciiCharacter;
+  }
+`;
+var ASCIIEffect = class extends Effect {
+	constructor({ font = "arial", characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = "#ffffff", invert = false } = {}) {
+		const uniforms = /* @__PURE__ */ new Map([
+			["uCharacters", new Uniform(new Texture$1())],
+			["uCellSize", new Uniform(cellSize)],
+			["uCharactersCount", new Uniform(characters.length)],
+			["uColor", new Uniform(new Color(color))],
+			["uInvert", new Uniform(invert)]
 		]);
-		super("ASCIIEffect", Ue, { uniforms: o });
-		let s = this.uniforms.get("uCharacters");
-		s && (s.value = this.createCharactersTexture(t, e, n));
-	}
-	createCharactersTexture(e, t, n) {
-		let r = document.createElement("canvas"), i = 1024;
-		r.width = r.height = i;
-		let a = new ve(r, void 0, z, z, R, R), o = r.getContext("2d");
-		if (!o) throw Error("Context not available");
-		o.clearRect(0, 0, i, i), o.font = `${n}px ${t}`, o.textAlign = "center", o.textBaseline = "middle", o.fillStyle = "#fff";
-		for (let t = 0; t < e.length; t++) {
-			let n = e[t], r = t % 16, i = Math.floor(t / 16);
-			o.fillText(n, r * 64 + 64 / 2, i * 64 + 64 / 2);
+		super("ASCIIEffect", fragment, { uniforms });
+		this._font = font;
+		this._characters = characters;
+		this._fontSize = fontSize;
+		this.updateCharactersTexture();
+	}
+	get cellSize() {
+		return this.uniforms.get("uCellSize").value;
+	}
+	set cellSize(value) {
+		this.uniforms.get("uCellSize").value = value;
+	}
+	get invert() {
+		return this.uniforms.get("uInvert").value;
+	}
+	set invert(value) {
+		this.uniforms.get("uInvert").value = value;
+	}
+	get color() {
+		return this.uniforms.get("uColor").value;
+	}
+	set color(value) {
+		this.uniforms.get("uColor").value.set(value);
+	}
+	get font() {
+		return this._font;
+	}
+	set font(value) {
+		this._font = value;
+		this.updateCharactersTexture();
+	}
+	get characters() {
+		return this._characters;
+	}
+	set characters(value) {
+		this._characters = value;
+		this.uniforms.get("uCharactersCount").value = value.length;
+		this.updateCharactersTexture();
+	}
+	get fontSize() {
+		return this._fontSize;
+	}
+	set fontSize(value) {
+		this._fontSize = value;
+		this.updateCharactersTexture();
+	}
+	updateCharactersTexture() {
+		const uniform = this.uniforms.get("uCharacters");
+		const previous = uniform.value;
+		uniform.value = this.createCharactersTexture(this._characters, this._font, this._fontSize);
+		previous.dispose();
+	}
+	/** Draws the characters on a Canvas and returns a texture */
+	createCharactersTexture(characters, font, fontSize) {
+		const canvas = document.createElement("canvas");
+		const SIZE = 1024;
+		const MAX_PER_ROW = 16;
+		const CELL = SIZE / MAX_PER_ROW;
+		canvas.width = canvas.height = SIZE;
+		const texture = new CanvasTexture(canvas, void 0, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter);
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("Context not available");
+		context.clearRect(0, 0, SIZE, SIZE);
+		context.font = `${fontSize}px ${font}`;
+		context.textAlign = "center";
+		context.textBaseline = "middle";
+		context.fillStyle = "#fff";
+		for (let i = 0; i < characters.length; i++) {
+			const char = characters[i];
+			const x = i % MAX_PER_ROW;
+			const y = Math.floor(i / MAX_PER_ROW);
+			context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2);
 		}
-		return a.needsUpdate = !0, a;
+		texture.needsUpdate = true;
+		return texture;
 	}
 };
-function Ge({ font: e = "arial", characters: t = " .:,'-^=*+?!|0#X%WM@", fontSize: n = 54, cellSize: r = 16, color: i = "#ffffff", invert: a = !1, ref: o }) {
-	let s = P(() => new We({
-		characters: t,
-		font: e,
-		fontSize: n,
-		cellSize: r,
-		color: i,
-		invert: a
-	}), [
-		t,
-		n,
-		r,
-		i,
-		a,
-		e
+var ASCII = /* @__PURE__ */ createEffectComponent(ASCIIEffect);
+//#endregion
+//#region src/passes/DepthPicking.tsx
+function DepthPicking({ ref }) {
+	const { composer } = use(EffectComposerContext);
+	const [depthPickingPass] = useState(() => new DepthPickingPass());
+	const [copyPass] = useState(() => new CopyPass());
+	useEffect(() => {
+		composer.addPass(depthPickingPass);
+		composer.addPass(copyPass);
+		return () => {
+			composer.removePass(depthPickingPass);
+			composer.removePass(copyPass);
+		};
+	}, [
+		composer,
+		depthPickingPass,
+		copyPass
+	]);
+	useDispose(depthPickingPass);
+	useDispose(copyPass);
+	useImperativeHandle(ref, () => ({ readDepth: (ndc) => depthPickingPass.readDepth(ndc) }), [depthPickingPass]);
+	return null;
+}
+function useDepthPicking(pass, camera) {
+	const composerCamera = use(EffectComposerContext)?.camera;
+	const defaultCamera = useThree((state) => state.camera);
+	const resolvedCamera = camera ?? composerCamera ?? defaultCamera;
+	const [ndc] = useState(() => new Vector3());
+	return useCallback(async (x, y) => {
+		if (!pass.current) return false;
+		ndc.x = x;
+		ndc.y = y;
+		ndc.z = await pass.current.readDepth(ndc);
+		ndc.z = ndc.z * 2 - 1;
+		return 1 - ndc.z > 1e-7 ? ndc.clone().unproject(resolvedCamera) : false;
+	}, [
+		pass,
+		resolvedCamera,
+		ndc
 	]);
-	return X(s), /* @__PURE__ */ U("primitive", {
-		ref: o,
-		object: s
-	});
 }
 //#endregion
 //#region src/effects/DepthOfField.tsx
-function Ke({ ref: e, blendFunction: t, worldFocusDistance: n, worldFocusRange: r, focusDistance: i, focusRange: a, focalLength: o, bokehScale: s, resolutionScale: c, resolutionX: l, resolutionY: u, width: d, height: f, target: p, depthTexture: h, ...g }) {
-	let { camera: _ } = k(G), v = p != null, y = P(() => {
-		let e = new m(_, {
-			blendFunction: t,
-			worldFocusDistance: n,
-			worldFocusRange: r,
-			focusDistance: i,
-			focusRange: a,
-			focalLength: o,
-			bokehScale: s,
-			resolutionScale: c,
-			resolutionX: l,
-			resolutionY: u,
-			width: d,
-			height: f
+var LIVE_KEYS$6 = [
+	"blendMode-blendFunction",
+	"bokehScale",
+	"cocMaterial-focusDistance",
+	"cocMaterial-focusRange",
+	"depthTexture"
+];
+function get$2(effect, key) {
+	if (key !== "depthTexture") return readPierced(effect, key);
+	const texture = effect.cocMaterial.uniforms.depthBuffer.value;
+	return texture ? { texture } : void 0;
+}
+function set$3(effect, key, value) {
+	if (key === "depthTexture") {
+		const dt = value;
+		effect.setDepthTexture(dt?.texture, dt?.packing);
+	} else applyPierced(effect, key, value);
+}
+function DepthOfField({ ref, blendFunction, worldFocusDistance, worldFocusRange, focusDistance, focusRange, focalLength, bokehScale, resolutionScale, resolutionX, resolutionY, width, height, target, depthTexture, ...props }) {
+	const { camera } = use(EffectComposerContext);
+	const autoFocus = target != null;
+	const effect = useMemo(() => {
+		const effect = new DepthOfFieldEffect(camera, {
+			worldFocusDistance,
+			worldFocusRange,
+			focalLength,
+			resolutionScale,
+			resolutionX,
+			resolutionY,
+			width,
+			height
 		});
-		v && (e.target = new H()), h && e.setDepthTexture(h.texture, h.packing);
-		let p = e.maskPass;
-		return p.maskFunction = D.MULTIPLY_RGB_SET_ALPHA, e;
+		if (autoFocus) effect.target = new Vector3();
+		effect.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
+		return effect;
 	}, [
-		_,
-		t,
-		n,
-		r,
-		i,
-		a,
-		o,
-		s,
-		c,
-		l,
-		u,
-		d,
-		f,
-		v,
-		h
+		camera,
+		worldFocusDistance,
+		worldFocusRange,
+		focalLength,
+		resolutionScale,
+		resolutionX,
+		resolutionY,
+		width,
+		height,
+		autoFocus
 	]);
-	return X(y), /* @__PURE__ */ U("primitive", {
-		...g,
-		object: y,
-		ref: e,
-		target: p
+	useLiveDefaults(effect, {
+		"blendMode-blendFunction": blendFunction,
+		bokehScale,
+		"cocMaterial-focusDistance": focusDistance,
+		"cocMaterial-focusRange": focusRange,
+		depthTexture
+	}, LIVE_KEYS$6, get$2, set$3);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		...props,
+		object: effect,
+		ref,
+		target
 	});
 }
 //#endregion
 //#region src/effects/Autofocus.tsx
-function qe(e) {
-	let t = !1, n = e.dispose.bind(e);
-	return e.dispose = () => {
-		t || (t = !0, n());
-	}, e;
-}
-function Je({ target: e = void 0, mouse: n = !1, debug: i = void 0, manual: o = !1, smoothTime: s = .25, ref: c, ...l }) {
-	let u = F(null), f = F(null), p = F(null), m = a(({ scene: e }) => e), g = a(({ pointer: e }) => e), { composer: _, camera: v } = A(G), [y] = I(() => qe(new h())), [b] = I(() => qe(new d()));
-	j(() => (_.addPass(y), _.addPass(b), () => {
-		_.removePass(y), _.removePass(b);
-	}), [
-		_,
-		y,
-		b
-	]), j(() => () => {
-		y.dispose(), b.dispose();
-	}, [y, b]);
-	let [x] = I(() => new H(0, 0, 0)), [S] = I(() => new H(0, 0, 0)), C = _e(async (e, t) => (S.x = e, S.y = t, S.z = await y.readDepth(S), S.z = S.z * 2 - 1, 1 - S.z > 1e-7 && S.unproject(v)), [
-		S,
-		y,
-		v
-	]), w = _e(async (t, r = !0) => {
-		if (e) x.set(...e);
+function Autofocus({ target = void 0, mouse: followMouse = false, debug = void 0, manual = false, smoothTime = .25, ref, ...props }) {
+	const dofRef = useRef(null);
+	const pickRef = useRef(null);
+	const getHit = useDepthPicking(pickRef);
+	const hitpointMarkerRef = useRef(null);
+	const dofTargetMarkerRef = useRef(null);
+	const scene = useThree(({ scene }) => scene);
+	const pointer = useThree(({ pointer }) => pointer);
+	const [autoFocusMarker] = useState(() => new Vector3());
+	const [hitpoint] = useState(() => new Vector3());
+	const update = useCallback(async (delta, updateTarget = true) => {
+		if (target) hitpoint.set(...target);
 		else {
-			let { x: e, y: t } = n ? g : {
+			const { x, y } = followMouse ? pointer : {
 				x: 0,
 				y: 0
-			}, r = await C(e, t);
-			r && x.copy(r);
+			};
+			const hit = await getHit(x, y);
+			if (hit) hitpoint.copy(hit);
+		}
+		if (updateTarget && dofRef.current?.target) {
+			if (smoothTime > 0 && delta > 0) easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta);
+			else dofRef.current.target.copy(hitpoint);
 		}
-		r && u.current?.target && (s > 0 && t > 0 ? Ee.damp3(u.current.target, x, s, t) : u.current.target.copy(x));
 	}, [
-		e,
-		x,
-		n,
-		C,
-		s,
-		g
+		target,
+		hitpoint,
+		followMouse,
+		pointer,
+		getHit,
+		smoothTime
 	]);
-	r(async (e, t) => {
-		o || w(t), f.current && f.current.position.copy(x), p.current && u.current?.target && p.current.position.copy(u.current.target);
+	useFrame((_, delta) => {
+		if (!manual) update(delta);
+		if (hitpointMarkerRef.current) hitpointMarkerRef.current.position.copy(hitpoint);
+		if (dofTargetMarkerRef.current && dofRef.current?.target) dofTargetMarkerRef.current.position.copy(dofRef.current.target);
 	});
-	let T = P(() => ({
-		dofRef: u,
-		hitpoint: x,
-		update: w
-	}), [x, w]);
-	return M(c, () => T, [T]), /* @__PURE__ */ W(Te, { children: [i ? t(/* @__PURE__ */ W(Te, { children: [/* @__PURE__ */ W("mesh", {
-		ref: f,
-		children: [/* @__PURE__ */ U("sphereGeometry", { args: [
-			i,
-			16,
-			16
-		] }), /* @__PURE__ */ U("meshBasicMaterial", {
-			color: "#00ff00",
-			opacity: 1,
-			transparent: !0,
-			depthWrite: !1
-		})]
-	}), /* @__PURE__ */ W("mesh", {
-		ref: p,
-		children: [/* @__PURE__ */ U("sphereGeometry", { args: [
-			i / 2,
-			16,
-			16
-		] }), /* @__PURE__ */ U("meshBasicMaterial", {
-			color: "#00ff00",
-			opacity: .5,
-			transparent: !0,
-			depthWrite: !1
-		})]
-	})] }), m) : null, /* @__PURE__ */ U(Ke, {
-		ref: u,
-		...l,
-		target: x
-	})] });
+	const api = useMemo(() => ({
+		dofRef,
+		hitpoint,
+		update
+	}), [hitpoint, update]);
+	useImperativeHandle(ref, () => api, [api]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(DepthPicking, { ref: pickRef }),
+		debug ? createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("mesh", {
+			ref: hitpointMarkerRef,
+			children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				debug,
+				16,
+				16
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: "#00ff00",
+				opacity: 1,
+				transparent: true,
+				depthWrite: false
+			})]
+		}), /* @__PURE__ */ jsxs("mesh", {
+			ref: dofTargetMarkerRef,
+			children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				debug / 2,
+				16,
+				16
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: "#00ff00",
+				opacity: .5,
+				transparent: true,
+				depthWrite: false
+			})]
+		})] }), scene) : null,
+		/* @__PURE__ */ jsx(DepthOfField, {
+			ref: dofRef,
+			...props,
+			target: autoFocusMarker
+		})
+	] });
 }
 //#endregion
 //#region src/effects/Bloom.tsx
-var Ye = /* @__PURE__ */ $(o, { blendFunction: 0 }), Xe = /* @__PURE__ */ $(s);
-//#endregion
-//#region src/effects/ChromaticAberration.tsx
-function Ze({ ref: e, ...t }) {
-	let n = Z(t, "offset"), r = P(() => new c({
-		...t,
-		offset: n
-	}), [n, t]);
-	return X(r), /* @__PURE__ */ U("primitive", {
-		object: r,
-		ref: e
+var BloomImpl = /* @__PURE__ */ createEffectComponent(BloomEffect);
+function Bloom({ blendFunction = 0, luminanceThreshold, luminanceSmoothing, mipmapBlur, radius, levels, resolutionScale, resolutionX, resolutionY, ...liveProps }) {
+	const args = useMemo(() => [{
+		luminanceThreshold,
+		luminanceSmoothing,
+		mipmapBlur,
+		radius,
+		levels,
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	}], [
+		luminanceThreshold,
+		luminanceSmoothing,
+		mipmapBlur,
+		radius,
+		levels,
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	]);
+	return /* @__PURE__ */ jsx(BloomImpl, {
+		blendFunction,
+		args,
+		...liveProps
 	});
 }
 //#endregion
+//#region src/effects/BrightnessContrast.tsx
+var BrightnessContrast = /* @__PURE__ */ createEffectComponent(BrightnessContrastEffect);
+//#endregion
+//#region src/effects/ChromaticAberration.tsx
+var ChromaticAberration = /* @__PURE__ */ createEffectComponent(ChromaticAberrationEffect);
+//#endregion
 //#region src/effects/ColorAverage.tsx
-function Qe({ blendFunction: e = 23, ref: t }) {
-	let n = P(() => new l(e), [e]);
-	return X(n), /* @__PURE__ */ U("primitive", {
-		object: n,
-		ref: t
-	});
-}
+var ColorAverage = /* @__PURE__ */ createEffectComponent(ColorAverageEffect);
 //#endregion
 //#region src/effects/ColorDepth.tsx
-var $e = /* @__PURE__ */ $(u), et = /* @__PURE__ */ $(p), tt = /* @__PURE__ */ $(g), nt = /* @__PURE__ */ $(b);
+var ColorDepthImpl = /* @__PURE__ */ createEffectComponent(ColorDepthEffect);
+function ColorDepth({ bits, ...props }) {
+	if (bits !== void 0) props.bitDepth = bits;
+	return /* @__PURE__ */ jsx(ColorDepthImpl, { ...props });
+}
+//#endregion
+//#region src/effects/Depth.tsx
+var Depth = /* @__PURE__ */ createEffectComponent(DepthEffect);
+//#endregion
+//#region src/effects/DotScreen.tsx
+var DotScreen = /* @__PURE__ */ createEffectComponent(DotScreenEffect);
+//#endregion
+//#region src/effects/FXAA.tsx
+var FXAA = /* @__PURE__ */ createEffectComponent(FXAAEffect);
 //#endregion
 //#region src/effects/Glitch.tsx
-function rt({ active: e = !0, ref: t, ...n }) {
-	let r = a((e) => e.invalidate), i = Z(n, "delay"), o = Z(n, "duration"), s = Z(n, "strength"), c = Z(n, "chromaticAberrationOffset"), l = P(() => new x({
-		...n,
-		delay: i,
-		duration: o,
-		strength: s,
-		chromaticAberrationOffset: c
-	}), [
-		i,
-		o,
-		n,
-		s,
-		c
-	]);
-	return N(() => {
-		l.mode = e ? n.mode || S.SPORADIC : S.DISABLED, r();
-	}, [
-		e,
-		l,
-		r,
-		n.mode
-	]), X(l), /* @__PURE__ */ U("primitive", {
-		ref: t,
-		object: l
+var GlitchImpl = /* @__PURE__ */ createEffectComponent(GlitchEffect);
+function Glitch({ active = true, mode = GlitchMode.SPORADIC, dtSize, ...props }) {
+	const args = useMemo(() => [{ dtSize }], [dtSize]);
+	return /* @__PURE__ */ jsx(GlitchImpl, {
+		args,
+		mode: active ? mode : GlitchMode.DISABLED,
+		...props
 	});
 }
 //#endregion
 //#region src/effects/GodRays.tsx
-function it({ ref: e, ...t }) {
-	let { camera: n } = A(G), r = P(() => new C(n, J(t.sun), t), [n, t]);
-	return N(() => void (r.lightSource = J(t.sun)), [r, t.sun]), X(r), /* @__PURE__ */ U("primitive", {
-		ref: e,
-		object: r
+var LIVE_KEYS$5 = [
+	"blendMode-blendFunction",
+	"godRaysMaterial-density",
+	"godRaysMaterial-decay",
+	"godRaysMaterial-weight",
+	"godRaysMaterial-exposure",
+	"clampMax",
+	"blur",
+	"kernelSize",
+	"samples",
+	"width",
+	"height"
+];
+function get$1(effect, key) {
+	return key === "clampMax" ? effect.godRaysMaterial.maxIntensity : readPierced(effect, key);
+}
+function set$2(effect, key, value) {
+	if (key === "clampMax") effect.godRaysMaterial.maxIntensity = value;
+	else applyPierced(effect, key, value);
+}
+function GodRays({ sun, blendFunction, density, decay, weight, exposure, clampMax, blur, kernelSize, samples, width, height, resolutionScale, resolutionX, resolutionY, ref }) {
+	const { camera, autoClear } = use(EffectComposerContext);
+	const invalidate = useThree((state) => state.invalidate);
+	const effect = useMemo(() => new GodRaysEffect(camera, resolveRef(sun), {
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	}), [
+		camera,
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	]);
+	useEffect(() => {
+		if (autoClear !== false) console.warn("GodRays renders an internal extra pass that needs <EffectComposer autoClear={false}> - without it, occlusion by other objects will look wrong.");
+	}, [autoClear]);
+	useLayoutEffect(() => {
+		effect.lightSource = resolveRef(sun);
+		invalidate();
+	}, [
+		effect,
+		sun,
+		invalidate
+	]);
+	useLiveDefaults(effect, {
+		"blendMode-blendFunction": blendFunction,
+		"godRaysMaterial-density": density,
+		"godRaysMaterial-decay": decay,
+		"godRaysMaterial-weight": weight,
+		"godRaysMaterial-exposure": exposure,
+		clampMax,
+		blur,
+		kernelSize,
+		samples,
+		width,
+		height
+	}, LIVE_KEYS$5, get$1, set$2);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
 	});
 }
 //#endregion
 //#region src/effects/Grid.tsx
-function at({ size: e, ref: t, ...n }) {
-	let r = a((e) => e.invalidate), i = P(() => new w(n), [n]);
-	return N(() => {
-		e && i.setSize(e.width, e.height), r();
-	}, [
-		i,
-		e,
-		r
-	]), X(i), /* @__PURE__ */ U("primitive", {
-		ref: t,
-		object: i
+var GridImpl = /* @__PURE__ */ createEffectComponent(GridEffect);
+function Grid({ size, ref, ...props }) {
+	const invalidate = useThree((state) => state.invalidate);
+	const localRef = useRef(null);
+	useImperativeHandle(ref, () => localRef.current, []);
+	useLayoutEffect(() => {
+		if (size) {
+			localRef.current?.setSize(size.width, size.height);
+			invalidate();
+		}
+	}, [size, invalidate]);
+	return /* @__PURE__ */ jsx(GridImpl, {
+		ref: localRef,
+		...props
 	});
 }
 //#endregion
 //#region src/effects/HueSaturation.tsx
-var ot = /* @__PURE__ */ $(T), st = { fragmentShader: "\n    uniform float time;\n    uniform vec2 lensPosition;\n    uniform vec2 screenRes;\n    uniform vec3 colorGain;\n    uniform float starPoints;\n    uniform float glareSize;\n    uniform float flareSize;\n    uniform float flareSpeed;\n    uniform float flareShape;\n    uniform float haloScale;\n    uniform float opacity;\n    uniform bool animated;\n    uniform bool anamorphic;\n    uniform bool enabled;\n    uniform bool secondaryGhosts;\n    uniform bool starBurst;\n    uniform float ghostScale;\n    uniform bool aditionalStreaks;\n    uniform sampler2D lensDirtTexture;\n    vec2 vTexCoord;\n    \n    float rand(float n){return fract(sin(n) * 43758.5453123);}\n\n    float noise(float p){\n      float fl = floor(p);\n      float fc = fract(p);\n      return mix(rand(fl),rand(fl + 1.0), fc);\n    }\n\n    vec3 hsv2rgb(vec3 c)\n    {\n      vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n      vec3 p = abs(fract(c.xxx + k.xyz) * 6.0 - k.www);\n      return c.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), c.y);\n    }\n\n    float saturate(float x)\n    {\n      return clamp(x, 0.,1.);\n    }\n\n    vec2 rotateUV(vec2 uv, float rotation)\n    {\n      return vec2(\n          cos(rotation) * uv.x + sin(rotation) * uv.y,\n          cos(rotation) * uv.y - sin(rotation) * uv.x\n      );\n    }\n\n    // Based on https://www.shadertoy.com/view/XtKfRV\n    vec3 drawflare(vec2 p, float intensity, float rnd, float speed, int id)\n    {\n      float flarehueoffset = (1. / 32.) * float(id) * 0.1;\n      float lingrad = distance(vec2(0.), p);\n      float expgrad = 1. / exp(lingrad * (fract(rnd) * 0.66 + 0.33));\n      vec3 colgrad = hsv2rgb(vec3( fract( (expgrad * 8.) + speed * flareSpeed + flarehueoffset), pow(1.-abs(expgrad*2.-1.), 0.45), 20.0 * expgrad * intensity)); //rainbow spectrum effect\n\n      float internalStarPoints;\n\n      if(anamorphic){\n        internalStarPoints = 1.0;\n      } else{\n        internalStarPoints = starPoints;\n      }\n      \n      float blades = length(p * flareShape * sin(internalStarPoints * atan(p.x, p.y)));\n      \n      float comp = pow(1.-saturate(blades), ( anamorphic ? 100. : 12.));\n      comp += saturate(expgrad-0.9) * 3.;\n      comp = pow(comp * expgrad, 8. + (1.-intensity) * 5.);\n      \n      if(flareSpeed > 0.0){\n        return vec3(comp) * colgrad;\n      } else{\n        return vec3(comp) * flareSize * 15.;\n      }\n    }\n\n    float dist(vec3 a, vec3 b) { return abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z); }\n\n    vec3 saturate(vec3 x)\n    {\n      return clamp(x, vec3(0.0), vec3(1.0));\n    }\n\n    // Based on https://www.shadertoy.com/view/XtKfRV\n    float glare(vec2 uv, vec2 pos, float size)\n    {\n      vec2 main;\n\n      if(animated){\n        main = rotateUV(uv-pos, time * 0.1);      \n      } else{\n        main = uv-pos;     \n      }\n      \n      float ang = atan(main.y, main.x) * (anamorphic ? 1.0 : starPoints);\n      float dist = length(main); \n      dist = pow(dist, .9);\n      \n      float f0 = 1.0/(length(uv-pos)*(1.0/size*16.0)+.2);\n\n      return f0+f0*(sin((ang))*.2 +.3);\n    }\n\n    float sdHex(vec2 p){\n      p = abs(p);\n      vec2 q = vec2(p.x*2.0*0.5773503, p.y + p.x*0.5773503);\n      return dot(step(q.xy,q.yx), 1.0-q.yx);\n    }\n\n    //Based on https://www.shadertoy.com/view/dllSRX\n    float fpow(float x, float k){\n      return x > k ? pow((x-k)/(1.0-k),2.0) : 0.0;\n    }\n\n    vec3 renderhex(vec2 uv, vec2 p, float s, vec3 col){\n      uv -= p;\n      if (abs(uv.x) < 0.2*s && abs(uv.y) < 0.2*s){\n          return mix(vec3(0),mix(vec3(0),col,0.1 + fpow(length(uv/s),0.1)*10.0),smoothstep(0.0,0.1,sdHex(uv*20.0/s)));\n      }\n      return vec3(0);\n    }\n\n    // Based on https://www.shadertoy.com/view/4sX3Rs\n    vec3 LensFlare(vec2 uv, vec2 pos)\n    {\n      vec2 main = uv-pos;\n      vec2 uvd = uv*(length(uv));\n      \n      float ang = atan(main.x,main.y);\n      \n      float f0 = .3/(length(uv-pos)*16.0+1.0);\n      \n      f0 = f0*(sin(noise(sin(ang*3.9-(animated ? time : 0.0) * 0.3) * starPoints))*.2 );\n      \n      float f1 = max(0.01-pow(length(uv+1.2*pos),1.9),.0)*7.0;\n\n      float f2 = max(.9/(10.0+32.0*pow(length(uvd+0.99*pos),2.0)),.0)*0.35;\n      float f22 = max(.9/(11.0+32.0*pow(length(uvd+0.85*pos),2.0)),.0)*0.23;\n      float f23 = max(.9/(12.0+32.0*pow(length(uvd+0.95*pos),2.0)),.0)*0.6;\n      \n      vec2 uvx = mix(uv,uvd, 0.1);\n      \n      float f4 = max(0.01-pow(length(uvx+0.4*pos),2.9),.0)*4.02;\n      float f42 = max(0.0-pow(length(uvx+0.45*pos),2.9),.0)*4.1;\n      float f43 = max(0.01-pow(length(uvx+0.5*pos),2.9),.0)*4.6;\n      \n      uvx = mix(uv,uvd,-.4);\n      \n      float f5 = max(0.01-pow(length(uvx+0.1*pos),5.5),.0)*2.0;\n      float f52 = max(0.01-pow(length(uvx+0.2*pos),5.5),.0)*2.0;\n      float f53 = max(0.01-pow(length(uvx+0.1*pos),5.5),.0)*2.0;\n      \n      uvx = mix(uv,uvd, 2.1);\n      \n      float f6 = max(0.01-pow(length(uvx-0.3*pos),1.61),.0)*3.159;\n      float f62 = max(0.01-pow(length(uvx-0.325*pos),1.614),.0)*3.14;\n      float f63 = max(0.01-pow(length(uvx-0.389*pos),1.623),.0)*3.12;\n      \n      vec3 c = vec3(glare(uv,pos, glareSize));\n\n      vec2 prot;\n\n      if(animated){\n        prot = rotateUV(uv - pos, (time * 0.1));  \n      } else if(anamorphic){\n        prot = rotateUV(uv - pos, 1.570796);     \n      } else {\n        prot = uv - pos;\n      }\n\n      c += drawflare(prot, (anamorphic ? flareSize * 10. : flareSize), 0.1, time, 1);\n      \n      c.r+=f1+f2+f4+f5+f6; c.g+=f1+f22+f42+f52+f62; c.b+=f1+f23+f43+f53+f63;\n      c = c*1.3 * vec3(length(uvd)+.09);\n      c+=vec3(f0);\n      \n      return c;\n    }\n\n    vec3 cc(vec3 color, float factor,float factor2)\n    {\n      float w = color.x+color.y+color.z;\n      return mix(color,vec3(w)*factor,w*factor2);\n    }    \n\n    float rnd(vec2 p)\n    {\n      float f = fract(sin(dot(p, vec2(12.1234, 72.8392) )*45123.2));\n      return f;   \n    }\n\n    float rnd(float w)\n    {\n      float f = fract(sin(w)*1000.);\n      return f;   \n    }\n\n    float regShape(vec2 p, int N)\n    {\n      float f;\n      \n      float a=atan(p.x,p.y)+.2;\n      float b=6.28319/float(N);\n      f=smoothstep(.5,.51, cos(floor(.5+a/b)*b-a)*length(p.xy)* 2.0  -ghostScale);\n          \n      return f;\n    }\n\n    // Based on https://www.shadertoy.com/view/Xlc3D2\n    vec3 circle(vec2 p, float size, float decay, vec3 color, vec3 color2, float dist, vec2 position)\n    {\n      float l = length(p + position*(dist*2.))+size/2.;\n      float l2 = length(p + position*(dist*4.))+size/3.;\n      \n      float c = max(0.01-pow(length(p + position*dist), size*ghostScale), 0.0)*10.;\n      float c1 = max(0.001-pow(l-0.3, 1./40.)+sin(l*20.), 0.0)*3.;\n      float c2 =  max(0.09/pow(length(p-position*dist/.5)*1., .95), 0.0)/20.;\n      float s = max(0.02-pow(regShape(p*5. + position*dist*5. + decay, 6) , 1.), 0.0)*1.5;\n      \n      color = cos(vec3(0.44, .24, .2)*16. + dist/8.)*0.5+.5;\n      vec3 f = c*color;\n      f += c1*color;\n      f += c2*color;  \n      f +=  s*color;\n      return f;\n    }\n\n    vec4 getLensColor(float x){\n      return vec4(vec3(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(vec3(0., 0., 0.),\n        vec3(0., 0., 0.), smoothstep(0.0, 0.063, x)),\n        vec3(0., 0., 0.), smoothstep(0.063, 0.125, x)),\n        vec3(0.0, 0., 0.), smoothstep(0.125, 0.188, x)),\n        vec3(0.188, 0.131, 0.116), smoothstep(0.188, 0.227, x)),\n        vec3(0.31, 0.204, 0.537), smoothstep(0.227, 0.251, x)),\n        vec3(0.192, 0.106, 0.286), smoothstep(0.251, 0.314, x)),\n        vec3(0.102, 0.008, 0.341), smoothstep(0.314, 0.392, x)),\n        vec3(0.086, 0.0, 0.141), smoothstep(0.392, 0.502, x)),\n        vec3(1.0, 0.31, 0.0), smoothstep(0.502, 0.604, x)),\n        vec3(.1, 0.1, 0.1), smoothstep(0.604, 0.643, x)),\n        vec3(1.0, 0.929, 0.0), smoothstep(0.643, 0.761, x)),\n        vec3(1.0, 0.086, 0.424), smoothstep(0.761, 0.847, x)),\n        vec3(1.0, 0.49, 0.0), smoothstep(0.847, 0.89, x)),\n        vec3(0.945, 0.275, 0.475), smoothstep(0.89, 0.941, x)),\n        vec3(0.251, 0.275, 0.796), smoothstep(0.941, 1.0, x))),\n      1.0);\n    }\n\n    float dirtNoise(vec2 p){\n      vec2 f = fract(p);\n      f = (f * f) * (3.0 - (2.0 * f));    \n      float n = dot(floor(p), vec2(1.0, 157.0));\n      vec4 a = fract(sin(vec4(n + 0.0, n + 1.0, n + 157.0, n + 158.0)) * 43758.5453123);\n      return mix(mix(a.x, a.y, f.x), mix(a.z, a.w, f.x), f.y);\n    } \n\n    float fbm(vec2 p){\n      const mat2 m = mat2(0.80, -0.60, 0.60, 0.80);\n      float f = 0.0;\n      f += 0.5000*dirtNoise(p); p = m*p*2.02;\n      f += 0.2500*dirtNoise(p); p = m*p*2.03;\n      f += 0.1250*dirtNoise(p); p = m*p*2.01;\n      f += 0.0625*dirtNoise(p);\n      return f/0.9375;\n    }\n\n    vec4 getLensStar(vec2 p){\n      vec2 pp = (p - vec2(0.5)) * 2.0;\n      float a = atan(pp.y, pp.x);\n      vec4 cp = vec4(sin(a * 1.0), length(pp), sin(a * 13.0), sin(a * 53.0));\n      float d = sin(clamp(pow(length(vec2(0.5) - p) * 0.5 + haloScale /2., 5.0), 0.0, 1.0) * 3.14159);\n      vec3 c = vec3(d) * vec3(fbm(cp.xy * 16.0) * fbm(cp.zw * 9.0) * max(max(max(max(0.5, sin(a * 1.0)), sin(a * 3.0) * 0.8), sin(a * 7.0) * 0.8), sin(a * 9.0) * 10.6));\n      c *= vec3(mix(2.0, (sin(length(pp.xy) * 256.0) * 0.5) + 0.5, sin((clamp((length(pp.xy) - 0.875) / 0.1, 0.0, 1.0) + 0.0) * 2.0 * 3.14159) * 1.5) + 0.5) * 0.3275;\n      return vec4(vec3(c * 1.0), d);	\n    }\n\n    vec4 getLensDirt(vec2 p){\n      p.xy += vec2(fbm(p.yx * 3.0), fbm(p.yx * 2.0)) * 0.0825;\n      vec3 o = vec3(mix(0.125, 0.25, max(max(smoothstep(0.1, 0.0, length(p - vec2(0.25))),\n                                            smoothstep(0.4, 0.0, length(p - vec2(0.75)))),\n                                            smoothstep(0.8, 0.0, length(p - vec2(0.875, 0.125))))));\n      o += vec3(max(fbm(p * 1.0) - 0.5, 0.0)) * 0.5;\n      o += vec3(max(fbm(p * 2.0) - 0.5, 0.0)) * 0.5;\n      o += vec3(max(fbm(p * 4.0) - 0.5, 0.0)) * 0.25;\n      o += vec3(max(fbm(p * 8.0) - 0.75, 0.0)) * 1.0;\n      o += vec3(max(fbm(p * 16.0) - 0.75, 0.0)) * 0.75;\n      o += vec3(max(fbm(p * 64.0) - 0.75, 0.0)) * 0.5;\n      return vec4(clamp(o, vec3(0.15), vec3(1.0)), 1.0);	\n    }\n\n    vec4 textureLimited(sampler2D tex, vec2 texCoord){\n      if(((texCoord.x < 0.) || (texCoord.y < 0.)) || ((texCoord.x > 1.) || (texCoord.y > 1.))){\n        return vec4(0.0);\n      }else{\n        return texture(tex, texCoord); \n      }\n    }\n\n    vec4 textureDistorted(sampler2D tex, vec2 texCoord, vec2 direction, vec3 distortion) {\n      return vec4(textureLimited(tex, (texCoord + (direction * distortion.r))).r,\n                  textureLimited(tex, (texCoord + (direction * distortion.g))).g,\n                  textureLimited(tex, (texCoord + (direction * distortion.b))).b,\n                  1.0);\n    }\n\n    // Based on https://www.shadertoy.com/view/4sK3W3\n    vec4 getStartBurst(){\n      vec2 aspectTexCoord = vec2(1.0) - (((vTexCoord - vec2(0.5)) * vec2(1.0)) + vec2(0.5)); \n      vec2 texCoord = vec2(1.0) - vTexCoord; \n      vec2 ghostVec = (vec2(0.5) - texCoord) * 0.3 - lensPosition;\n      vec2 ghostVecAspectNormalized = normalize(ghostVec * vec2(1.0)) * vec2(1.0);\n      vec2 haloVec = normalize(ghostVec) * 0.6;\n      vec2 haloVecAspectNormalized = ghostVecAspectNormalized * 0.6;\n      vec2 texelSize = vec2(1.0) / vec2(screenRes.xy);\n      vec3 distortion = vec3(-(texelSize.x * 1.5), 0.2, texelSize.x * 1.5);\n      vec4 c = vec4(0.0);\n      for (int i = 0; i < 8; i++) {\n        vec2 offset = texCoord + (ghostVec * float(i));\n        c += textureDistorted(lensDirtTexture, offset, ghostVecAspectNormalized, distortion) * pow(max(0.0, 1.0 - (length(vec2(0.5) - offset) / length(vec2(0.5)))), 10.0);\n      }                       \n      vec2 haloOffset = texCoord + haloVecAspectNormalized; \n      return (c * getLensColor((length(vec2(0.5) - aspectTexCoord) / length(vec2(haloScale))))) + \n            (textureDistorted(lensDirtTexture, haloOffset, ghostVecAspectNormalized, distortion) * pow(max(0.0, 1.0 - (length(vec2(0.5) - haloOffset) / length(vec2(0.5)))), 10.0));\n    } \n\n    void mainImage(vec4 inputColor, vec2 uv, out vec4 outputColor)\n    {\n      vec2 myUV = uv -0.5;\n      myUV.y *= screenRes.y/screenRes.x;\n      vec2 finalLensPosition = lensPosition * 0.5;\n      finalLensPosition.y *= screenRes.y/screenRes.x;\n      \n      //First Lens flare pass\n      vec3 finalColor = LensFlare(myUV, finalLensPosition) * 20.0 * colorGain / 256.;\n\n      //Aditional streaks\n      if(aditionalStreaks){\n        vec3 circColor = vec3(0.9, 0.2, 0.1);\n        vec3 circColor2 = vec3(0.3, 0.1, 0.9);\n\n        for(float i=0.;i<10.;i++){\n          finalColor += circle(myUV, pow(rnd(i*2000.)*2.8, .1)+1.41, 0.0, circColor+i , circColor2+i, rnd(i*20.)*3.+0.2-.5, lensPosition);\n        }\n      }\n\n      //Alternative ghosts\n      if(secondaryGhosts){\n        vec3 altGhosts = vec3(0);\n        altGhosts += renderhex(myUV, -lensPosition*0.25, ghostScale * 1.4, vec3(0.25,0.35,0));\n        altGhosts += renderhex(myUV, lensPosition*0.25, ghostScale * 0.5, vec3(1,0.5,0.5));\n        altGhosts += renderhex(myUV, lensPosition*0.1, ghostScale * 1.6, vec3(1,1,1));\n        altGhosts += renderhex(myUV, lensPosition*1.8, ghostScale * 2.0, vec3(0,0.5,0.75));\n        altGhosts += renderhex(myUV, lensPosition*1.25, ghostScale * 0.8, vec3(1,1,0.5));\n        altGhosts += renderhex(myUV, -lensPosition*1.25, ghostScale * 5.0, vec3(0.5,0.5,0.25));\n        \n        //Circular ghosts\n        altGhosts += fpow(1.0 - abs(distance(lensPosition*0.8,myUV) - 0.7),0.985)*colorGain / 2100.;\n        finalColor += altGhosts;\n      }\n      \n\n      //Starburst                     \n      if(starBurst){\n        vTexCoord = myUV + 0.5;\n        vec4 lensMod = getLensDirt(myUV);\n        float tooBright = 1.0 - (clamp(0.5, 0.0, 0.5) * 2.0); \n        float tooDark = clamp(0.5 - 0.5, 0.0, 0.5) * 2.0;\n        lensMod += mix(lensMod, pow(lensMod * 2.0, vec4(2.0)) * 0.5, tooBright);\n        float lensStarRotationAngle = ((myUV.x + myUV.y)) * (1.0 / 6.0);\n        vec2 lensStarTexCoord = (mat2(cos(lensStarRotationAngle), -sin(lensStarRotationAngle), sin(lensStarRotationAngle), cos(lensStarRotationAngle)) * vTexCoord);\n        lensMod += getLensStar(lensStarTexCoord) * 2.;\n        \n        finalColor += clamp((lensMod.rgb * getStartBurst().rgb ), 0.01, 1.0);\n      }\n\n      //Final composed output\n      if(enabled){\n        outputColor = vec4(mix(finalColor, vec3(.0), opacity) + inputColor.rgb, inputColor.a);\n      } else {\n        outputColor = vec4(inputColor);\n      }\n    }\n  " }, ct = class extends _ {
-	constructor({ blendFunction: e, enabled: t, glareSize: n, lensPosition: r, screenRes: i, starPoints: a, flareSize: o, flareSpeed: s, flareShape: c, animated: l, anamorphic: u, colorGain: d, lensDirtTexture: f, haloScale: p, secondaryGhosts: m, aditionalStreaks: h, ghostScale: g, opacity: _, starBurst: v }) {
-		super("LensFlareEffect", st.fragmentShader, {
-			blendFunction: e,
+var HueSaturation = /* @__PURE__ */ createEffectComponent(HueSaturationEffect);
+//#endregion
+//#region src/effects/LensFlare.tsx
+var LensFlareShader = { fragmentShader: `
+    uniform float time;
+    uniform vec2 lensPosition;
+    uniform vec2 screenRes;
+    uniform vec3 colorGain;
+    uniform float starPoints;
+    uniform float glareSize;
+    uniform float flareSize;
+    uniform float flareSpeed;
+    uniform float flareShape;
+    uniform float haloScale;
+    uniform float opacity;
+    uniform bool animated;
+    uniform bool anamorphic;
+    uniform bool enabled;
+    uniform bool secondaryGhosts;
+    uniform bool starBurst;
+    uniform float ghostScale;
+    uniform bool aditionalStreaks;
+    uniform sampler2D lensDirtTexture;
+    vec2 vTexCoord;
+    
+    float rand(float n){return fract(sin(n) * 43758.5453123);}
+
+    float noise(float p){
+      float fl = floor(p);
+      float fc = fract(p);
+      return mix(rand(fl),rand(fl + 1.0), fc);
+    }
+
+    vec3 hsv2rgb(vec3 c)
+    {
+      vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+      vec3 p = abs(fract(c.xxx + k.xyz) * 6.0 - k.www);
+      return c.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), c.y);
+    }
+
+    float saturate(float x)
+    {
+      return clamp(x, 0.,1.);
+    }
+
+    vec2 rotateUV(vec2 uv, float rotation)
+    {
+      return vec2(
+          cos(rotation) * uv.x + sin(rotation) * uv.y,
+          cos(rotation) * uv.y - sin(rotation) * uv.x
+      );
+    }
+
+    // Based on https://www.shadertoy.com/view/XtKfRV
+    vec3 drawflare(vec2 p, float intensity, float rnd, float speed, int id)
+    {
+      float flarehueoffset = (1. / 32.) * float(id) * 0.1;
+      float lingrad = distance(vec2(0.), p);
+      float expgrad = 1. / exp(lingrad * (fract(rnd) * 0.66 + 0.33));
+      vec3 colgrad = hsv2rgb(vec3( fract( (expgrad * 8.) + speed * flareSpeed + flarehueoffset), pow(1.-abs(expgrad*2.-1.), 0.45), 20.0 * expgrad * intensity)); //rainbow spectrum effect
+
+      float internalStarPoints;
+
+      if(anamorphic){
+        internalStarPoints = 1.0;
+      } else{
+        internalStarPoints = starPoints;
+      }
+      
+      float blades = length(p * flareShape * sin(internalStarPoints * atan(p.x, p.y)));
+      
+      float comp = pow(1.-saturate(blades), ( anamorphic ? 100. : 12.));
+      comp += saturate(expgrad-0.9) * 3.;
+      comp = pow(comp * expgrad, 8. + (1.-intensity) * 5.);
+      
+      if(flareSpeed > 0.0){
+        return vec3(comp) * colgrad;
+      } else{
+        return vec3(comp) * flareSize * 15.;
+      }
+    }
+
+    float dist(vec3 a, vec3 b) { return abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z); }
+
+    vec3 saturate(vec3 x)
+    {
+      return clamp(x, vec3(0.0), vec3(1.0));
+    }
+
+    // Based on https://www.shadertoy.com/view/XtKfRV
+    float glare(vec2 uv, vec2 pos, float size)
+    {
+      vec2 main;
+
+      if(animated){
+        main = rotateUV(uv-pos, time * 0.1);      
+      } else{
+        main = uv-pos;     
+      }
+      
+      float ang = atan(main.y, main.x) * (anamorphic ? 1.0 : starPoints);
+      float dist = length(main); 
+      dist = pow(dist, .9);
+      
+      float f0 = 1.0/(length(uv-pos)*(1.0/size*16.0)+.2);
+
+      return f0+f0*(sin((ang))*.2 +.3);
+    }
+
+    float sdHex(vec2 p){
+      p = abs(p);
+      vec2 q = vec2(p.x*2.0*0.5773503, p.y + p.x*0.5773503);
+      return dot(step(q.xy,q.yx), 1.0-q.yx);
+    }
+
+    //Based on https://www.shadertoy.com/view/dllSRX
+    float fpow(float x, float k){
+      return x > k ? pow((x-k)/(1.0-k),2.0) : 0.0;
+    }
+
+    vec3 renderhex(vec2 uv, vec2 p, float s, vec3 col){
+      uv -= p;
+      if (abs(uv.x) < 0.2*s && abs(uv.y) < 0.2*s){
+          return mix(vec3(0),mix(vec3(0),col,0.1 + fpow(length(uv/s),0.1)*10.0),smoothstep(0.0,0.1,sdHex(uv*20.0/s)));
+      }
+      return vec3(0);
+    }
+
+    // Based on https://www.shadertoy.com/view/4sX3Rs
+    vec3 LensFlare(vec2 uv, vec2 pos)
+    {
+      vec2 main = uv-pos;
+      vec2 uvd = uv*(length(uv));
+      
+      float ang = atan(main.x,main.y);
+      
+      float f0 = .3/(length(uv-pos)*16.0+1.0);
+      
+      f0 = f0*(sin(noise(sin(ang*3.9-(animated ? time : 0.0) * 0.3) * starPoints))*.2 );
+      
+      float f1 = max(0.01-pow(length(uv+1.2*pos),1.9),.0)*7.0;
+
+      float f2 = max(.9/(10.0+32.0*pow(length(uvd+0.99*pos),2.0)),.0)*0.35;
+      float f22 = max(.9/(11.0+32.0*pow(length(uvd+0.85*pos),2.0)),.0)*0.23;
+      float f23 = max(.9/(12.0+32.0*pow(length(uvd+0.95*pos),2.0)),.0)*0.6;
+      
+      vec2 uvx = mix(uv,uvd, 0.1);
+      
+      float f4 = max(0.01-pow(length(uvx+0.4*pos),2.9),.0)*4.02;
+      float f42 = max(0.0-pow(length(uvx+0.45*pos),2.9),.0)*4.1;
+      float f43 = max(0.01-pow(length(uvx+0.5*pos),2.9),.0)*4.6;
+      
+      uvx = mix(uv,uvd,-.4);
+      
+      float f5 = max(0.01-pow(length(uvx+0.1*pos),5.5),.0)*2.0;
+      float f52 = max(0.01-pow(length(uvx+0.2*pos),5.5),.0)*2.0;
+      float f53 = max(0.01-pow(length(uvx+0.1*pos),5.5),.0)*2.0;
+      
+      uvx = mix(uv,uvd, 2.1);
+      
+      float f6 = max(0.01-pow(length(uvx-0.3*pos),1.61),.0)*3.159;
+      float f62 = max(0.01-pow(length(uvx-0.325*pos),1.614),.0)*3.14;
+      float f63 = max(0.01-pow(length(uvx-0.389*pos),1.623),.0)*3.12;
+      
+      vec3 c = vec3(glare(uv,pos, glareSize));
+
+      vec2 prot;
+
+      if(animated){
+        prot = rotateUV(uv - pos, (time * 0.1));  
+      } else if(anamorphic){
+        prot = rotateUV(uv - pos, 1.570796);     
+      } else {
+        prot = uv - pos;
+      }
+
+      c += drawflare(prot, (anamorphic ? flareSize * 10. : flareSize), 0.1, time, 1);
+      
+      c.r+=f1+f2+f4+f5+f6; c.g+=f1+f22+f42+f52+f62; c.b+=f1+f23+f43+f53+f63;
+      c = c*1.3 * vec3(length(uvd)+.09);
+      c+=vec3(f0);
+      
+      return c;
+    }
+
+    vec3 cc(vec3 color, float factor,float factor2)
+    {
+      float w = color.x+color.y+color.z;
+      return mix(color,vec3(w)*factor,w*factor2);
+    }    
+
+    float rnd(vec2 p)
+    {
+      float f = fract(sin(dot(p, vec2(12.1234, 72.8392) )*45123.2));
+      return f;   
+    }
+
+    float rnd(float w)
+    {
+      float f = fract(sin(w)*1000.);
+      return f;   
+    }
+
+    float regShape(vec2 p, int N)
+    {
+      float f;
+      
+      float a=atan(p.x,p.y)+.2;
+      float b=6.28319/float(N);
+      f=smoothstep(.5,.51, cos(floor(.5+a/b)*b-a)*length(p.xy)* 2.0  -ghostScale);
+          
+      return f;
+    }
+
+    // Based on https://www.shadertoy.com/view/Xlc3D2
+    vec3 circle(vec2 p, float size, float decay, vec3 color, vec3 color2, float dist, vec2 position)
+    {
+      float l = length(p + position*(dist*2.))+size/2.;
+      float l2 = length(p + position*(dist*4.))+size/3.;
+      
+      float c = max(0.01-pow(length(p + position*dist), size*ghostScale), 0.0)*10.;
+      float c1 = max(0.001-pow(l-0.3, 1./40.)+sin(l*20.), 0.0)*3.;
+      float c2 =  max(0.09/pow(length(p-position*dist/.5)*1., .95), 0.0)/20.;
+      float s = max(0.02-pow(regShape(p*5. + position*dist*5. + decay, 6) , 1.), 0.0)*1.5;
+      
+      color = cos(vec3(0.44, .24, .2)*16. + dist/8.)*0.5+.5;
+      vec3 f = c*color;
+      f += c1*color;
+      f += c2*color;  
+      f +=  s*color;
+      return f;
+    }
+
+    vec4 getLensColor(float x){
+      return vec4(vec3(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(vec3(0., 0., 0.),
+        vec3(0., 0., 0.), smoothstep(0.0, 0.063, x)),
+        vec3(0., 0., 0.), smoothstep(0.063, 0.125, x)),
+        vec3(0.0, 0., 0.), smoothstep(0.125, 0.188, x)),
+        vec3(0.188, 0.131, 0.116), smoothstep(0.188, 0.227, x)),
+        vec3(0.31, 0.204, 0.537), smoothstep(0.227, 0.251, x)),
+        vec3(0.192, 0.106, 0.286), smoothstep(0.251, 0.314, x)),
+        vec3(0.102, 0.008, 0.341), smoothstep(0.314, 0.392, x)),
+        vec3(0.086, 0.0, 0.141), smoothstep(0.392, 0.502, x)),
+        vec3(1.0, 0.31, 0.0), smoothstep(0.502, 0.604, x)),
+        vec3(.1, 0.1, 0.1), smoothstep(0.604, 0.643, x)),
+        vec3(1.0, 0.929, 0.0), smoothstep(0.643, 0.761, x)),
+        vec3(1.0, 0.086, 0.424), smoothstep(0.761, 0.847, x)),
+        vec3(1.0, 0.49, 0.0), smoothstep(0.847, 0.89, x)),
+        vec3(0.945, 0.275, 0.475), smoothstep(0.89, 0.941, x)),
+        vec3(0.251, 0.275, 0.796), smoothstep(0.941, 1.0, x))),
+      1.0);
+    }
+
+    float dirtNoise(vec2 p){
+      vec2 f = fract(p);
+      f = (f * f) * (3.0 - (2.0 * f));    
+      float n = dot(floor(p), vec2(1.0, 157.0));
+      vec4 a = fract(sin(vec4(n + 0.0, n + 1.0, n + 157.0, n + 158.0)) * 43758.5453123);
+      return mix(mix(a.x, a.y, f.x), mix(a.z, a.w, f.x), f.y);
+    } 
+
+    float fbm(vec2 p){
+      const mat2 m = mat2(0.80, -0.60, 0.60, 0.80);
+      float f = 0.0;
+      f += 0.5000*dirtNoise(p); p = m*p*2.02;
+      f += 0.2500*dirtNoise(p); p = m*p*2.03;
+      f += 0.1250*dirtNoise(p); p = m*p*2.01;
+      f += 0.0625*dirtNoise(p);
+      return f/0.9375;
+    }
+
+    vec4 getLensStar(vec2 p){
+      vec2 pp = (p - vec2(0.5)) * 2.0;
+      float a = atan(pp.y, pp.x);
+      vec4 cp = vec4(sin(a * 1.0), length(pp), sin(a * 13.0), sin(a * 53.0));
+      float d = sin(clamp(pow(length(vec2(0.5) - p) * 0.5 + haloScale /2., 5.0), 0.0, 1.0) * 3.14159);
+      vec3 c = vec3(d) * vec3(fbm(cp.xy * 16.0) * fbm(cp.zw * 9.0) * max(max(max(max(0.5, sin(a * 1.0)), sin(a * 3.0) * 0.8), sin(a * 7.0) * 0.8), sin(a * 9.0) * 10.6));
+      c *= vec3(mix(2.0, (sin(length(pp.xy) * 256.0) * 0.5) + 0.5, sin((clamp((length(pp.xy) - 0.875) / 0.1, 0.0, 1.0) + 0.0) * 2.0 * 3.14159) * 1.5) + 0.5) * 0.3275;
+      return vec4(vec3(c * 1.0), d);	
+    }
+
+    vec4 getLensDirt(vec2 p){
+      p.xy += vec2(fbm(p.yx * 3.0), fbm(p.yx * 2.0)) * 0.0825;
+      vec3 o = vec3(mix(0.125, 0.25, max(max(smoothstep(0.1, 0.0, length(p - vec2(0.25))),
+                                            smoothstep(0.4, 0.0, length(p - vec2(0.75)))),
+                                            smoothstep(0.8, 0.0, length(p - vec2(0.875, 0.125))))));
+      o += vec3(max(fbm(p * 1.0) - 0.5, 0.0)) * 0.5;
+      o += vec3(max(fbm(p * 2.0) - 0.5, 0.0)) * 0.5;
+      o += vec3(max(fbm(p * 4.0) - 0.5, 0.0)) * 0.25;
+      o += vec3(max(fbm(p * 8.0) - 0.75, 0.0)) * 1.0;
+      o += vec3(max(fbm(p * 16.0) - 0.75, 0.0)) * 0.75;
+      o += vec3(max(fbm(p * 64.0) - 0.75, 0.0)) * 0.5;
+      return vec4(clamp(o, vec3(0.15), vec3(1.0)), 1.0);	
+    }
+
+    vec4 textureLimited(sampler2D tex, vec2 texCoord){
+      if(((texCoord.x < 0.) || (texCoord.y < 0.)) || ((texCoord.x > 1.) || (texCoord.y > 1.))){
+        return vec4(0.0);
+      }else{
+        return texture(tex, texCoord); 
+      }
+    }
+
+    vec4 textureDistorted(sampler2D tex, vec2 texCoord, vec2 direction, vec3 distortion) {
+      return vec4(textureLimited(tex, (texCoord + (direction * distortion.r))).r,
+                  textureLimited(tex, (texCoord + (direction * distortion.g))).g,
+                  textureLimited(tex, (texCoord + (direction * distortion.b))).b,
+                  1.0);
+    }
+
+    // Based on https://www.shadertoy.com/view/4sK3W3
+    vec4 getStartBurst(){
+      vec2 aspectTexCoord = vec2(1.0) - (((vTexCoord - vec2(0.5)) * vec2(1.0)) + vec2(0.5)); 
+      vec2 texCoord = vec2(1.0) - vTexCoord; 
+      vec2 ghostVec = (vec2(0.5) - texCoord) * 0.3 - lensPosition;
+      vec2 ghostVecAspectNormalized = normalize(ghostVec * vec2(1.0)) * vec2(1.0);
+      vec2 haloVec = normalize(ghostVec) * 0.6;
+      vec2 haloVecAspectNormalized = ghostVecAspectNormalized * 0.6;
+      vec2 texelSize = vec2(1.0) / vec2(screenRes.xy);
+      vec3 distortion = vec3(-(texelSize.x * 1.5), 0.2, texelSize.x * 1.5);
+      vec4 c = vec4(0.0);
+      for (int i = 0; i < 8; i++) {
+        vec2 offset = texCoord + (ghostVec * float(i));
+        c += textureDistorted(lensDirtTexture, offset, ghostVecAspectNormalized, distortion) * pow(max(0.0, 1.0 - (length(vec2(0.5) - offset) / length(vec2(0.5)))), 10.0);
+      }                       
+      vec2 haloOffset = texCoord + haloVecAspectNormalized; 
+      return (c * getLensColor((length(vec2(0.5) - aspectTexCoord) / length(vec2(haloScale))))) + 
+            (textureDistorted(lensDirtTexture, haloOffset, ghostVecAspectNormalized, distortion) * pow(max(0.0, 1.0 - (length(vec2(0.5) - haloOffset) / length(vec2(0.5)))), 10.0));
+    } 
+
+    void mainImage(vec4 inputColor, vec2 uv, out vec4 outputColor)
+    {
+      vec2 myUV = uv -0.5;
+      myUV.y *= screenRes.y/screenRes.x;
+      vec2 finalLensPosition = lensPosition * 0.5;
+      finalLensPosition.y *= screenRes.y/screenRes.x;
+      
+      //First Lens flare pass
+      vec3 finalColor = LensFlare(myUV, finalLensPosition) * 20.0 * colorGain / 256.;
+
+      //Aditional streaks
+      if(aditionalStreaks){
+        vec3 circColor = vec3(0.9, 0.2, 0.1);
+        vec3 circColor2 = vec3(0.3, 0.1, 0.9);
+
+        for(float i=0.;i<10.;i++){
+          finalColor += circle(myUV, pow(rnd(i*2000.)*2.8, .1)+1.41, 0.0, circColor+i , circColor2+i, rnd(i*20.)*3.+0.2-.5, lensPosition);
+        }
+      }
+
+      //Alternative ghosts
+      if(secondaryGhosts){
+        vec3 altGhosts = vec3(0);
+        altGhosts += renderhex(myUV, -lensPosition*0.25, ghostScale * 1.4, vec3(0.25,0.35,0));
+        altGhosts += renderhex(myUV, lensPosition*0.25, ghostScale * 0.5, vec3(1,0.5,0.5));
+        altGhosts += renderhex(myUV, lensPosition*0.1, ghostScale * 1.6, vec3(1,1,1));
+        altGhosts += renderhex(myUV, lensPosition*1.8, ghostScale * 2.0, vec3(0,0.5,0.75));
+        altGhosts += renderhex(myUV, lensPosition*1.25, ghostScale * 0.8, vec3(1,1,0.5));
+        altGhosts += renderhex(myUV, -lensPosition*1.25, ghostScale * 5.0, vec3(0.5,0.5,0.25));
+        
+        //Circular ghosts
+        altGhosts += fpow(1.0 - abs(distance(lensPosition*0.8,myUV) - 0.7),0.985)*colorGain / 2100.;
+        finalColor += altGhosts;
+      }
+      
+
+      //Starburst                     
+      if(starBurst){
+        vTexCoord = myUV + 0.5;
+        vec4 lensMod = getLensDirt(myUV);
+        float tooBright = 1.0 - (clamp(0.5, 0.0, 0.5) * 2.0); 
+        float tooDark = clamp(0.5 - 0.5, 0.0, 0.5) * 2.0;
+        lensMod += mix(lensMod, pow(lensMod * 2.0, vec4(2.0)) * 0.5, tooBright);
+        float lensStarRotationAngle = ((myUV.x + myUV.y)) * (1.0 / 6.0);
+        vec2 lensStarTexCoord = (mat2(cos(lensStarRotationAngle), -sin(lensStarRotationAngle), sin(lensStarRotationAngle), cos(lensStarRotationAngle)) * vTexCoord);
+        lensMod += getLensStar(lensStarTexCoord) * 2.;
+        
+        finalColor += clamp((lensMod.rgb * getStartBurst().rgb ), 0.01, 1.0);
+      }
+
+      //Final composed output
+      if(enabled){
+        outputColor = vec4(mix(finalColor, vec3(.0), opacity) + inputColor.rgb, inputColor.a);
+      } else {
+        outputColor = vec4(inputColor);
+      }
+    }
+  ` };
+var LensFlareEffect = class extends Effect {
+	constructor({ blendFunction = 23, enabled = true, glareSize = .2, lensPosition = new Vector3(-25, 6, -60), screenRes = new Vector2(0, 0), starPoints = 6, flareSize = .01, flareSpeed = .01, flareShape = .01, animated = true, anamorphic = false, colorGain = new Color(20, 20, 20), lensDirtTexture = null, haloScale = .5, secondaryGhosts = true, aditionalStreaks = true, ghostScale = 0, opacity = 1, starBurst = false } = {}) {
+		super("LensFlareEffect", LensFlareShader.fragmentShader, {
+			blendFunction,
 			uniforms: /* @__PURE__ */ new Map([
-				["enabled", new B(t)],
-				["glareSize", new B(n)],
-				["lensPosition", new B(r)],
-				["time", new B(0)],
-				["screenRes", new B(i)],
-				["starPoints", new B(a)],
-				["flareSize", new B(o)],
-				["flareSpeed", new B(s)],
-				["flareShape", new B(c)],
-				["animated", new B(l)],
-				["anamorphic", new B(u)],
-				["colorGain", new B(d)],
-				["lensDirtTexture", new B(f)],
-				["haloScale", new B(p)],
-				["secondaryGhosts", new B(m)],
-				["aditionalStreaks", new B(h)],
-				["ghostScale", new B(g)],
-				["starBurst", new B(v)],
-				["opacity", new B(_)]
+				["enabled", new Uniform(enabled)],
+				["glareSize", new Uniform(glareSize)],
+				["lensPosition", new Uniform(lensPosition)],
+				["time", new Uniform(0)],
+				["screenRes", new Uniform(screenRes)],
+				["starPoints", new Uniform(starPoints)],
+				["flareSize", new Uniform(flareSize)],
+				["flareSpeed", new Uniform(flareSpeed)],
+				["flareShape", new Uniform(flareShape)],
+				["animated", new Uniform(animated)],
+				["anamorphic", new Uniform(anamorphic)],
+				["colorGain", new Uniform(colorGain)],
+				["lensDirtTexture", new Uniform(lensDirtTexture)],
+				["haloScale", new Uniform(haloScale)],
+				["secondaryGhosts", new Uniform(secondaryGhosts)],
+				["aditionalStreaks", new Uniform(aditionalStreaks)],
+				["ghostScale", new Uniform(ghostScale)],
+				["starBurst", new Uniform(starBurst)],
+				["opacity", new Uniform(opacity)]
 			])
 		});
 	}
-	update(e, t, n) {
-		let r = this.uniforms.get("time");
-		r && (r.value += n);
-	}
-}, lt = /* @__PURE__ */ $(ct), ut = ({ smoothTime: e = .07, blendFunction: t = 23, enabled: n = !0, glareSize: i = .2, lensPosition: o = new H(-25, 6, -60), screenRes: s = new V(0, 0), starPoints: c = 6, flareSize: l = .01, flareSpeed: u = .01, flareShape: d = .01, animated: f = !0, anamorphic: p = !1, colorGain: m = new L(20, 20, 20), lensDirtTexture: h = null, haloScale: g = .5, secondaryGhosts: _ = !0, aditionalStreaks: v = !0, ghostScale: y = 0, opacity: b = 1, starBurst: x = !1 }) => {
-	let S = a(({ viewport: e }) => e), C = a(({ raycaster: e }) => e), { scene: w, camera: T } = A(G), [E] = I(() => new V()), [D] = I(() => new H()), O = F(null);
-	return r((t, n) => {
-		if (!O?.current) return;
-		let r = O.current.uniforms.get("lensPosition"), i = O.current.uniforms.get("opacity");
-		if (!r || !i) return;
-		let a = 1;
-		if (D.copy(o).project(T), D.z > 1) return;
-		r.value.x = D.x, r.value.y = D.y, E.x = D.x, E.y = D.y, C.setFromCamera(E, T);
-		let { object: s } = C.intersectObjects(w.children, !0)[0] || {};
-		s && (s.userData?.lensflare === "no-occlusion" ? a = 0 : s instanceof be && (s.material.uniforms?._transmission?.value > .2 || s.material._transmission && s.material._transmission > .2 ? a = .2 : s.material.transparent && (a = s.material.opacity))), Ee.damp(i, "value", a, e, n);
-	}), j(() => {
-		if (!O?.current) return;
-		let e = O.current.uniforms.get("screenRes");
-		e && (e.value.x = S.width, e.value.y = S.height);
-	}, [S]), /* @__PURE__ */ U(lt, {
-		ref: O,
-		blendFunction: t,
-		enabled: n,
-		glareSize: i,
-		lensPosition: o,
-		screenRes: s,
-		starPoints: c,
-		flareSize: l,
-		flareSpeed: u,
-		flareShape: d,
-		animated: f,
-		anamorphic: p,
-		colorGain: m,
-		lensDirtTexture: h,
-		haloScale: g,
-		secondaryGhosts: _,
-		aditionalStreaks: v,
-		ghostScale: y,
-		opacity: b,
-		starBurst: x
+	update(_renderer, _inputBuffer, deltaTime) {
+		const time = this.uniforms.get("time");
+		if (time) time.value += deltaTime;
+	}
+	u(name) {
+		return this.uniforms.get(name).value;
+	}
+	setU(name, value) {
+		this.uniforms.get(name).value = value;
+	}
+	get enabled() {
+		return this.u("enabled");
+	}
+	set enabled(value) {
+		this.setU("enabled", value);
+	}
+	get glareSize() {
+		return this.u("glareSize");
+	}
+	set glareSize(value) {
+		this.setU("glareSize", value);
+	}
+	get lensPosition() {
+		return this.u("lensPosition");
+	}
+	set lensPosition(value) {
+		this.setU("lensPosition", value);
+	}
+	get screenRes() {
+		return this.u("screenRes");
+	}
+	set screenRes(value) {
+		this.setU("screenRes", value);
+	}
+	get starPoints() {
+		return this.u("starPoints");
+	}
+	set starPoints(value) {
+		this.setU("starPoints", value);
+	}
+	get flareSize() {
+		return this.u("flareSize");
+	}
+	set flareSize(value) {
+		this.setU("flareSize", value);
+	}
+	get flareSpeed() {
+		return this.u("flareSpeed");
+	}
+	set flareSpeed(value) {
+		this.setU("flareSpeed", value);
+	}
+	get flareShape() {
+		return this.u("flareShape");
+	}
+	set flareShape(value) {
+		this.setU("flareShape", value);
+	}
+	get animated() {
+		return this.u("animated");
+	}
+	set animated(value) {
+		this.setU("animated", value);
+	}
+	get anamorphic() {
+		return this.u("anamorphic");
+	}
+	set anamorphic(value) {
+		this.setU("anamorphic", value);
+	}
+	get colorGain() {
+		return this.u("colorGain");
+	}
+	set colorGain(value) {
+		this.setU("colorGain", value);
+	}
+	get lensDirtTexture() {
+		return this.u("lensDirtTexture");
+	}
+	set lensDirtTexture(value) {
+		this.setU("lensDirtTexture", value);
+	}
+	get haloScale() {
+		return this.u("haloScale");
+	}
+	set haloScale(value) {
+		this.setU("haloScale", value);
+	}
+	get secondaryGhosts() {
+		return this.u("secondaryGhosts");
+	}
+	set secondaryGhosts(value) {
+		this.setU("secondaryGhosts", value);
+	}
+	get aditionalStreaks() {
+		return this.u("aditionalStreaks");
+	}
+	set aditionalStreaks(value) {
+		this.setU("aditionalStreaks", value);
+	}
+	get ghostScale() {
+		return this.u("ghostScale");
+	}
+	set ghostScale(value) {
+		this.setU("ghostScale", value);
+	}
+	get starBurst() {
+		return this.u("starBurst");
+	}
+	set starBurst(value) {
+		this.setU("starBurst", value);
+	}
+	get opacity() {
+		return this.u("opacity");
+	}
+	set opacity(value) {
+		this.setU("opacity", value);
+	}
+};
+var LensFlareWrapped = /* @__PURE__ */ createEffectComponent(LensFlareEffect);
+var DEFAULT_SCREEN_RES = /* @__PURE__ */ new Vector2(0, 0);
+var DEFAULT_LENS_POSITION = /* @__PURE__ */ new Vector3(-25, 6, -60);
+var LensFlare = (props) => {
+	const { ref: forwardedRef, smoothTime = .07, blendFunction = 23, enabled = true, glareSize = .2, screenRes, starPoints = 6, flareSize = .01, flareSpeed = .01, flareShape = .01, animated = true, anamorphic = false, colorGain = new Color(20, 20, 20), lensDirtTexture = null, haloScale = .5, secondaryGhosts = true, aditionalStreaks = true, ghostScale = 0, opacity = 1, starBurst = false } = props;
+	const lensPosition = useVector3({ lensPosition: props.lensPosition ?? DEFAULT_LENS_POSITION }, "lensPosition");
+	const viewport = useThree(({ viewport }) => viewport);
+	const raycaster = useThree(({ raycaster }) => raycaster);
+	const { scene, camera } = useContext(EffectComposerContext);
+	const [raycasterPos] = useState(() => new Vector2());
+	const [projectedPosition] = useState(() => new Vector3());
+	const ref = useRef(null);
+	const setRef = useMergeRefs(ref, forwardedRef);
+	useFrame((_, delta) => {
+		if (!ref?.current) return;
+		const uLensPosition = ref.current.uniforms.get("lensPosition");
+		const uOpacity = ref.current.uniforms.get("opacity");
+		if (!uLensPosition || !uOpacity) return;
+		let target = 0;
+		projectedPosition.copy(lensPosition).project(camera);
+		if (projectedPosition.z > 1) return;
+		uLensPosition.value.x = projectedPosition.x;
+		uLensPosition.value.y = projectedPosition.y;
+		raycasterPos.x = projectedPosition.x;
+		raycasterPos.y = projectedPosition.y;
+		raycaster.setFromCamera(raycasterPos, camera);
+		const { object } = raycaster.intersectObjects(scene.children, true)[0] || {};
+		if (object) {
+			target = 1;
+			if (object.userData?.lensflare === "no-occlusion") target = 0;
+			else if (object instanceof Mesh) {
+				if (object.material.uniforms?._transmission?.value > .2) target = .2;
+				else if (object.material._transmission && object.material._transmission > .2) target = .2;
+				else if (object.material.transparent) target = object.material.opacity;
+			}
+		}
+		easing.damp(uOpacity, "value", target, smoothTime, delta);
+	});
+	useEffect(() => {
+		if (!ref?.current) return;
+		const screenRes = ref.current.uniforms.get("screenRes");
+		if (screenRes) {
+			screenRes.value.x = viewport.width;
+			screenRes.value.y = viewport.height;
+		}
+	}, [viewport]);
+	return /* @__PURE__ */ jsx(LensFlareWrapped, {
+		ref: setRef,
+		blendFunction,
+		enabled,
+		glareSize,
+		lensPosition,
+		screenRes: screenRes ?? DEFAULT_SCREEN_RES,
+		starPoints,
+		flareSize,
+		flareSpeed,
+		flareShape,
+		animated,
+		anamorphic,
+		colorGain,
+		lensDirtTexture,
+		haloScale,
+		secondaryGhosts,
+		aditionalStreaks,
+		ghostScale,
+		opacity,
+		starBurst
 	});
 };
 //#endregion
 //#region src/effects/LUT.tsx
-function dt({ lut: e, tetrahedralInterpolation: t, ref: n, ...r }) {
-	let i = P(() => new E(e, r), [e, r]), o = a((e) => e.invalidate);
-	return N(() => {
-		t && (i.tetrahedralInterpolation = t), e && (i.lut = e), o();
-	}, [
-		i,
-		o,
-		e,
-		t
-	]), X(i), /* @__PURE__ */ U("primitive", {
-		ref: n,
-		object: i
+var LIVE_KEYS$4 = [
+	"blendMode-blendFunction",
+	"lut",
+	"tetrahedralInterpolation"
+];
+function LUT({ lut, blendFunction, tetrahedralInterpolation, ref }) {
+	const effect = useMemo(() => new LUT3DEffect(lut), []);
+	useLiveDefaults(effect, {
+		"blendMode-blendFunction": blendFunction,
+		lut,
+		tetrahedralInterpolation
+	}, LIVE_KEYS$4);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
 	});
 }
 //#endregion
 //#region src/effects/Noise.tsx
-var ft = /* @__PURE__ */ $(O, { blendFunction: 5 });
+var NoiseImpl = /* @__PURE__ */ createEffectComponent(NoiseEffect);
+function Noise({ blendFunction = 5, ...props }) {
+	return /* @__PURE__ */ jsx(NoiseImpl, {
+		blendFunction,
+		...props
+	});
+}
 //#endregion
 //#region src/effects/Outline.tsx
-function pt({ selection: e = q, selectionLayer: t = 10, blendFunction: n, patternTexture: r, patternScale: i, edgeStrength: a, pulseSpeed: o, visibleEdgeColor: s, hiddenEdgeColor: c, multisampling: l, resolutionScale: u, resolutionX: d, resolutionY: f, width: p, height: m, kernelSize: h, blur: g, xRay: _, ref: v }) {
-	let { scene: y, camera: b } = k(G), x = P(() => new te(y, b, {
-		blendFunction: n,
-		patternTexture: r,
-		patternScale: i,
-		edgeStrength: a,
-		pulseSpeed: o,
-		visibleEdgeColor: s,
-		hiddenEdgeColor: c,
-		multisampling: l,
-		resolutionScale: u,
-		resolutionX: d,
-		resolutionY: f,
-		width: p,
-		height: m,
-		kernelSize: h,
-		blur: g,
-		xRay: _
+var LIVE_KEYS$3 = [
+	"patternTexture",
+	"patternScale",
+	"edgeStrength",
+	"pulseSpeed",
+	"visibleEdgeColor",
+	"hiddenEdgeColor",
+	"multisampling",
+	"width",
+	"height",
+	"kernelSize",
+	"blur",
+	"xRay",
+	"dithering",
+	"blendMode-blendFunction"
+];
+function set$1(effect, key, value) {
+	if (key === "visibleEdgeColor" || key === "hiddenEdgeColor") applyPierced(effect, key, new Color(value));
+	else applyPierced(effect, key, value);
+}
+function Outline({ selection = EMPTY_ARRAY, selectionLayer = 10, blendFunction, resolutionScale, resolutionX, resolutionY, ref, ...liveProps }) {
+	const { scene, camera, autoClear } = use(EffectComposerContext);
+	const effect = useMemo(() => new OutlineEffect(scene, camera, {
+		resolutionScale,
+		resolutionX,
+		resolutionY
 	}), [
-		n,
-		r,
-		i,
-		a,
-		o,
-		s,
-		c,
-		l,
-		u,
-		d,
-		f,
-		p,
-		m,
-		h,
-		g,
-		_,
-		b,
-		y
+		scene,
+		camera,
+		resolutionScale,
+		resolutionX,
+		resolutionY
 	]);
-	return Y(x, e, t), X(x), /* @__PURE__ */ U("primitive", {
-		ref: v,
-		object: x
+	useEffect(() => {
+		if (autoClear !== false) console.warn("Outline requires <EffectComposer autoClear={false}> to render correctly.");
+	}, [autoClear]);
+	useLiveDefaults(effect, {
+		...liveProps,
+		"blendMode-blendFunction": blendFunction
+	}, LIVE_KEYS$3, readPierced, set$1);
+	useSelectionSync(effect, selection, selectionLayer);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
 	});
 }
 //#endregion
 //#region src/effects/Pixelation.tsx
-function mt({ granularity: e = 5, ref: t }) {
-	let n = P(() => new re(e), [e]);
-	return X(n), /* @__PURE__ */ U("primitive", {
-		ref: t,
-		object: n
+var PixelationImpl = /* @__PURE__ */ createEffectComponent(PixelationEffect);
+function Pixelation({ granularity = 5, ref }) {
+	return /* @__PURE__ */ jsx(PixelationImpl, {
+		granularity,
+		ref
 	});
 }
 //#endregion
 //#region src/effects/Ramp.tsx
-var ht = { fragmentShader: "\n    uniform int rampType;\n\n    uniform vec2 rampStart;\n    uniform vec2 rampEnd;\n\n    uniform vec4 startColor;\n    uniform vec4 endColor;\n\n    uniform float rampBias;\n    uniform float rampGain;\n\n    uniform bool rampMask;\n    uniform bool rampInvert;\n\n    float getBias(float time, float bias) {\n      return time / (((1.0 / bias) - 2.0) * (1.0 - time) + 1.0);\n    }\n\n    float getGain(float time, float gain) {\n      if (time < 0.5)\n        return getBias(time * 2.0, gain) / 2.0;\n      else\n        return getBias(time * 2.0 - 1.0, 1.0 - gain) / 2.0 + 0.5;\n    }\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n      vec2 centerPixel = uv * resolution;\n      vec2 startPixel = rampStart * resolution;\n      vec2 endPixel = rampEnd * resolution;\n\n      float rampAlpha;\n\n      if (rampType == 1) {\n        vec2 fuv = centerPixel / resolution.y;\n        vec2 suv = startPixel / resolution.y;\n        vec2 euv = endPixel / resolution.y;\n\n        float radius = length(suv - euv);\n        float falloff = length(fuv - suv);\n        rampAlpha = smoothstep(0.0, radius, falloff);\n      } else {\n        float radius = length(startPixel - endPixel);\n        vec2 direction = normalize(vec2(endPixel.x - startPixel.x, -(startPixel.y - endPixel.y)));\n\n        float fade = dot(centerPixel - startPixel, direction);\n        if (rampType == 2) fade = abs(fade);\n\n        rampAlpha = smoothstep(0.0, 1.0, fade / radius);\n      }\n\n      rampAlpha = abs((rampInvert ? 1.0 : 0.0) - getBias(rampAlpha, rampBias) * getGain(rampAlpha, rampGain));\n\n      if (rampMask) {\n        vec4 inputBuff = texture2D(inputBuffer, uv);\n        outputColor = mix(inputBuff, inputColor, rampAlpha);\n      } else {\n        outputColor = mix(startColor, endColor, rampAlpha);\n      }\n    }\n  " }, gt = /* @__PURE__ */ function(e) {
-	return e[e.Linear = 0] = "Linear", e[e.Radial = 1] = "Radial", e[e.MirroredLinear = 2] = "MirroredLinear", e;
-}({}), _t = class extends _ {
-	constructor({ rampType: e = 0, rampStart: t = [.5, .5], rampEnd: n = [1, 1], startColor: r = [
+var RampShader = { fragmentShader: `
+    uniform int rampType;
+
+    uniform vec2 rampStart;
+    uniform vec2 rampEnd;
+
+    uniform vec4 startColor;
+    uniform vec4 endColor;
+
+    uniform float rampBias;
+    uniform float rampGain;
+
+    uniform bool rampMask;
+    uniform bool rampInvert;
+
+    float getBias(float time, float bias) {
+      return time / (((1.0 / bias) - 2.0) * (1.0 - time) + 1.0);
+    }
+
+    float getGain(float time, float gain) {
+      if (time < 0.5)
+        return getBias(time * 2.0, gain) / 2.0;
+      else
+        return getBias(time * 2.0 - 1.0, 1.0 - gain) / 2.0 + 0.5;
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+      vec2 centerPixel = uv * resolution;
+      vec2 startPixel = rampStart * resolution;
+      vec2 endPixel = rampEnd * resolution;
+
+      float rampAlpha;
+
+      if (rampType == 1) {
+        vec2 fuv = centerPixel / resolution.y;
+        vec2 suv = startPixel / resolution.y;
+        vec2 euv = endPixel / resolution.y;
+
+        float radius = length(suv - euv);
+        float falloff = length(fuv - suv);
+        rampAlpha = smoothstep(0.0, radius, falloff);
+      } else {
+        float radius = length(startPixel - endPixel);
+        vec2 direction = normalize(vec2(endPixel.x - startPixel.x, -(startPixel.y - endPixel.y)));
+
+        float fade = dot(centerPixel - startPixel, direction);
+        if (rampType == 2) fade = abs(fade);
+
+        rampAlpha = smoothstep(0.0, 1.0, fade / radius);
+      }
+
+      rampAlpha = abs((rampInvert ? 1.0 : 0.0) - getBias(rampAlpha, rampBias) * getGain(rampAlpha, rampGain));
+
+      if (rampMask) {
+        vec4 inputBuff = texture2D(inputBuffer, uv);
+        outputColor = mix(inputBuff, inputColor, rampAlpha);
+      } else {
+        outputColor = mix(startColor, endColor, rampAlpha);
+      }
+    }
+  ` };
+var RampType = /* @__PURE__ */ function(RampType) {
+	RampType[RampType["Linear"] = 0] = "Linear";
+	RampType[RampType["Radial"] = 1] = "Radial";
+	RampType[RampType["MirroredLinear"] = 2] = "MirroredLinear";
+	return RampType;
+}({});
+var RampEffect = class extends Effect {
+	constructor({ rampType = 0, rampStart = [.5, .5], rampEnd = [1, 1], startColor = [
 		0,
 		0,
 		0,
 		1
-	], endColor: i = [
+	], endColor = [
 		1,
 		1,
 		1,
 		1
-	], rampBias: a = .5, rampGain: o = .5, rampMask: s = !1, rampInvert: c = !1, ...l } = {}) {
-		super("RampEffect", ht.fragmentShader, {
-			...l,
+	], rampBias = .5, rampGain = .5, rampMask = false, rampInvert = false, ...params } = {}) {
+		super("RampEffect", RampShader.fragmentShader, {
+			...params,
 			uniforms: /* @__PURE__ */ new Map([
-				["rampType", new B(e)],
-				["rampStart", new B(t)],
-				["rampEnd", new B(n)],
-				["startColor", new B(r)],
-				["endColor", new B(i)],
-				["rampBias", new B(a)],
-				["rampGain", new B(o)],
-				["rampMask", new B(s)],
-				["rampInvert", new B(c)]
+				["rampType", new Uniform(rampType)],
+				["rampStart", new Uniform(rampStart)],
+				["rampEnd", new Uniform(rampEnd)],
+				["startColor", new Uniform(startColor)],
+				["endColor", new Uniform(endColor)],
+				["rampBias", new Uniform(rampBias)],
+				["rampGain", new Uniform(rampGain)],
+				["rampMask", new Uniform(rampMask)],
+				["rampInvert", new Uniform(rampInvert)]
 			])
 		});
 	}
-}, vt = /* @__PURE__ */ $(_t), yt = /* @__PURE__ */ $(se, {
-	blendFunction: 24,
-	density: 1.25
-}), bt = (e, t) => e.layers.enable(t.selection.layer), xt = (e, t) => e.layers.disable(t.selection.layer);
-function St({ selection: e = q, selectionLayer: t = 10, lights: n = q, inverted: r = !1, ignoreBackground: i = !1, luminanceThreshold: o, luminanceSmoothing: s, mipmapBlur: c, intensity: l, radius: u, levels: d, kernelSize: f, resolutionScale: p, width: m, height: h, resolutionX: g, resolutionY: _, ref: v }) {
-	let { scene: y, camera: b } = k(G), x = a((e) => e.invalidate), S = P(() => {
-		let e = new ce(y, b, {
-			blendFunction: 0,
-			luminanceThreshold: o,
-			luminanceSmoothing: s,
-			mipmapBlur: c,
-			intensity: l,
-			radius: u,
-			levels: d,
-			kernelSize: f,
-			resolutionScale: p,
-			width: m,
-			height: h,
-			resolutionX: g,
-			resolutionY: _
-		});
-		return e.inverted = r, e.ignoreBackground = i, e;
-	}, [
-		y,
-		b,
-		o,
-		s,
-		c,
-		l,
-		u,
-		d,
-		f,
-		p,
-		m,
-		h,
-		g,
-		_,
-		r,
-		i
+	u(name) {
+		return this.uniforms.get(name).value;
+	}
+	setU(name, value) {
+		this.uniforms.get(name).value = value;
+	}
+	get rampType() {
+		return this.u("rampType");
+	}
+	set rampType(value) {
+		this.setU("rampType", value);
+	}
+	get rampStart() {
+		return this.u("rampStart");
+	}
+	set rampStart(value) {
+		this.setU("rampStart", value);
+	}
+	get rampEnd() {
+		return this.u("rampEnd");
+	}
+	set rampEnd(value) {
+		this.setU("rampEnd", value);
+	}
+	get startColor() {
+		return this.u("startColor");
+	}
+	set startColor(value) {
+		this.setU("startColor", value);
+	}
+	get endColor() {
+		return this.u("endColor");
+	}
+	set endColor(value) {
+		this.setU("endColor", value);
+	}
+	get rampBias() {
+		return this.u("rampBias");
+	}
+	set rampBias(value) {
+		this.setU("rampBias", value);
+	}
+	get rampGain() {
+		return this.u("rampGain");
+	}
+	set rampGain(value) {
+		this.setU("rampGain", value);
+	}
+	get rampMask() {
+		return this.u("rampMask");
+	}
+	set rampMask(value) {
+		this.setU("rampMask", value);
+	}
+	get rampInvert() {
+		return this.u("rampInvert");
+	}
+	set rampInvert(value) {
+		this.setU("rampInvert", value);
+	}
+};
+var Ramp = /* @__PURE__ */ createEffectComponent(RampEffect);
+//#endregion
+//#region src/effects/ScanlineEffect.tsx
+var Scanline = /* @__PURE__ */ createEffectComponent(ScanlineEffect);
+//#endregion
+//#region src/effects/SelectiveBloom.tsx
+var addLight = (light, effect) => light.layers.enable(effect.selection.layer);
+var removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
+var LIVE_KEYS$2 = [
+	"width",
+	"height",
+	"kernelSize",
+	"intensity",
+	"inverted",
+	"ignoreBackground"
+];
+function SelectiveBloom({ selection = EMPTY_ARRAY, selectionLayer = 10, lights = EMPTY_ARRAY, luminanceThreshold, luminanceSmoothing, mipmapBlur, radius, levels, resolutionScale, resolutionX, resolutionY, ref, ...liveProps }) {
+	const { scene, camera } = use(EffectComposerContext);
+	const invalidate = useThree((state) => state.invalidate);
+	const effect = useMemo(() => new SelectiveBloomEffect(scene, camera, {
+		blendFunction: 0,
+		luminanceThreshold,
+		luminanceSmoothing,
+		mipmapBlur,
+		radius,
+		levels,
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	}), [
+		scene,
+		camera,
+		luminanceThreshold,
+		luminanceSmoothing,
+		mipmapBlur,
+		radius,
+		levels,
+		resolutionScale,
+		resolutionX,
+		resolutionY
 	]);
-	return Y(S, e, t), j(() => {
-		if (n.length === 0) {
+	useLiveDefaults(effect, liveProps, LIVE_KEYS$2);
+	useSelectionSync(effect, selection, selectionLayer);
+	useEffect(() => {
+		if (lights.length === 0) {
 			console.warn("SelectiveBloom requires lights to work.");
 			return;
 		}
-		let e = n.map((e) => J(e)).filter((e) => e != null);
-		if (e.length !== 0) return e.forEach((e) => bt(e, S)), x(), () => {
-			e.forEach((e) => xt(e, S)), x();
+		const resolvedLights = lights.map((light) => resolveRef(light)).filter((light) => light != null);
+		if (resolvedLights.length === 0) return;
+		resolvedLights.forEach((light) => addLight(light, effect));
+		invalidate();
+		return () => {
+			resolvedLights.forEach((light) => removeLight(light, effect));
+			invalidate();
 		};
 	}, [
-		S,
-		x,
-		n,
-		t
-	]), X(S), /* @__PURE__ */ U("primitive", {
-		ref: v,
-		object: S
+		effect,
+		invalidate,
+		lights,
+		selectionLayer
+	]);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
 	});
 }
 //#endregion
 //#region src/effects/Sepia.tsx
-var Ct = /* @__PURE__ */ $(le), wt = /* @__PURE__ */ $(ue), Tt = /* @__PURE__ */ $(ae);
+var Sepia = /* @__PURE__ */ createEffectComponent(SepiaEffect);
+//#endregion
+//#region src/effects/ShockWave.tsx
+var LIVE_KEYS$1 = [
+	"position",
+	"speed",
+	"maxRadius",
+	"waveSize",
+	"amplitude"
+];
+function ShockWave(props) {
+	const { speed, maxRadius, waveSize, amplitude, ref } = props;
+	const { camera } = use(EffectComposerContext);
+	const effect = useMemo(() => new ShockWaveEffect(camera), [camera]);
+	useLiveDefaults(effect, {
+		position: useVector3(props, "position"),
+		speed,
+		maxRadius,
+		waveSize,
+		amplitude
+	}, LIVE_KEYS$1);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
+	});
+}
+//#endregion
+//#region src/effects/SMAA.tsx
+var SMAAImpl = /* @__PURE__ */ createEffectComponent(SMAAEffect);
+function SMAA({ preset, edgeDetectionMode, predicationMode, ...liveProps }) {
+	const args = useMemo(() => [{
+		preset,
+		edgeDetectionMode,
+		predicationMode
+	}], [
+		preset,
+		edgeDetectionMode,
+		predicationMode
+	]);
+	return /* @__PURE__ */ jsx(SMAAImpl, {
+		args,
+		...liveProps
+	});
+}
 //#endregion
 //#region src/effects/SSAO.tsx
-function Et({ ref: e, ...t }) {
-	let { camera: n, normalPass: r, downSamplingPass: i, resolutionScale: a } = A(G), o = P(() => r === null && i === null ? (console.error("Please enable the NormalPass in the EffectComposer in order to use SSAO."), {}) : new oe(n, r && !i ? r.texture : null, {
-		blendFunction: 21,
-		samples: 30,
-		rings: 4,
-		distanceThreshold: 1,
-		distanceFalloff: 0,
-		rangeThreshold: .5,
-		rangeFalloff: .1,
-		luminanceInfluence: .9,
-		radius: 20,
-		bias: .5,
-		intensity: 1,
-		color: void 0,
-		normalDepthBuffer: i ? i.texture : null,
-		resolutionScale: a ?? 1,
-		depthAwareUpsampling: !0,
-		...t
-	}), [
-		n,
-		i,
-		r,
-		a
+var LIVE_KEYS = [
+	"blendMode-blendFunction",
+	"normalBuffer",
+	"samples",
+	"rings",
+	"radius",
+	"depthAwareUpsampling",
+	"color",
+	"luminanceInfluence",
+	"intensity",
+	"ssaoMaterial-bias",
+	"ssaoMaterial-fade",
+	"ssaoMaterial-minRadiusScale",
+	"ssaoMaterial-distanceThreshold",
+	"ssaoMaterial-distanceFalloff",
+	"ssaoMaterial-worldDistanceThreshold",
+	"ssaoMaterial-worldDistanceFalloff",
+	"rangeThreshold",
+	"rangeFalloff",
+	"ssaoMaterial-worldProximityThreshold",
+	"ssaoMaterial-worldProximityFalloff"
+];
+function get(effect, key) {
+	if (key === "rangeThreshold") return effect.ssaoMaterial.proximityThreshold;
+	if (key === "rangeFalloff") return effect.ssaoMaterial.proximityFalloff;
+	return readPierced(effect, key);
+}
+function set(effect, key, value) {
+	if (key === "rangeThreshold") effect.ssaoMaterial.proximityThreshold = value;
+	else if (key === "rangeFalloff") effect.ssaoMaterial.proximityFalloff = value;
+	else applyPierced(effect, key, value);
+}
+function SSAO({ blendFunction = 21, samples = 30, rings = 4, distanceThreshold = 1, distanceFalloff = 0, rangeThreshold = .5, rangeFalloff = .1, luminanceInfluence = .9, radius = 20, bias = .5, intensity = 1, color, worldDistanceThreshold, worldDistanceFalloff, worldProximityThreshold, worldProximityFalloff, minRadiusScale, fade, depthAwareUpsampling = true, resolutionScale, resolutionX, resolutionY, width, height, ref }) {
+	const { camera, normalPass, downSamplingPass, resolutionScale: composerResolutionScale } = use(EffectComposerContext);
+	const effect = useMemo(() => {
+		if (normalPass === null && downSamplingPass === null) {
+			console.error("Please enable the NormalPass in the EffectComposer in order to use SSAO.");
+			return {};
+		}
+		return new SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, {
+			blendFunction,
+			samples,
+			rings,
+			distanceThreshold,
+			distanceFalloff,
+			rangeThreshold,
+			rangeFalloff,
+			luminanceInfluence,
+			radius,
+			bias,
+			intensity,
+			normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
+			resolutionScale: resolutionScale ?? composerResolutionScale ?? 1,
+			resolutionX,
+			resolutionY,
+			width,
+			height,
+			depthAwareUpsampling
+		});
+	}, [
+		camera,
+		downSamplingPass,
+		normalPass,
+		resolutionScale,
+		composerResolutionScale,
+		resolutionX,
+		resolutionY,
+		width,
+		height
 	]);
-	return X(o), /* @__PURE__ */ U("primitive", {
-		ref: e,
-		object: o
+	useLiveDefaults(effect instanceof SSAOEffect ? effect : null, {
+		"blendMode-blendFunction": blendFunction,
+		samples,
+		rings,
+		radius,
+		depthAwareUpsampling,
+		color,
+		luminanceInfluence,
+		intensity,
+		"ssaoMaterial-bias": bias,
+		"ssaoMaterial-fade": fade,
+		"ssaoMaterial-minRadiusScale": minRadiusScale,
+		"ssaoMaterial-distanceThreshold": distanceThreshold,
+		"ssaoMaterial-distanceFalloff": distanceFalloff,
+		"ssaoMaterial-worldDistanceThreshold": worldDistanceThreshold,
+		"ssaoMaterial-worldDistanceFalloff": worldDistanceFalloff,
+		rangeThreshold,
+		rangeFalloff,
+		"ssaoMaterial-worldProximityThreshold": worldProximityThreshold,
+		"ssaoMaterial-worldProximityFalloff": worldProximityFalloff
+	}, LIVE_KEYS, get, set);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
 	});
 }
 //#endregion
 //#region src/effects/Texture.tsx
-function Dt({ textureSrc: e, texture: t, opacity: n = 1, ref: r, ...a }) {
-	let o = i(we, e);
-	N(() => {
-		o.colorSpace = Se, o.wrapS = o.wrapT = z;
-	}, [o]);
-	let s = P(() => new de({
-		...a,
-		texture: o || t
-	}), []);
-	return X(s), /* @__PURE__ */ U("primitive", {
-		ref: r,
-		object: s,
-		"blendMode-opacity-value": n
+var TextureImpl = /* @__PURE__ */ createEffectComponent(TextureEffect);
+function Texture({ textureSrc, texture, opacity = 1, ...props }) {
+	const t = useLoader(TextureLoader, textureSrc);
+	useLayoutEffect(() => {
+		t.colorSpace = SRGBColorSpace;
+		t.wrapS = t.wrapT = RepeatWrapping;
+	}, [t]);
+	return /* @__PURE__ */ jsx(TextureImpl, {
+		...props,
+		texture: texture ?? t,
+		opacity
 	});
 }
 //#endregion
 //#region src/effects/TiltShift.tsx
-var Ot = /* @__PURE__ */ $(fe, { blendFunction: 0 }), kt = { fragmentShader: "\n\n    // original shader by Evan Wallace\n\n    #define MAX_ITERATIONS 100\n\n    uniform float blur;\n    uniform float taper;\n    uniform vec2 start;\n    uniform vec2 end;\n    uniform vec2 direction;\n    uniform int samples;\n\n    float random(vec3 scale, float seed) {\n        /* use the fragment position for a different seed per-pixel */\n        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n    }\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n        vec4 color = vec4(0.0);\n        float total = 0.0;\n        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);\n        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);\n        float f_samples = float(samples);\n        float half_samples = f_samples / 2.0;\n\n        // use screen diagonal to normalize blur radii\n        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance\n        float gradientRadius = taper * (maxScreenDistance);\n        float blurRadius = blur * (maxScreenDistance / 16.0);\n\n        /* randomize the lookup values to hide the fixed number of samples */\n        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));\n        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;\n\n        #pragma unroll_loop_start\n        for (int i = 0; i <= MAX_ITERATIONS; i++) {\n            if (i >= samples) { break; } // return early if over sample count\n            float f_i = float(i);\n            float s_i = -half_samples + f_i;\n            float percent = (s_i + offset - 0.5) / half_samples;\n            float weight = 1.0 - abs(percent);\n            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);\n            /* switch to pre-multiplied alpha to correctly blur transparent images */\n            sample_i.rgb *= sample_i.a;\n            color += sample_i * weight;\n            total += weight;\n        }\n        #pragma unroll_loop_end\n\n        outputColor = color / total;\n\n        /* switch back from pre-multiplied alpha */\n        outputColor.rgb /= outputColor.a + 0.00001;\n    }\n    " }, At = class extends _ {
-	constructor({ blendFunction: e = 23, blur: t = .15, taper: n = .5, start: r = [.5, 0], end: i = [.5, 1], samples: a = 10, direction: o = [1, 1] } = {}) {
-		super("TiltShiftEffect", kt.fragmentShader, {
-			blendFunction: e,
+var TiltShiftImpl = /* @__PURE__ */ createEffectComponent(TiltShiftEffect$1);
+function TiltShift({ blendFunction = 0, kernelSize, resolutionScale, resolutionX, resolutionY, ...liveProps }) {
+	const args = useMemo(() => [{
+		kernelSize,
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	}], [
+		kernelSize,
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	]);
+	return /* @__PURE__ */ jsx(TiltShiftImpl, {
+		blendFunction,
+		args,
+		...liveProps
+	});
+}
+//#endregion
+//#region src/effects/TiltShift2.tsx
+var TiltShiftShader = { fragmentShader: `
+
+    // original shader by Evan Wallace
+
+    #define MAX_ITERATIONS 100
+
+    uniform float blur;
+    uniform float taper;
+    uniform vec2 start;
+    uniform vec2 end;
+    uniform vec2 direction;
+    uniform int samples;
+
+    float random(vec3 scale, float seed) {
+        /* use the fragment position for a different seed per-pixel */
+        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+        vec4 color = vec4(0.0);
+        float total = 0.0;
+        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
+        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
+        float f_samples = float(samples);
+        float half_samples = f_samples / 2.0;
+
+        // use screen diagonal to normalize blur radii
+        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
+        float gradientRadius = taper * (maxScreenDistance);
+        float blurRadius = blur * (maxScreenDistance / 16.0);
+
+        /* randomize the lookup values to hide the fixed number of samples */
+        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
+        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
+
+        #pragma unroll_loop_start
+        for (int i = 0; i <= MAX_ITERATIONS; i++) {
+            if (i >= samples) { break; } // return early if over sample count
+            float f_i = float(i);
+            float s_i = -half_samples + f_i;
+            float percent = (s_i + offset - 0.5) / half_samples;
+            float weight = 1.0 - abs(percent);
+            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
+            /* switch to pre-multiplied alpha to correctly blur transparent images */
+            sample_i.rgb *= sample_i.a;
+            color += sample_i * weight;
+            total += weight;
+        }
+        #pragma unroll_loop_end
+
+        outputColor = color / total;
+
+        /* switch back from pre-multiplied alpha */
+        outputColor.rgb /= outputColor.a + 0.00001;
+    }
+    ` };
+var TiltShiftEffect = class extends Effect {
+	constructor({ blendFunction = 23, blur = .15, taper = .5, start = [.5, 0], end = [.5, 1], samples = 10, direction = [1, 1] } = {}) {
+		super("TiltShiftEffect", TiltShiftShader.fragmentShader, {
+			blendFunction,
 			attributes: 2,
 			uniforms: /* @__PURE__ */ new Map([
-				["blur", new B(t)],
-				["taper", new B(n)],
-				["start", new B(r)],
-				["end", new B(i)],
-				["samples", new B(a)],
-				["direction", new B(o)]
+				["blur", new Uniform(blur)],
+				["taper", new Uniform(taper)],
+				["start", new Uniform(start)],
+				["end", new Uniform(end)],
+				["samples", new Uniform(samples)],
+				["direction", new Uniform(direction)]
 			])
 		});
 	}
-}, jt = /* @__PURE__ */ $(At, { blendFunction: 23 }), Mt = /* @__PURE__ */ $(pe), Nt = /* @__PURE__ */ $(me), Pt = { fragmentShader: "\n    uniform float factor;\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n      vec2 vUv = uv;\n      float frequency = 6.0 * factor;\n      float amplitude = 0.015 * factor;\n      float x = vUv.y * frequency + time * 0.7; \n      float y = vUv.x * frequency + time * 0.3;\n      vUv.x += cos(x + y) * amplitude * cos(y);\n      vUv.y += sin(x - y) * amplitude * cos(y);\n      vec4 rgba = texture(inputBuffer, vUv);\n      outputColor = rgba;\n    }\n  " }, Ft = class extends _ {
-	constructor({ blendFunction: e = 23, factor: t = 0 } = {}) {
-		super("WaterEffect", Pt.fragmentShader, {
-			blendFunction: e,
+	u(name) {
+		return this.uniforms.get(name).value;
+	}
+	setU(name, value) {
+		this.uniforms.get(name).value = value;
+	}
+	get blur() {
+		return this.u("blur");
+	}
+	set blur(value) {
+		this.setU("blur", value);
+	}
+	get taper() {
+		return this.u("taper");
+	}
+	set taper(value) {
+		this.setU("taper", value);
+	}
+	get start() {
+		return this.u("start");
+	}
+	set start(value) {
+		this.setU("start", value);
+	}
+	get end() {
+		return this.u("end");
+	}
+	set end(value) {
+		this.setU("end", value);
+	}
+	get samples() {
+		return this.u("samples");
+	}
+	set samples(value) {
+		this.setU("samples", value);
+	}
+	get direction() {
+		return this.u("direction");
+	}
+	set direction(value) {
+		this.setU("direction", value);
+	}
+};
+var TiltShift2 = /* @__PURE__ */ createEffectComponent(TiltShiftEffect);
+//#endregion
+//#region src/effects/ToneMapping.tsx
+var ToneMappingImpl = /* @__PURE__ */ createEffectComponent(ToneMappingEffect);
+function ToneMapping({ minLuminance, maxLuminance, ...liveProps }) {
+	const args = useMemo(() => [{
+		minLuminance,
+		maxLuminance
+	}], [minLuminance, maxLuminance]);
+	return /* @__PURE__ */ jsx(ToneMappingImpl, {
+		args,
+		...liveProps
+	});
+}
+//#endregion
+//#region src/effects/Vignette.tsx
+var Vignette = /* @__PURE__ */ createEffectComponent(VignetteEffect);
+//#endregion
+//#region src/effects/Water.tsx
+var WaterShader = { fragmentShader: `
+    uniform float factor;
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+      vec2 vUv = uv;
+      float frequency = 6.0 * factor;
+      float amplitude = 0.015 * factor;
+      float x = vUv.y * frequency + time * 0.7;
+      float y = vUv.x * frequency + time * 0.3;
+      vUv.x += cos(x + y) * amplitude * cos(y);
+      vUv.y += sin(x - y) * amplitude * cos(y);
+      vec4 rgba = texture(inputBuffer, vUv);
+      outputColor = rgba;
+    }
+  ` };
+var WaterEffectImpl = class extends Effect {
+	constructor({ blendFunction = 23, factor = 0 } = {}) {
+		super("WaterEffect", WaterShader.fragmentShader, {
+			blendFunction,
 			attributes: 2,
-			uniforms: /* @__PURE__ */ new Map([["factor", new B(t)]])
+			uniforms: /* @__PURE__ */ new Map([["factor", new Uniform(factor)]])
 		});
 	}
-}, It = /* @__PURE__ */ $(Ft, { blendFunction: 23 });
-//#endregion
-//#region src/effects/N8AO.tsx
-function Lt({ halfRes: t, screenSpaceRadius: n, quality: r, depthAwareUpsampling: i = !0, aoRadius: o = 5, aoSamples: s = 16, denoiseSamples: c = 4, denoiseRadius: l = 12, distanceFalloff: u = 1, intensity: d = 1, color: f, renderMode: p = 0, ref: m }) {
-	let { camera: h, scene: g } = a(), _ = P(() => new De(g, h), [h, g]);
-	return X(_), N(() => {
-		e(_.configuration, {
-			color: f,
-			aoRadius: o,
-			distanceFalloff: u,
-			intensity: d,
-			aoSamples: s,
-			denoiseSamples: c,
-			denoiseRadius: l,
-			screenSpaceRadius: n,
-			renderMode: p,
-			halfRes: t,
-			depthAwareUpsampling: i
+	get factor() {
+		return this.uniforms.get("factor").value;
+	}
+	set factor(value) {
+		this.uniforms.get("factor").value = value;
+	}
+};
+var WaterEffect = /* @__PURE__ */ createEffectComponent(WaterEffectImpl);
+//#endregion
+//#region src/passes/N8AO.tsx
+function N8AO({ enabled = true, halfRes, screenSpaceRadius, quality, depthAwareUpsampling = true, aoRadius = 5, aoSamples = 16, denoiseSamples = 4, denoiseRadius = 12, distanceFalloff = 1, intensity = 1, color, renderMode = 0, ref }) {
+	const { camera, scene, invalidate } = useThree();
+	const effect = useMemo(() => {
+		const instance = new N8AOPostPass(scene, camera);
+		groupPasses.add(instance);
+		return instance;
+	}, [camera, scene]);
+	useDispose(effect);
+	useLayoutEffect(() => {
+		effect.enabled = enabled;
+		invalidate();
+	}, [
+		effect,
+		enabled,
+		invalidate
+	]);
+	useLayoutEffect(() => {
+		applyProps(effect.configuration, {
+			color,
+			aoRadius,
+			distanceFalloff,
+			intensity,
+			aoSamples,
+			denoiseSamples,
+			denoiseRadius,
+			screenSpaceRadius,
+			renderMode,
+			halfRes,
+			depthAwareUpsampling
 		});
+		invalidate();
 	}, [
-		n,
-		f,
-		o,
-		u,
-		d,
-		s,
-		c,
-		l,
-		p,
-		t,
-		i,
-		_
-	]), N(() => {
-		r && _.setQualityMode(r.charAt(0).toUpperCase() + r.slice(1));
-	}, [_, r]), /* @__PURE__ */ U("primitive", {
-		ref: m,
-		object: _
+		screenSpaceRadius,
+		color,
+		aoRadius,
+		distanceFalloff,
+		intensity,
+		aoSamples,
+		denoiseSamples,
+		denoiseRadius,
+		renderMode,
+		halfRes,
+		depthAwareUpsampling,
+		effect,
+		invalidate
+	]);
+	useLayoutEffect(() => {
+		if (quality) {
+			effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1));
+			invalidate();
+		}
+	}, [
+		effect,
+		quality,
+		invalidate
+	]);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
 	});
 }
 //#endregion
-export { Ge as ASCII, Je as Autofocus, Ye as Bloom, Xe as BrightnessContrast, Ze as ChromaticAberration, Qe as ColorAverage, $e as ColorDepth, et as Depth, Ke as DepthOfField, tt as DotScreen, q as EMPTY_ARRAY, Ne as EffectComposer, G as EffectComposerContext, nt as FXAA, rt as Glitch, it as GodRays, at as Grid, ot as HueSaturation, dt as LUT, ut as LensFlare, ct as LensFlareEffect, Lt as N8AO, ft as Noise, pt as Outline, mt as Pixelation, vt as Ramp, _t as RampEffect, gt as RampType, Tt as SMAA, Et as SSAO, yt as Scanline, Ie as Select, Pe as Selection, St as SelectiveBloom, Ct as Sepia, wt as ShockWave, Dt as Texture, Ot as TiltShift, jt as TiltShift2, At as TiltShiftEffect, Mt as ToneMapping, Nt as Vignette, It as WaterEffect, Ft as WaterEffectImpl, J as resolveRef, K as selectionContext, X as useDispose, Y as useSelectionSync, Z as useVector2, $ as wrapEffect };
+export { ASCII, Autofocus, Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DepthPicking, DotScreen, EMPTY_ARRAY, EffectComposer, EffectComposerContext, EffectGroup, FXAA, Glitch, GodRays, Grid, HueSaturation, LUT, LensFlare, LensFlareEffect, N8AO, Noise, Outline, Pixelation, Ramp, RampEffect, RampType, SMAA, SSAO, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, WaterEffect, WaterEffectImpl, applyPierced, createEffectComponent, disposePassWithoutEffects, groupPasses, readGroupChildren, readPierced, resolveRef, selectionContext, updateIfChanged, useDepthPicking, useDispose, useLiveDefaults, useMergeRefs, useSelectionSync, useVector2, useVector3, wrapEffect };
 
 //# sourceMappingURL=index.js.map