@react-three/postprocessing 2.12.3 → 2.13.0

package/dist/effects/ASCII.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Effect } from 'postprocessing';
+interface IASCIIEffectProps {
+    characters?: string;
+    fontSize?: number;
+    cellSize?: number;
+    color?: string;
+    invert?: boolean;
+}
+declare class ASCIIEffect extends Effect {
+    constructor({ characters, fontSize, cellSize, color, invert, }?: IASCIIEffectProps);
+    /** Draws the characters on a Canvas and returns a texture */
+    createCharactersTexture(characters: string, fontSize: number): THREE.Texture;
+}
+export declare const ASCII: import("react").ForwardRefExoticComponent<IASCIIEffectProps & import("react").RefAttributes<ASCIIEffect>>;
+export {};

package/dist/effects/N8AO.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ReactThreeFiber } from '@react-three/fiber';
 type N8AOProps = {
     aoRadius?: number;
     distanceFalloff?: number;
@@ -7,6 +8,7 @@ type N8AOProps = {
     aoSamples?: number;
     denoiseSamples?: number;
     denoiseRadius?: number;
+    color?: ReactThreeFiber.Color;
 };
 export declare const N8AO: import("react").ForwardRefExoticComponent<N8AOProps & import("react").RefAttributes<N8AOPostPass>>;
 export {};

package/dist/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var THREE = require('three');
 var React = require('react');
+var THREE = require('three');
 var fiber = require('@react-three/fiber');
 var postprocessing = require('postprocessing');
-var maath = require('maath');
 var threeStdlib = require('three-stdlib');
-var n8ao = require('n8ao');
+var maath = require('maath');
 var screenSpaceReflections = require('screen-space-reflections');
+var n8ao = require('n8ao');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -29,6 +29,35 @@ function _interopNamespaceDefault(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
+const selectionContext = React.createContext(null);
+function Selection({ children, enabled = true }) {
+    const [selected, select] = React.useState([]);
+    const value = React.useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
+    return jsxRuntime.jsx(selectionContext.Provider, { value: value, children: children });
+}
+function Select({ enabled = false, children, ...props }) {
+    const group = React.useRef(null);
+    const api = React.useContext(selectionContext);
+    React.useEffect(() => {
+        if (api && enabled) {
+            let changed = false;
+            const current = [];
+            group.current.traverse((o) => {
+                o.type === 'Mesh' && current.push(o);
+                if (api.selected.indexOf(o) === -1)
+                    changed = true;
+            });
+            if (changed) {
+                api.select((state) => [...state, ...current]);
+                return () => {
+                    api.select((state) => state.filter((selected) => !current.includes(selected)));
+                };
+            }
+        }
+    }, [enabled, children, api]);
+    return (jsxRuntime.jsx("group", { ref: group, ...props, children: children }));
+}
+
 const EffectComposerContext = React.createContext(null);
 const EffectComposer = React.memo(React.forwardRef(({ children, camera: _camera, scene: _scene, resolutionScale, enabled = true, renderPriority = 1, autoClear = true, depthBuffer, disableNormalPass, stencilBuffer, multisampling = 8, frameBufferType = THREE.HalfFloatType, }, ref) => {
     const { gl, scene: defaultScene, camera: defaultCamera, size } = fiber.useThree();
@@ -120,6 +149,35 @@ const EffectComposer = React.memo(React.forwardRef(({ children, camera: _camera,
     return (jsxRuntime.jsx(EffectComposerContext.Provider, { value: state, children: jsxRuntime.jsx("group", { ref: group, children: children }) }));
 }));
 
+const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
+let i = 0;
+const components = new WeakMap();
+const wrapEffect = (effect, defaults) => 
+/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
+    let Component = components.get(effect);
+    if (!Component) {
+        const key = `@react-three/postprocessing/${effect.name}-${i++}`;
+        fiber.extend({ [key]: effect });
+        components.set(effect, (Component = key));
+    }
+    const camera = fiber.useThree((state) => state.camera);
+    const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(props)]);
+    return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity-value": opacity, ...props, ref: ref, args: args }));
+});
+const useVector2 = (props, key) => {
+    const value = props[key];
+    return React.useMemo(() => {
+        if (typeof value === 'number')
+            return new THREE__namespace.Vector2(value, value);
+        else if (value)
+            return new THREE__namespace.Vector2(...value);
+        else
+            return new THREE__namespace.Vector2();
+    }, [value]);
+};
+
 const DepthOfField = React.forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
     const invalidate = fiber.useThree((state) => state.invalidate);
     const { camera } = React.useContext(EffectComposerContext);
@@ -224,35 +282,6 @@ const Autofocus = React.forwardRef(({ target = undefined, mouse: followMouse = f
                 : null, jsxRuntime.jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
 });
 
-const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
-let i = 0;
-const components = new WeakMap();
-const wrapEffect = (effect, defaults) => 
-/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
-    let Component = components.get(effect);
-    if (!Component) {
-        const key = `@react-three/postprocessing/${effect.name}-${i++}`;
-        fiber.extend({ [key]: effect });
-        components.set(effect, (Component = key));
-    }
-    const camera = fiber.useThree((state) => state.camera);
-    const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(props)]);
-    return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity-value": opacity, ...props, ref: ref, args: args }));
-});
-const useVector2 = (props, key) => {
-    const value = props[key];
-    return React.useMemo(() => {
-        if (typeof value === 'number')
-            return new THREE__namespace.Vector2(value, value);
-        else if (value)
-            return new THREE__namespace.Vector2(...value);
-        else
-            return new THREE__namespace.Vector2();
-    }, [value]);
-};
-
 const Bloom = wrapEffect(postprocessing.BloomEffect, {
     blendFunction: postprocessing.BlendFunction.ADD,
 });
@@ -313,35 +342,6 @@ const HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
 
 const Noise = wrapEffect(postprocessing.NoiseEffect, { blendFunction: postprocessing.BlendFunction.COLOR_DODGE });
 
-const selectionContext = React.createContext(null);
-function Selection({ children, enabled = true }) {
-    const [selected, select] = React.useState([]);
-    const value = React.useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
-    return jsxRuntime.jsx(selectionContext.Provider, { value: value, children: children });
-}
-function Select({ enabled = false, children, ...props }) {
-    const group = React.useRef(null);
-    const api = React.useContext(selectionContext);
-    React.useEffect(() => {
-        if (api && enabled) {
-            let changed = false;
-            const current = [];
-            group.current.traverse((o) => {
-                o.type === 'Mesh' && current.push(o);
-                if (api.selected.indexOf(o) === -1)
-                    changed = true;
-            });
-            if (changed) {
-                api.select((state) => [...state, ...current]);
-                return () => {
-                    api.select((state) => state.filter((selected) => !current.includes(selected)));
-                };
-            }
-        }
-    }, [enabled, children, api]);
-    return (jsxRuntime.jsx("group", { ref: group, ...props, children: children }));
-}
-
 const Outline = React.forwardRef(function Outline({ selection = [], selectionLayer = 10, blendFunction, patternTexture, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, width, height, kernelSize, blur, xRay, ...props }, forwardRef) {
     const invalidate = fiber.useThree((state) => state.invalidate);
     const { scene, camera } = React.useContext(EffectComposerContext);
@@ -367,7 +367,6 @@ const Outline = React.forwardRef(function Outline({ selection = [], selectionLay
         hiddenEdgeColor,
         kernelSize,
         patternTexture,
-        props,
         pulseSpeed,
         scene,
         visibleEdgeColor,
@@ -510,26 +509,6 @@ const SSAO = React.forwardRef(function SSAO(props, ref) {
     return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-const N8AO = React.forwardRef(({ quality, aoRadius = 5, aoSamples = 16, denoiseSamples = 4, denoiseRadius = 12, distanceFalloff = 1, intensity = 1, }, ref) => {
-    const { camera, scene } = fiber.useThree();
-    const effect = React.useMemo(() => new n8ao.N8AOPostPass(scene, camera), []);
-    React.useLayoutEffect(() => {
-        Object.assign(effect.configuration, {
-            aoRadius,
-            distanceFalloff,
-            intensity,
-            aoSamples,
-            denoiseSamples,
-            denoiseRadius,
-        });
-    }, [aoRadius, distanceFalloff, intensity, aoSamples, denoiseSamples, denoiseRadius]);
-    React.useLayoutEffect(() => {
-        if (quality)
-            effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1));
-    }, [quality]);
-    return jsxRuntime.jsx("primitive", { ref: ref, object: effect });
-});
-
 const SMAA = wrapEffect(postprocessing.SMAAEffect);
 
 const Texture = React.forwardRef(function Texture({ textureSrc, texture, ...props }, ref) {
@@ -646,6 +625,93 @@ class TiltShiftEffect extends postprocessing.Effect {
 }
 const TiltShift2 = wrapEffect(TiltShiftEffect, { blendFunction: postprocessing.BlendFunction.NORMAL });
 
+const 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;
+}
+`;
+class ASCIIEffect extends postprocessing.Effect {
+    constructor({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false, } = {}) {
+        const uniforms = new Map([
+            ['uCharacters', new THREE.Uniform(new THREE.Texture())],
+            ['uCellSize', new THREE.Uniform(cellSize)],
+            ['uCharactersCount', new THREE.Uniform(characters.length)],
+            ['uColor', new THREE.Uniform(new THREE.Color(color))],
+            ['uInvert', new THREE.Uniform(invert)],
+        ]);
+        super('ASCIIEffect', fragment, { uniforms });
+        const charactersTextureUniform = this.uniforms.get('uCharacters');
+        if (charactersTextureUniform) {
+            charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize);
+        }
+    }
+    /** Draws the characters on a Canvas and returns a texture */
+    createCharactersTexture(characters, 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 THREE.CanvasTexture(canvas, undefined, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestFilter);
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Context not available');
+        }
+        context.clearRect(0, 0, SIZE, SIZE);
+        context.font = `${fontSize}px arial`;
+        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;
+    }
+}
+const ASCII = React.forwardRef(({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false }, fref) => {
+    const effect = React.useMemo(() => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }), [characters, fontSize, cellSize, color, invert]);
+    return jsxRuntime.jsx("primitive", { ref: fref, object: effect });
+});
+
 const SSR = React.forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true, ...props }, ref) {
     const { invalidate } = fiber.useThree();
     const { scene, camera } = React.useContext(EffectComposerContext);
@@ -667,6 +733,28 @@ const SSR = React.forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true,
     return jsxRuntime.jsx("primitive", { ref: ref, object: effect, ...props });
 });
 
+const N8AO = React.forwardRef(({ quality, aoRadius = 5, aoSamples = 16, denoiseSamples = 4, denoiseRadius = 12, distanceFalloff = 1, intensity = 1, color, }, ref) => {
+    const { camera, scene } = fiber.useThree();
+    const effect = React.useMemo(() => new n8ao.N8AOPostPass(scene, camera), []);
+    React.useLayoutEffect(() => {
+        fiber.applyProps(effect.configuration, {
+            color,
+            aoRadius,
+            distanceFalloff,
+            intensity,
+            aoSamples,
+            denoiseSamples,
+            denoiseRadius,
+        });
+    }, [color, aoRadius, distanceFalloff, intensity, aoSamples, denoiseSamples, denoiseRadius]);
+    React.useLayoutEffect(() => {
+        if (quality)
+            effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1));
+    }, [quality]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect });
+});
+
+exports.ASCII = ASCII;
 exports.Autofocus = Autofocus;
 exports.Bloom = Bloom;
 exports.BrightnessContrast = BrightnessContrast;

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+export * from './Selection';
+export * from './EffectComposer';
+export * from './util';
 export * from './effects/Autofocus';
 export * from './effects/Bloom';
 export * from './effects/BrightnessContrast';
@@ -5,7 +8,7 @@ export * from './effects/ChromaticAberration';
 export * from './effects/ColorAverage';
 export * from './effects/ColorDepth';
 export * from './effects/Depth';
-export { DepthOfField } from './effects/DepthOfField';
+export * from './effects/DepthOfField';
 export * from './effects/DotScreen';
 export * from './effects/Glitch';
 export * from './effects/GodRays';
@@ -18,7 +21,6 @@ export * from './effects/ScanlineEffect';
 export * from './effects/SelectiveBloom';
 export * from './effects/Sepia';
 export * from './effects/SSAO';
-export * from './effects/N8AO';
 export * from './effects/SMAA';
 export * from './effects/Texture';
 export * from './effects/ToneMapping';
@@ -27,7 +29,6 @@ export * from './effects/ShockWave';
 export * from './effects/LUT';
 export * from './effects/TiltShift';
 export * from './effects/TiltShift2';
+export * from './effects/ASCII';
 export * from './effects/SSR';
-export * from './Selection';
-export * from './EffectComposer';
-export * from './util';
+export * from './effects/N8AO';

package/dist/index.js

@@ -1,13 +1,42 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useState, useMemo, useRef, useContext, useEffect, forwardRef, useLayoutEffect, useImperativeHandle, useCallback } from 'react';
 import * as THREE from 'three';
-import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
-import React, { createContext, forwardRef, useMemo, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState, useCallback } from 'react';
-import { useThree, useFrame, useInstanceHandle, createPortal, extend, useLoader } from '@react-three/fiber';
+import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform, Texture as Texture$1, Color, CanvasTexture, NearestFilter } from 'three';
+import { useThree, useFrame, useInstanceHandle, extend, createPortal, useLoader, applyProps } from '@react-three/fiber';
 import { EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, DepthOfFieldEffect, MaskFunction, DepthPickingPass, CopyPass, BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, EffectAttribute } from 'postprocessing';
-import { easing } from 'maath';
 import { isWebGL2Available } from 'three-stdlib';
-import { N8AOPostPass } from 'n8ao';
+import { easing } from 'maath';
 import { SSREffect } from 'screen-space-reflections';
+import { N8AOPostPass } from 'n8ao';
+
+const selectionContext = createContext(null);
+function Selection({ children, enabled = true }) {
+    const [selected, select] = useState([]);
+    const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
+    return jsx(selectionContext.Provider, { value: value, children: children });
+}
+function Select({ enabled = false, children, ...props }) {
+    const group = useRef(null);
+    const api = useContext(selectionContext);
+    useEffect(() => {
+        if (api && enabled) {
+            let changed = false;
+            const current = [];
+            group.current.traverse((o) => {
+                o.type === 'Mesh' && current.push(o);
+                if (api.selected.indexOf(o) === -1)
+                    changed = true;
+            });
+            if (changed) {
+                api.select((state) => [...state, ...current]);
+                return () => {
+                    api.select((state) => state.filter((selected) => !current.includes(selected)));
+                };
+            }
+        }
+    }, [enabled, children, api]);
+    return (jsx("group", { ref: group, ...props, children: children }));
+}
 
 const EffectComposerContext = createContext(null);
 const EffectComposer = React.memo(forwardRef(({ children, camera: _camera, scene: _scene, resolutionScale, enabled = true, renderPriority = 1, autoClear = true, depthBuffer, disableNormalPass, stencilBuffer, multisampling = 8, frameBufferType = HalfFloatType, }, ref) => {
@@ -100,6 +129,35 @@ const EffectComposer = React.memo(forwardRef(({ children, camera: _camera, scene
     return (jsx(EffectComposerContext.Provider, { value: state, children: jsx("group", { ref: group, children: children }) }));
 }));
 
+const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
+let i = 0;
+const components = new WeakMap();
+const wrapEffect = (effect, defaults) => 
+/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
+    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 = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(props)]);
+    return (jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity-value": opacity, ...props, ref: ref, args: args }));
+});
+const useVector2 = (props, key) => {
+    const value = props[key];
+    return React.useMemo(() => {
+        if (typeof value === 'number')
+            return new THREE.Vector2(value, value);
+        else if (value)
+            return new THREE.Vector2(...value);
+        else
+            return new THREE.Vector2();
+    }, [value]);
+};
+
 const DepthOfField = forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
     const invalidate = useThree((state) => state.invalidate);
     const { camera } = useContext(EffectComposerContext);
@@ -204,35 +262,6 @@ const Autofocus = forwardRef(({ target = undefined, mouse: followMouse = false,
                 : null, jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
 });
 
-const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
-let i = 0;
-const components = new WeakMap();
-const wrapEffect = (effect, defaults) => 
-/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
-    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 = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(props)]);
-    return (jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity-value": opacity, ...props, ref: ref, args: args }));
-});
-const useVector2 = (props, key) => {
-    const value = props[key];
-    return React.useMemo(() => {
-        if (typeof value === 'number')
-            return new THREE.Vector2(value, value);
-        else if (value)
-            return new THREE.Vector2(...value);
-        else
-            return new THREE.Vector2();
-    }, [value]);
-};
-
 const Bloom = wrapEffect(BloomEffect, {
     blendFunction: BlendFunction.ADD,
 });
@@ -293,35 +322,6 @@ const HueSaturation = wrapEffect(HueSaturationEffect);
 
 const Noise = wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE });
 
-const selectionContext = createContext(null);
-function Selection({ children, enabled = true }) {
-    const [selected, select] = useState([]);
-    const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
-    return jsx(selectionContext.Provider, { value: value, children: children });
-}
-function Select({ enabled = false, children, ...props }) {
-    const group = useRef(null);
-    const api = useContext(selectionContext);
-    useEffect(() => {
-        if (api && enabled) {
-            let changed = false;
-            const current = [];
-            group.current.traverse((o) => {
-                o.type === 'Mesh' && current.push(o);
-                if (api.selected.indexOf(o) === -1)
-                    changed = true;
-            });
-            if (changed) {
-                api.select((state) => [...state, ...current]);
-                return () => {
-                    api.select((state) => state.filter((selected) => !current.includes(selected)));
-                };
-            }
-        }
-    }, [enabled, children, api]);
-    return (jsx("group", { ref: group, ...props, children: children }));
-}
-
 const Outline = forwardRef(function Outline({ selection = [], selectionLayer = 10, blendFunction, patternTexture, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, width, height, kernelSize, blur, xRay, ...props }, forwardRef) {
     const invalidate = useThree((state) => state.invalidate);
     const { scene, camera } = useContext(EffectComposerContext);
@@ -347,7 +347,6 @@ const Outline = forwardRef(function Outline({ selection = [], selectionLayer = 1
         hiddenEdgeColor,
         kernelSize,
         patternTexture,
-        props,
         pulseSpeed,
         scene,
         visibleEdgeColor,
@@ -490,26 +489,6 @@ const SSAO = forwardRef(function SSAO(props, ref) {
     return jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-const N8AO = forwardRef(({ quality, aoRadius = 5, aoSamples = 16, denoiseSamples = 4, denoiseRadius = 12, distanceFalloff = 1, intensity = 1, }, ref) => {
-    const { camera, scene } = useThree();
-    const effect = useMemo(() => new N8AOPostPass(scene, camera), []);
-    useLayoutEffect(() => {
-        Object.assign(effect.configuration, {
-            aoRadius,
-            distanceFalloff,
-            intensity,
-            aoSamples,
-            denoiseSamples,
-            denoiseRadius,
-        });
-    }, [aoRadius, distanceFalloff, intensity, aoSamples, denoiseSamples, denoiseRadius]);
-    useLayoutEffect(() => {
-        if (quality)
-            effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1));
-    }, [quality]);
-    return jsx("primitive", { ref: ref, object: effect });
-});
-
 const SMAA = wrapEffect(SMAAEffect);
 
 const Texture = forwardRef(function Texture({ textureSrc, texture, ...props }, ref) {
@@ -626,6 +605,93 @@ class TiltShiftEffect extends Effect {
 }
 const TiltShift2 = wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL });
 
+const 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;
+}
+`;
+class ASCIIEffect extends Effect {
+    constructor({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false, } = {}) {
+        const uniforms = 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 });
+        const charactersTextureUniform = this.uniforms.get('uCharacters');
+        if (charactersTextureUniform) {
+            charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize);
+        }
+    }
+    /** Draws the characters on a Canvas and returns a texture */
+    createCharactersTexture(characters, 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, undefined, 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 arial`;
+        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;
+    }
+}
+const ASCII = forwardRef(({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false }, fref) => {
+    const effect = useMemo(() => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }), [characters, fontSize, cellSize, color, invert]);
+    return jsx("primitive", { ref: fref, object: effect });
+});
+
 const SSR = forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true, ...props }, ref) {
     const { invalidate } = useThree();
     const { scene, camera } = useContext(EffectComposerContext);
@@ -647,4 +713,25 @@ const SSR = forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true, ...pro
     return jsx("primitive", { ref: ref, object: effect, ...props });
 });
 
-export { Autofocus, Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, N8AO, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, resolveRef, selectionContext, useVector2, wrapEffect };
+const N8AO = forwardRef(({ quality, aoRadius = 5, aoSamples = 16, denoiseSamples = 4, denoiseRadius = 12, distanceFalloff = 1, intensity = 1, color, }, ref) => {
+    const { camera, scene } = useThree();
+    const effect = useMemo(() => new N8AOPostPass(scene, camera), []);
+    useLayoutEffect(() => {
+        applyProps(effect.configuration, {
+            color,
+            aoRadius,
+            distanceFalloff,
+            intensity,
+            aoSamples,
+            denoiseSamples,
+            denoiseRadius,
+        });
+    }, [color, aoRadius, distanceFalloff, intensity, aoSamples, denoiseSamples, denoiseRadius]);
+    useLayoutEffect(() => {
+        if (quality)
+            effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1));
+    }, [quality]);
+    return jsx("primitive", { ref: ref, object: effect });
+});
+
+export { ASCII, Autofocus, Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, N8AO, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, resolveRef, selectionContext, useVector2, wrapEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.12.3",
+  "version": "2.13.0",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "maath": "^0.5.3",
-    "n8ao": "^1.2.1",
-    "postprocessing": "^6.30.2",
+    "n8ao": "^1.3.1",
+    "postprocessing": "^6.31.0",
     "screen-space-reflections": "2.5.0",
     "three-stdlib": "^2.21.10"
   },