From 3ca723a3950d9525f606deb08e254b01a5bbe598 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Tue, 2 May 2023 09:24:29 +0200 Subject: [PATCH] fixes review drcmda --- README.md | 31 +++++++------------------------ src/Autofocus.tsx | 30 +++++------------------------- 2 files changed, 12 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index ff34862..33db723 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,7 @@ [![Downloads](https://img.shields.io/npm/dt/@react-three/postprocessing.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing) [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ) -`react-postprocessing` is a -[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for -[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not -(yet) meant for complex orchestration of effects, but can save you -[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a -straight forward effects-chain. +`react-postprocessing` is a [postprocessing](https://github.com/pmndrs/postprocessing) wrapper for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not (yet) meant for complex orchestration of effects, but can save you [hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a straight forward effects-chain. ```bash npm install @react-three/postprocessing @@ -25,29 +20,17 @@ npm install @react-three/postprocessing #### Why postprocessing and not three/examples/jsm/postprocessing? -From -[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance) +From [https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance) -> This library provides an EffectPass which automatically organizes and merges -> any given combination of effects. This minimizes the amount of render -> operations and makes it possible to combine many effects without the -> performance penalties of traditional pass chaining. Additionally, every effect -> can choose its own blend function. +> This library provides an EffectPass which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own blend function. > -> All fullscreen render operations also use a single triangle that fills the -> screen. Compared to using a quad, this approach harmonizes with modern GPU -> rasterization patterns and eliminates unnecessary fragment calculations along -> the screen diagonal. This is especially beneficial for GPGPU passes and -> effects that use complex fragment shaders. +> All fullscreen render operations also use a single triangle that fills the screen. Compared to using a quad, this approach harmonizes with modern GPU rasterization patterns and eliminates unnecessary fragment calculations along the screen diagonal. This is especially beneficial for GPGPU passes and effects that use complex fragment shaders. -Postprocessing also supports srgb-encoding out of the box, as well as WebGL2 -MSAA (multi sample anti aliasing), which is react-postprocessing's default, you -get high performance crisp results w/o jagged edges. +Postprocessing also supports srgb-encoding out of the box, as well as WebGL2 MSAA (multi sample anti aliasing), which is react-postprocessing's default, you get high performance crisp results w/o jagged edges. #### What does it look like? -Here's an example combining a couple of effects -([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)). +Here's an example combining a couple of effects ([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)). Bubbles Demo @@ -55,7 +38,7 @@ Here's an example combining a couple of effects ```jsx import React from 'react' -import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing' +import { EffectComposer, DepthOfField, Bloom, Noise, Vignette } from '@react-three/postprocessing' import { Canvas } from '@react-three/fiber' function App() { diff --git a/src/Autofocus.tsx b/src/Autofocus.tsx index e541fe3..a74a38a 100644 --- a/src/Autofocus.tsx +++ b/src/Autofocus.tsx @@ -37,7 +37,8 @@ export const Autofocus = forwardRef( const hitpointRef = useRef(null) const targetRef = useRef(null) - const { size, gl, scene } = useThree() + const scene = useThree(({ scene }) => scene) + const pointer = useThree(({ pointer }) => pointer) const { composer, camera } = useContext(EffectComposerContext) // see: https://codesandbox.io/s/depthpickingpass-x130hg @@ -67,25 +68,6 @@ export const Autofocus = forwardRef( [ndc, depthPickingPass, camera] ) - const [pointer] = useState(new THREE.Vector2()) - useEffect(() => { - if (!followMouse) return - - async function onPointermove(e: PointerEvent) { - const clientX = e.clientX - size.left - const clientY = e.clientY - size.top - const x = (clientX / size.width) * 2.0 - 1.0 - const y = -(clientY / size.height) * 2.0 + 1.0 - - pointer.set(x, y) - } - gl.domElement.addEventListener('pointermove', onPointermove, { - passive: true, - }) - - return () => void gl.domElement.removeEventListener('pointermove', onPointermove) - }, [gl.domElement, hitpoint, size, followMouse, getHit, pointer]) - const update = useCallback( async (delta: number, updateTarget = true) => { // Update hitpoint @@ -110,11 +92,9 @@ export const Autofocus = forwardRef( ) useFrame(async (_, delta) => { - if (manual) return - update(delta) - }) - - useFrame(() => { + if (!manual) { + update(delta) + } if (hitpointRef.current) { hitpointRef.current.position.copy(hitpoint) }