@react-three/postprocessing 3.0.4 → 3.1.0

package/dist/index.js

@@ -1,4 +1,1027 @@
-import{jsx as w,jsxs as K,Fragment as Q}from"react/jsx-runtime";import ee,{createContext as te,useState as j,useMemo as z,useRef as O,useContext as M,useEffect as A,memo as he,forwardRef as B,useLayoutEffect as L,useImperativeHandle as oe,useCallback as ae}from"react";import*as h from"three";import{NoToneMapping as _e,HalfFloatType as xe,Vector3 as ge,Uniform as y,TextureLoader as we,SRGBColorSpace as Se,RepeatWrapping as Y,Texture as ye,Color as Pe,CanvasTexture as be,NearestFilter as re}from"three";import{useThree as V,useFrame as J,extend as Ee,createPortal as Re,useLoader as Ue,applyProps as Ce}from"@react-three/fiber";import{EffectComposer as ze,RenderPass as Te,NormalPass as Ae,DepthDownsamplingPass as Be,Effect as W,EffectPass as Ve,Pass as Fe,DepthOfFieldEffect as Me,MaskFunction as De,DepthPickingPass as ke,CopyPass as Ge,BloomEffect as Ie,BrightnessContrastEffect as Le,ChromaticAberrationEffect as Ne,ColorAverageEffect as je,ColorDepthEffect as Oe,DepthEffect as We,DotScreenEffect as Xe,GlitchEffect as qe,GlitchMode as ne,GodRaysEffect as He,GridEffect as Ze,HueSaturationEffect as $e,NoiseEffect as Ke,OutlineEffect as Ye,PixelationEffect as Je,ScanlineEffect as Qe,SelectiveBloomEffect as et,SepiaEffect as tt,SSAOEffect as ot,SMAAEffect as at,FXAAEffect as rt,TextureEffect as nt,ToneMappingEffect as st,VignetteEffect as it,ShockWaveEffect as lt,LUT3DEffect as ct,TiltShiftEffect as ft}from"postprocessing";import{easing as se}from"maath";import{N8AOPostPass as ut}from"n8ao";const H=/*@__PURE__*/te(null);function pt({children:e,enabled:t=!0}){const[o,r]=j([]),a=z(()=>({selected:o,select:r,enabled:t}),[o,r,t]);return /*@__PURE__*/w(H.Provider,{value:a,children:e})}function mt({enabled:e=!1,children:t,...o}){const r=O(null),a=M(H);return A(()=>{if(a&&e){let n=!1;const i=[];if(r.current.traverse(s=>{s.type==="Mesh"&&i.push(s),a.selected.indexOf(s)===-1&&(n=!0)}),n)return a.select(s=>[...s,...i]),()=>{a.select(s=>s.filter(l=>!i.includes(l)))}}},[e,t,a]),/*@__PURE__*/w("group",{ref:r,...o,children:t})}const D=/*@__PURE__*/te(null),ie=e=>(e.getAttributes()&2)===2,dt=/*@__PURE__*/he(/*@__PURE__*/B(({children:e,camera:t,scene:o,resolutionScale:r,enabled:a=!0,renderPriority:n=1,autoClear:i=!0,depthBuffer:s,enableNormalPass:l,stencilBuffer:p,multisampling:_=8,frameBufferType:S=xe},g)=>{const{gl:d,scene:m,camera:v,size:x}=V(),f=o||m,u=t||v,[c,U,b]=z(()=>{const C=new ze(d,{depthBuffer:s,stencilBuffer:p,multisampling:_,frameBufferType:S});C.addPass(new Te(f,u));let R=null,E=null;return l&&(E=new Ae(f,u),E.enabled=!1,C.addPass(E),r!==void 0&&(R=new Be({normalBuffer:E.texture,resolutionScale:r}),R.enabled=!1,C.addPass(R))),[C,E,R]},[u,d,s,p,_,S,f,l,r]);A(()=>c?.setSize(x.width,x.height),[c,x]),J((C,R)=>{if(a){const E=d.autoClear;d.autoClear=i,p&&!i&&d.clearStencil(),c.render(R),d.autoClear=E}},a?n:0);const F=O(null);L(()=>{const C=[],R=F.current.__r3f;if(R&&c){const E=R.children;for(let T=0;T<E.length;T++){const N=E[T].object;if(N instanceof W){const q=[N];if(!ie(N)){let G=null;for(;(G=E[T+1]?.object)instanceof W&&!ie(G);)q.push(G),T++}const $=new Ve(u,...q);C.push($)}else N instanceof Fe&&C.push(N)}for(const T of C)c?.addPass(T);U&&(U.enabled=!0),b&&(b.enabled=!0)}return()=>{for(const E of C)c?.removePass(E);U&&(U.enabled=!1),b&&(b.enabled=!1)}},[c,e,u,U,b]),A(()=>{const C=d.toneMapping;return d.toneMapping=_e,()=>{d.toneMapping=C}},[d]);const X=z(()=>({composer:c,normalPass:U,downSamplingPass:b,resolutionScale:r,camera:u,scene:f}),[c,U,b,r,u,f]);return oe(g,()=>c,[c]),/*@__PURE__*/w(D.Provider,{value:X,children:/*@__PURE__*/w("group",{ref:F,children:e})})})),k=e=>typeof e=="object"&&e!=null&&"current"in e?e.current:e;let vt=0;const le=/*@__PURE__*/new WeakMap,P=(e,t)=>function({blendFunction:o=t?.blendFunction,opacity:r=t?.opacity,...a}){let n=le.get(e);if(!n){const l=`@react-three/postprocessing/${e.name}-${vt++}`;Ee({[l]:e}),le.set(e,n=l)}const i=V(l=>l.camera),s=ee.useMemo(()=>[...t?.args??[],...a.args??[{...t,...a}]],[JSON.stringify(a)]);return /*@__PURE__*/w(n,{camera:i,"blendMode-blendFunction":o,"blendMode-opacity-value":r,...a,args:s})},Z=(e,t)=>{const o=e[t];return ee.useMemo(()=>typeof o=="number"?new h.Vector2(o,o):o?new h.Vector2(...o):new h.Vector2,[o])},ce=/*@__PURE__*/B(function({blendFunction:e,worldFocusDistance:t,worldFocusRange:o,focusDistance:r,focusRange:a,focalLength:n,bokehScale:i,resolutionScale:s,resolutionX:l,resolutionY:p,width:_,height:S,target:g,depthTexture:d,...m},v){const{camera:x}=M(D),f=g!=null,u=z(()=>{const c=new Me(x,{blendFunction:e,worldFocusDistance:t,worldFocusRange:o,focusDistance:r,focusRange:a,focalLength:n,bokehScale:i,resolutionScale:s,resolutionX:l,resolutionY:p,width:_,height:S});f&&(c.target=new ge),d&&c.setDepthTexture(d.texture,d.packing);const U=c.maskPass;return U.maskFunction=De.MULTIPLY_RGB_SET_ALPHA,c},[x,e,t,o,r,a,n,i,s,l,p,_,S,f,d]);return A(()=>()=>{u.dispose()},[u]),/*@__PURE__*/w("primitive",{...m,ref:v,object:u,target:g})}),ht=/*@__PURE__*/B(({target:e=void 0,mouse:t=!1,debug:o=void 0,manual:r=!1,smoothTime:a=.25,...n},i)=>{const s=O(null),l=O(null),p=O(null),_=V(({scene:b})=>b),S=V(({pointer:b})=>b),{composer:g,camera:d}=M(D),[m]=j(()=>new ke),[v]=j(()=>new Ge);A(()=>(g.addPass(m),g.addPass(v),()=>{g.removePass(m),g.removePass(v)}),[g,m,v]),A(()=>()=>{m.dispose(),v.dispose()},[m,v]);const[x]=j(()=>new h.Vector3(0,0,0)),[f]=j(()=>new h.Vector3(0,0,0)),u=ae(async(b,F)=>(f.x=b,f.y=F,f.z=await m.readDepth(f),f.z=f.z*2-1,1-f.z>1e-7?f.unproject(d):!1),[f,m,d]),c=ae(async(b,F=!0)=>{if(e)x.set(...e);else{const{x:X,y:C}=t?S:{x:0,y:0},R=await u(X,C);R&&x.copy(R)}F&&s.current?.target&&(a>0&&b>0?se.damp3(s.current.target,x,a,b):s.current.target.copy(x))},[e,x,t,u,a,S]);J(async(b,F)=>{r||c(F),l.current&&l.current.position.copy(x),p.current&&s.current?.target&&p.current.position.copy(s.current.target)});const U=z(()=>({dofRef:s,hitpoint:x,update:c}),[x,c]);return oe(i,()=>U,[U]),/*@__PURE__*/K(Q,{children:[o?Re(/*@__PURE__*/K(Q,{children:[/*@__PURE__*/K("mesh",{ref:l,children:[/*@__PURE__*/w("sphereGeometry",{args:[o,16,16]}),/*@__PURE__*/w("meshBasicMaterial",{color:"#00ff00",opacity:1,transparent:!0,depthWrite:!1})]}),/*@__PURE__*/K("mesh",{ref:p,children:[/*@__PURE__*/w("sphereGeometry",{args:[o/2,16,16]}),/*@__PURE__*/w("meshBasicMaterial",{color:"#00ff00",opacity:.5,transparent:!0,depthWrite:!1})]})]}),_):null,/*@__PURE__*/w(ce,{ref:s,...n,target:x})]})}),_t={fragmentShader:`
+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 EffectComposerContext = /* @__PURE__ */ createContext(null);
+var isConvolution = (effect) => (effect.getAttributes() & 2) === 2;
+function createRendererPropertyGuard(property) {
+	const refs = /* @__PURE__ */ new WeakMap();
+	return {
+		acquire(gl, forcedValue) {
+			const existing = refs.get(gl);
+			if (existing) {
+				existing.count++;
+				existing.forcedValue = forcedValue;
+			} else refs.set(gl, {
+				count: 1,
+				original: gl[property],
+				forcedValue
+			});
+		},
+		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 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++;
+				}
+			}
+			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
+		});
+		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);
+		};
+	}, [
+		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;
+		}
+		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;
+		};
+	}, [
+		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, [
+		composerState,
+		resolutionScale,
+		camera,
+		scene,
+		requestRebuild,
+		autoClear
+	]);
+	useImperativeHandle(ref, () => composerState?.composer, [composerState]);
+	if (!state) return null;
+	return /* @__PURE__ */ jsx(EffectComposerContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx("group", {
+			ref: group,
+			children
+		})
+	});
+});
+//#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/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;
+}
+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);
+		}
+		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 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", 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);
+		}
+		texture.needsUpdate = true;
+		return texture;
+	}
+};
+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
+	]);
+}
+//#endregion
+//#region src/effects/DepthOfField.tsx
+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
+		});
+		if (autoFocus) effect.target = new Vector3();
+		effect.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
+		return effect;
+	}, [
+		camera,
+		worldFocusDistance,
+		worldFocusRange,
+		focalLength,
+		resolutionScale,
+		resolutionX,
+		resolutionY,
+		width,
+		height,
+		autoFocus
+	]);
+	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 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 {
+			const { x, y } = followMouse ? pointer : {
+				x: 0,
+				y: 0
+			};
+			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);
+		}
+	}, [
+		target,
+		hitpoint,
+		followMouse,
+		pointer,
+		getHit,
+		smoothTime
+	]);
+	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);
+	});
+	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 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
+var ColorAverage = /* @__PURE__ */ createEffectComponent(ColorAverageEffect);
+//#endregion
+//#region src/effects/ColorDepth.tsx
+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
+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
+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
+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 HueSaturation = /* @__PURE__ */ createEffectComponent(HueSaturationEffect);
+//#endregion
+//#region src/effects/LensFlare.tsx
+var LensFlareShader = { fragmentShader: `
     uniform float time;
     uniform vec2 lensPosition;
     uniform vec2 screenRes;
@@ -382,7 +1405,312 @@ import{jsx as w,jsxs as K,Fragment as Q}from"react/jsx-runtime";import ee,{creat
         outputColor = vec4(inputColor);
       }
     }
-  `};class fe extends W{constructor({blendFunction:t,enabled:o,glareSize:r,lensPosition:a,screenRes:n,starPoints:i,flareSize:s,flareSpeed:l,flareShape:p,animated:_,anamorphic:S,colorGain:g,lensDirtTexture:d,haloScale:m,secondaryGhosts:v,aditionalStreaks:x,ghostScale:f,opacity:u,starBurst:c}){super("LensFlareEffect",_t.fragmentShader,{blendFunction:t,uniforms:/*@__PURE__*/new Map([["enabled",new h.Uniform(o)],["glareSize",new h.Uniform(r)],["lensPosition",new h.Uniform(a)],["time",new h.Uniform(0)],["screenRes",new h.Uniform(n)],["starPoints",new h.Uniform(i)],["flareSize",new h.Uniform(s)],["flareSpeed",new h.Uniform(l)],["flareShape",new h.Uniform(p)],["animated",new h.Uniform(_)],["anamorphic",new h.Uniform(S)],["colorGain",new h.Uniform(g)],["lensDirtTexture",new h.Uniform(d)],["haloScale",new h.Uniform(m)],["secondaryGhosts",new h.Uniform(v)],["aditionalStreaks",new h.Uniform(x)],["ghostScale",new h.Uniform(f)],["starBurst",new h.Uniform(c)],["opacity",new h.Uniform(u)]])})}update(t,o,r){const a=this.uniforms.get("time");a&&(a.value+=r)}}const xt=/*@__PURE__*/P(fe),gt=({smoothTime:e=.07,blendFunction:t=23,enabled:o=!0,glareSize:r=.2,lensPosition:a=new h.Vector3(-25,6,-60),screenRes:n=new h.Vector2(0,0),starPoints:i=6,flareSize:s=.01,flareSpeed:l=.01,flareShape:p=.01,animated:_=!0,anamorphic:S=!1,colorGain:g=new h.Color(20,20,20),lensDirtTexture:d=null,haloScale:m=.5,secondaryGhosts:v=!0,aditionalStreaks:x=!0,ghostScale:f=0,opacity:u=1,starBurst:c=!1})=>{const U=V(({viewport:T})=>T),b=V(({raycaster:T})=>T),{scene:F,camera:X}=M(D),[C]=j(()=>new h.Vector2),[R]=j(()=>new h.Vector3),E=O(null);return J((T,N)=>{if(!E?.current)return;const q=E.current.uniforms.get("lensPosition"),$=E.current.uniforms.get("opacity");if(!q||!$)return;let G=1;if(R.copy(a).project(X),R.z>1)return;q.value.x=R.x,q.value.y=R.y,C.x=R.x,C.y=R.y,b.setFromCamera(C,X);const ve=b.intersectObjects(F.children,!0),{object:I}=ve[0]||{};I&&(I.userData?.lensflare==="no-occlusion"?G=0:I instanceof h.Mesh&&(I.material.uniforms?._transmission?.value>.2||I.material._transmission&&I.material._transmission>.2?G=.2:I.material.transparent&&(G=I.material.opacity))),se.damp($,"value",G,e,N)}),A(()=>{if(!E?.current)return;const T=E.current.uniforms.get("screenRes");T&&(T.value.x=U.width,T.value.y=U.height)},[U]),/*@__PURE__*/w(xt,{ref:E,blendFunction:t,enabled:o,glareSize:r,lensPosition:a,screenRes:n,starPoints:i,flareSize:s,flareSpeed:l,flareShape:p,animated:_,anamorphic:S,colorGain:g,lensDirtTexture:d,haloScale:m,secondaryGhosts:v,aditionalStreaks:x,ghostScale:f,opacity:u,starBurst:c})},wt=/*@__PURE__*/P(Ie,{blendFunction:0}),St=/*@__PURE__*/P(Le),yt=/*@__PURE__*/P(Ne),Pt=/*@__PURE__*/B(function({blendFunction:e=23},t){const o=z(()=>new je(e),[e]);return /*@__PURE__*/w("primitive",{ref:t,object:o,dispose:null})}),bt=/*@__PURE__*/P(Oe),Et=/*@__PURE__*/P(We),Rt=/*@__PURE__*/P(Xe),Ut=/*@__PURE__*/B(function({active:e=!0,...t},o){const r=V(p=>p.invalidate),a=Z(t,"delay"),n=Z(t,"duration"),i=Z(t,"strength"),s=Z(t,"chromaticAberrationOffset"),l=z(()=>new qe({...t,delay:a,duration:n,strength:i,chromaticAberrationOffset:s}),[a,n,t,i,s]);return L(()=>{l.mode=e?t.mode||ne.SPORADIC:ne.DISABLED,r()},[e,l,r,t.mode]),A(()=>()=>{l.dispose?.()},[l]),/*@__PURE__*/w("primitive",{ref:o,object:l,dispose:null})}),Ct=/*@__PURE__*/B(function(e,t){const{camera:o}=M(D),r=z(()=>new He(o,k(e.sun),e),[o,e]);return L(()=>void(r.lightSource=k(e.sun)),[r,e.sun]),/*@__PURE__*/w("primitive",{ref:t,object:r,dispose:null})}),zt=/*@__PURE__*/B(function({size:e,...t},o){const r=V(n=>n.invalidate),a=z(()=>new Ze(t),[t]);return L(()=>{e&&a.setSize(e.width,e.height),r()},[a,e,r]),/*@__PURE__*/w("primitive",{ref:o,object:a,dispose:null})}),Tt=/*@__PURE__*/P($e),At=/*@__PURE__*/P(Ke,{blendFunction:5}),Bt=/*@__PURE__*/B(function({selection:e=[],selectionLayer:t=10,blendFunction:o,patternTexture:r,edgeStrength:a,pulseSpeed:n,visibleEdgeColor:i,hiddenEdgeColor:s,width:l,height:p,kernelSize:_,blur:S,xRay:g,...d},m){const v=V(U=>U.invalidate),{scene:x,camera:f}=M(D),u=z(()=>new Ye(x,f,{blendFunction:o,patternTexture:r,edgeStrength:a,pulseSpeed:n,visibleEdgeColor:i,hiddenEdgeColor:s,width:l,height:p,kernelSize:_,blur:S,xRay:g,...d}),[o,S,f,a,p,s,_,r,n,x,i,l,g]),c=M(H);return A(()=>{if(!c&&e)return u.selection.set(Array.isArray(e)?e.map(k):[k(e)]),v(),()=>{u.selection.clear(),v()}},[u,e,c,v]),A(()=>{u.selectionLayer=t,v()},[u,v,t]),O(void 0),A(()=>{if(c&&c.enabled&&c.selected?.length)return u.selection.set(c.selected),v(),()=>{u.selection.clear(),v()}},[c,u.selection,v]),A(()=>()=>{u.dispose()},[u]),/*@__PURE__*/w("primitive",{ref:m,object:u})}),Vt=/*@__PURE__*/B(function({granularity:e=5},t){const o=z(()=>new Je(e),[e]);return /*@__PURE__*/w("primitive",{ref:t,object:o,dispose:null})}),Ft=/*@__PURE__*/P(Qe,{blendFunction:24,density:1.25}),Mt=(e,t)=>e.layers.enable(t.selection.layer),Dt=(e,t)=>e.layers.disable(t.selection.layer),kt=/*@__PURE__*/B(function({selection:e=[],selectionLayer:t=10,lights:o=[],inverted:r=!1,ignoreBackground:a=!1,luminanceThreshold:n,luminanceSmoothing:i,intensity:s,width:l,height:p,kernelSize:_,mipmapBlur:S,...g},d){o.length===0&&console.warn("SelectiveBloom requires lights to work.");const m=V(c=>c.invalidate),{scene:v,camera:x}=M(D),f=z(()=>{const c=new et(v,x,{blendFunction:0,luminanceThreshold:n,luminanceSmoothing:i,intensity:s,width:l,height:p,kernelSize:_,mipmapBlur:S,...g});return c.inverted=r,c.ignoreBackground=a,c},[v,x,n,i,s,l,p,_,S,r,a,g]),u=M(H);return A(()=>{if(!u&&e)return f.selection.set(Array.isArray(e)?e.map(k):[k(e)]),m(),()=>{f.selection.clear(),m()}},[f,e,u,m]),A(()=>{f.selection.layer=t,m()},[f,m,t]),A(()=>{if(o&&o.length>0)return o.forEach(c=>Mt(k(c),f)),m(),()=>{o.forEach(c=>Dt(k(c),f)),m()}},[f,m,o,t]),A(()=>{if(u&&u.enabled&&u.selected?.length)return f.selection.set(u.selected),m(),()=>{f.selection.clear(),m()}},[u,f.selection,m]),/*@__PURE__*/w("primitive",{ref:d,object:f,dispose:null})}),Gt=/*@__PURE__*/P(tt),It=/*@__PURE__*/B(function(e,t){const{camera:o,normalPass:r,downSamplingPass:a,resolutionScale:n}=M(D),i=z(()=>r===null&&a===null?(console.error("Please enable the NormalPass in the EffectComposer in order to use SSAO."),{}):new ot(o,r&&!a?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:a?a.texture:null,resolutionScale:n??1,depthAwareUpsampling:!0,...e}),[o,a,r,n]);return /*@__PURE__*/w("primitive",{ref:t,object:i,dispose:null})}),Lt=/*@__PURE__*/P(at),Nt=/*@__PURE__*/P(rt),jt={fragmentShader:`
+  ` };
+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 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(_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
+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 NoiseImpl = /* @__PURE__ */ createEffectComponent(NoiseEffect);
+function Noise({ blendFunction = 5, ...props }) {
+	return /* @__PURE__ */ jsx(NoiseImpl, {
+		blendFunction,
+		...props
+	});
+}
+//#endregion
+//#region src/effects/Outline.tsx
+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
+	}), [
+		scene,
+		camera,
+		resolutionScale,
+		resolutionX,
+		resolutionY
+	]);
+	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
+var PixelationImpl = /* @__PURE__ */ createEffectComponent(PixelationEffect);
+function Pixelation({ granularity = 5, ref }) {
+	return /* @__PURE__ */ jsx(PixelationImpl, {
+		granularity,
+		ref
+	});
+}
+//#endregion
+//#region src/effects/Ramp.tsx
+var RampShader = { fragmentShader: `
     uniform int rampType;
 
     uniform vec2 rampStart;
@@ -442,7 +1770,354 @@ import{jsx as w,jsxs as K,Fragment as Q}from"react/jsx-runtime";import ee,{creat
         outputColor = mix(startColor, endColor, rampAlpha);
       }
     }
-  `};var ue=/*@__PURE__*/(e=>(e[e.Linear=0]="Linear",e[e.Radial=1]="Radial",e[e.MirroredLinear=2]="MirroredLinear",e))(ue||{});class pe extends W{constructor({rampType:t=0,rampStart:o=[.5,.5],rampEnd:r=[1,1],startColor:a=[0,0,0,1],endColor:n=[1,1,1,1],rampBias:i=.5,rampGain:s=.5,rampMask:l=!1,rampInvert:p=!1,..._}={}){super("RampEffect",jt.fragmentShader,{..._,uniforms:/*@__PURE__*/new Map([["rampType",new y(t)],["rampStart",new y(o)],["rampEnd",new y(r)],["startColor",new y(a)],["endColor",new y(n)],["rampBias",new y(i)],["rampGain",new y(s)],["rampMask",new y(l)],["rampInvert",new y(p)]])})}}const Ot=/*@__PURE__*/P(pe),Wt=/*@__PURE__*/B(function({textureSrc:e,texture:t,opacity:o=1,...r},a){const n=Ue(we,e);L(()=>{n.colorSpace=Se,n.wrapS=n.wrapT=Y},[n]);const i=z(()=>new nt({...r,texture:n||t}),[r,n,t]);return /*@__PURE__*/w("primitive",{ref:a,object:i,"blendMode-opacity-value":o,dispose:null})}),Xt=/*@__PURE__*/P(st),qt=/*@__PURE__*/P(it),Ht=/*@__PURE__*/P(lt),Zt=/*@__PURE__*/B(function({lut:e,tetrahedralInterpolation:t,...o},r){const a=z(()=>new ct(e,o),[e,o]),n=V(i=>i.invalidate);return L(()=>{t&&(a.tetrahedralInterpolation=t),e&&(a.lut=e),n()},[a,n,e,t]),/*@__PURE__*/w("primitive",{ref:r,object:a,dispose:null})}),$t=/*@__PURE__*/P(ft,{blendFunction:0}),Kt={fragmentShader:`
+  ` };
+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 = [
+		1,
+		1,
+		1,
+		1
+	], rampBias = .5, rampGain = .5, rampMask = false, rampInvert = false, ...params } = {}) {
+		super("RampEffect", RampShader.fragmentShader, {
+			...params,
+			uniforms: /* @__PURE__ */ new Map([
+				["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)]
+			])
+		});
+	}
+	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
+	]);
+	useLiveDefaults(effect, liveProps, LIVE_KEYS$2);
+	useSelectionSync(effect, selection, selectionLayer);
+	useEffect(() => {
+		if (lights.length === 0) {
+			console.warn("SelectiveBloom requires lights to work.");
+			return;
+		}
+		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();
+		};
+	}, [
+		effect,
+		invalidate,
+		lights,
+		selectionLayer
+	]);
+	useDispose(effect);
+	return /* @__PURE__ */ jsx("primitive", {
+		ref,
+		object: effect
+	});
+}
+//#endregion
+//#region src/effects/Sepia.tsx
+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
+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
+	]);
+	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
+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 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
 
@@ -498,58 +2173,179 @@ import{jsx as w,jsxs as K,Fragment as Q}from"react/jsx-runtime";import ee,{creat
         /* switch back from pre-multiplied alpha */
         outputColor.rgb /= outputColor.a + 0.00001;
     }
-    `};class me extends W{constructor({blendFunction:t=23,blur:o=.15,taper:r=.5,start:a=[.5,0],end:n=[.5,1],samples:i=10,direction:s=[1,1]}={}){super("TiltShiftEffect",Kt.fragmentShader,{blendFunction:t,attributes:2,uniforms:/*@__PURE__*/new Map([["blur",new y(o)],["taper",new y(r)],["start",new y(a)],["end",new y(n)],["samples",new y(i)],["direction",new y(s)]])})}}const Yt=/*@__PURE__*/P(me,{blendFunction:23}),Jt=`
-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 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 Uniform(blur)],
+				["taper", new Uniform(taper)],
+				["start", new Uniform(start)],
+				["end", new Uniform(end)],
+				["samples", new Uniform(samples)],
+				["direction", new Uniform(direction)]
+			])
+		});
+	}
+	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
+	});
 }
-`;class Qt extends W{constructor({font:t="arial",characters:o=" .:,'-^=*+?!|0#X%WM@",fontSize:r=54,cellSize:a=16,color:n="#ffffff",invert:i=!1}={}){const s=/*@__PURE__*/new Map([["uCharacters",new y(new ye)],["uCellSize",new y(a)],["uCharactersCount",new y(o.length)],["uColor",new y(new Pe(n))],["uInvert",new y(i)]]);super("ASCIIEffect",Jt,{uniforms:s});const l=this.uniforms.get("uCharacters");l&&(l.value=this.createCharactersTexture(o,t,r))}createCharactersTexture(t,o,r){const a=document.createElement("canvas"),n=1024,i=16,s=n/i;a.width=a.height=n;const l=new be(a,void 0,Y,Y,re,re),p=a.getContext("2d");if(!p)throw new Error("Context not available");p.clearRect(0,0,n,n),p.font=`${r}px ${o}`,p.textAlign="center",p.textBaseline="middle",p.fillStyle="#fff";for(let _=0;_<t.length;_++){const S=t[_],g=_%i,d=Math.floor(_/i);p.fillText(S,g*s+s/2,d*s+s/2)}return l.needsUpdate=!0,l}}const eo=/*@__PURE__*/B(({font:e="arial",characters:t=" .:,'-^=*+?!|0#X%WM@",fontSize:o=54,cellSize:r=16,color:a="#ffffff",invert:n=!1},i)=>{const s=z(()=>new Qt({characters:t,font:e,fontSize:o,cellSize:r,color:a,invert:n}),[t,o,r,a,n,e]);return /*@__PURE__*/w("primitive",{ref:i,object:s})}),to={fragmentShader:`
+//#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 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;
     }
-  `};class de extends W{constructor({blendFunction:t=23,factor:o=0}={}){super("WaterEffect",to.fragmentShader,{blendFunction:t,attributes:2,uniforms:/*@__PURE__*/new Map([["factor",new y(o)]])})}}const oo=/*@__PURE__*/P(de,{blendFunction:23}),ao=/*@__PURE__*/B(({halfRes:e,screenSpaceRadius:t,quality:o,depthAwareUpsampling:r=!0,aoRadius:a=5,aoSamples:n=16,denoiseSamples:i=4,denoiseRadius:s=12,distanceFalloff:l=1,intensity:p=1,color:_,renderMode:S=0},g)=>{const{camera:d,scene:m}=V(),v=z(()=>new ut(m,d),[d,m]);return L(()=>{Ce(v.configuration,{color:_,aoRadius:a,distanceFalloff:l,intensity:p,aoSamples:n,denoiseSamples:i,denoiseRadius:s,screenSpaceRadius:t,renderMode:S,halfRes:e,depthAwareUpsampling:r})},[t,_,a,l,p,n,i,s,S,e,r,v]),L(()=>{o&&v.setQualityMode(o.charAt(0).toUpperCase()+o.slice(1))},[v,o]),/*@__PURE__*/w("primitive",{ref:g,object:v})});export{eo as ASCII,ht as Autofocus,wt as Bloom,St as BrightnessContrast,yt as ChromaticAberration,Pt as ColorAverage,bt as ColorDepth,Et as Depth,ce as DepthOfField,Rt as DotScreen,dt as EffectComposer,D as EffectComposerContext,Nt as FXAA,Ut as Glitch,Ct as GodRays,zt as Grid,Tt as HueSaturation,Zt as LUT,gt as LensFlare,fe as LensFlareEffect,ao as N8AO,At as Noise,Bt as Outline,Vt as Pixelation,Ot as Ramp,pe as RampEffect,ue as RampType,Lt as SMAA,It as SSAO,Ft as Scanline,mt as Select,pt as Selection,kt as SelectiveBloom,Gt as Sepia,Ht as ShockWave,Wt as Texture,$t as TiltShift,Yt as TiltShift2,me as TiltShiftEffect,Xt as ToneMapping,qt as Vignette,oo as WaterEffect,de as WaterEffectImpl,k as resolveRef,H as selectionContext,Z as useVector2,P as wrapEffect};
-//# sourceMappingURL=index.js.map
+  ` };
+var WaterEffectImpl = class extends Effect {
+	constructor({ blendFunction = 23, factor = 0 } = {}) {
+		super("WaterEffect", WaterShader.fragmentShader, {
+			blendFunction,
+			attributes: 2,
+			uniforms: /* @__PURE__ */ new Map([["factor", new Uniform(factor)]])
+		});
+	}
+	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();
+	}, [
+		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 { 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