@react-three/postprocessing 2.9.2 → 2.10.0

package/dist/Autofocus.d.ts

@@ -0,0 +1,43 @@
+import * as THREE from 'three';
+import React, { RefObject } from 'react';
+import { DepthOfFieldEffect } from 'postprocessing';
+import { DepthOfField } from './index';
+export type AutofocusProps = typeof DepthOfField & {
+    target?: [number, number, number];
+    mouse?: boolean;
+    debug?: number;
+    manual?: boolean;
+    smoothTime?: number;
+};
+export type AutofocusApi = {
+    dofRef: RefObject<DepthOfFieldEffect>;
+    hitpoint: THREE.Vector3;
+    update: (delta: number, updateTarget: boolean) => void;
+};
+export declare const Autofocus: React.ForwardRefExoticComponent<React.ForwardRefExoticComponent<{
+    blendFunction?: import("postprocessing").BlendFunction | undefined;
+    worldFocusDistance?: number | undefined;
+    worldFocusRange?: number | undefined;
+    focusDistance?: number | undefined;
+    focalLength?: number | undefined;
+    focusRange?: number | undefined;
+    bokehScale?: number | undefined;
+    resolutionScale?: number | undefined;
+    resolutionX?: number | undefined;
+    resolutionY?: number | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+} & Partial<{
+    target: import("@react-three/fiber").Vector3;
+    depthTexture: {
+        texture: THREE.Texture;
+        packing: number;
+    };
+    blur: number;
+}> & React.RefAttributes<DepthOfFieldEffect>> & {
+    target?: [number, number, number] | undefined;
+    mouse?: boolean | undefined;
+    debug?: number | undefined;
+    manual?: boolean | undefined;
+    smoothTime?: number | undefined;
+} & React.RefAttributes<AutofocusApi>>;

package/dist/index.cjs

@@ -7,6 +7,7 @@ var THREE = require('three');
 var fiber = require('@react-three/fiber');
 var threeStdlib = require('three-stdlib');
 var screenSpaceReflections = require('screen-space-reflections');
+var maath = require('maath');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -549,6 +550,80 @@ const SSR = React.forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true,
     return jsxRuntime.jsx("primitive", { ref: ref, object: effect, ...props });
 });
 
+const Autofocus = React.forwardRef(({ target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0, ...props }, fref) => {
+    const dofRef = React.useRef(null);
+    const hitpointRef = React.useRef(null);
+    const targetRef = React.useRef(null);
+    const scene = fiber.useThree(({ scene }) => scene);
+    const pointer = fiber.useThree(({ pointer }) => pointer);
+    const { composer, camera } = React.useContext(EffectComposerContext);
+    // see: https://codesandbox.io/s/depthpickingpass-x130hg
+    const [depthPickingPass] = React.useState(new postprocessing.DepthPickingPass());
+    const [copyPass] = React.useState(new postprocessing.CopyPass());
+    React.useEffect(() => {
+        composer.addPass(depthPickingPass);
+        composer.addPass(copyPass);
+        return () => {
+            composer.removePass(depthPickingPass);
+            composer.removePass(copyPass);
+        };
+    }, [composer, depthPickingPass, copyPass]);
+    const [hitpoint] = React.useState(new THREE__namespace.Vector3(0, 0, 0));
+    const [ndc] = React.useState(new THREE__namespace.Vector3(0, 0, 0));
+    const getHit = React.useCallback(async (x, y) => {
+        ndc.x = x;
+        ndc.y = y;
+        ndc.z = await depthPickingPass.readDepth(ndc);
+        ndc.z = ndc.z * 2.0 - 1.0;
+        const hit = 1 - ndc.z > 0.0000001; // it is missed if ndc.z is close to 1
+        return hit ? ndc.unproject(camera) : false;
+    }, [ndc, depthPickingPass, camera]);
+    const update = React.useCallback(async (delta, updateTarget = true) => {
+        var _a;
+        // Update hitpoint
+        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);
+        }
+        // Update target
+        if (updateTarget && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            if (smoothTime > 0 && delta > 0) {
+                maath.easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta);
+            }
+            else {
+                dofRef.current.target.copy(hitpoint);
+            }
+        }
+    }, [target, hitpoint, followMouse, getHit, smoothTime, pointer]);
+    fiber.useFrame(async (_, delta) => {
+        var _a;
+        if (!manual) {
+            update(delta);
+        }
+        if (hitpointRef.current) {
+            hitpointRef.current.position.copy(hitpoint);
+        }
+        if (targetRef.current && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            targetRef.current.position.copy(dofRef.current.target);
+        }
+    });
+    // Ref API
+    React.useImperativeHandle(fref, () => ({
+        dofRef,
+        hitpoint,
+        update,
+    }), [hitpoint, update]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [debug
+                ? fiber.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("mesh", { ref: hitpointRef, children: [jsxRuntime.jsx("sphereGeometry", { args: [debug, 16, 16] }), jsxRuntime.jsx("meshBasicMaterial", { color: "#00ff00", opacity: 1, transparent: true, depthWrite: false })] }), jsxRuntime.jsxs("mesh", { ref: targetRef, children: [jsxRuntime.jsx("sphereGeometry", { args: [debug / 2, 16, 16] }), jsxRuntime.jsx("meshBasicMaterial", { color: "#00ff00", opacity: 0.5, transparent: true, depthWrite: false })] })] }), scene)
+                : null, jsxRuntime.jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
+});
+
+exports.Autofocus = Autofocus;
 exports.Bloom = Bloom;
 exports.BrightnessContrast = BrightnessContrast;
 exports.ChromaticAberration = ChromaticAberration;

package/dist/index.d.ts

@@ -27,5 +27,6 @@ export * from './effects/TiltShift';
 export * from './effects/TiltShift2';
 export * from './effects/SSR';
 export * from './Selection';
+export * from './Autofocus';
 export * from './EffectComposer';
 export * from './util';

package/dist/index.js

@@ -1,11 +1,12 @@
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, MaskFunction, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute } from 'postprocessing';
-import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useMemo, createContext, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState } from 'react';
+import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, MaskFunction, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute, DepthPickingPass, CopyPass } from 'postprocessing';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef, useMemo, createContext, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState, useCallback } from 'react';
 import * as THREE from 'three';
 import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
-import { extend, useThree, useFrame, useInstanceHandle, useLoader } from '@react-three/fiber';
+import { extend, useThree, useFrame, useInstanceHandle, useLoader, createPortal } from '@react-three/fiber';
 import { isWebGL2Available } from 'three-stdlib';
 import { SSREffect } from 'screen-space-reflections';
+import { easing } from 'maath';
 
 const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
 let i = 0;
@@ -529,4 +530,77 @@ const SSR = forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true, ...pro
     return jsx("primitive", { ref: ref, object: effect, ...props });
 });
 
-export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, resolveRef, selectionContext, useVector2, wrapEffect };
+const Autofocus = forwardRef(({ target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0, ...props }, fref) => {
+    const dofRef = useRef(null);
+    const hitpointRef = useRef(null);
+    const targetRef = useRef(null);
+    const scene = useThree(({ scene }) => scene);
+    const pointer = useThree(({ pointer }) => pointer);
+    const { composer, camera } = useContext(EffectComposerContext);
+    // see: https://codesandbox.io/s/depthpickingpass-x130hg
+    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]);
+    const [hitpoint] = useState(new THREE.Vector3(0, 0, 0));
+    const [ndc] = useState(new THREE.Vector3(0, 0, 0));
+    const getHit = useCallback(async (x, y) => {
+        ndc.x = x;
+        ndc.y = y;
+        ndc.z = await depthPickingPass.readDepth(ndc);
+        ndc.z = ndc.z * 2.0 - 1.0;
+        const hit = 1 - ndc.z > 0.0000001; // it is missed if ndc.z is close to 1
+        return hit ? ndc.unproject(camera) : false;
+    }, [ndc, depthPickingPass, camera]);
+    const update = useCallback(async (delta, updateTarget = true) => {
+        var _a;
+        // Update hitpoint
+        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);
+        }
+        // Update target
+        if (updateTarget && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            if (smoothTime > 0 && delta > 0) {
+                easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta);
+            }
+            else {
+                dofRef.current.target.copy(hitpoint);
+            }
+        }
+    }, [target, hitpoint, followMouse, getHit, smoothTime, pointer]);
+    useFrame(async (_, delta) => {
+        var _a;
+        if (!manual) {
+            update(delta);
+        }
+        if (hitpointRef.current) {
+            hitpointRef.current.position.copy(hitpoint);
+        }
+        if (targetRef.current && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            targetRef.current.position.copy(dofRef.current.target);
+        }
+    });
+    // Ref API
+    useImperativeHandle(fref, () => ({
+        dofRef,
+        hitpoint,
+        update,
+    }), [hitpoint, update]);
+    return (jsxs(Fragment, { children: [debug
+                ? createPortal(jsxs(Fragment, { children: [jsxs("mesh", { ref: hitpointRef, children: [jsx("sphereGeometry", { args: [debug, 16, 16] }), jsx("meshBasicMaterial", { color: "#00ff00", opacity: 1, transparent: true, depthWrite: false })] }), jsxs("mesh", { ref: targetRef, children: [jsx("sphereGeometry", { args: [debug / 2, 16, 16] }), jsx("meshBasicMaterial", { color: "#00ff00", opacity: 0.5, transparent: true, depthWrite: false })] })] }), scene)
+                : null, jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
+});
+
+export { Autofocus, Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, 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.9.2",
+  "version": "2.10.0",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -45,6 +45,7 @@
     "release": "semantic-release"
   },
   "dependencies": {
+    "maath": "^0.5.3",
     "postprocessing": "^6.30.2",
     "screen-space-reflections": "2.5.0",
     "three-stdlib": "^2.21.10"