Skip to content

Commit

Permalink
fixes review drcmda
Browse files Browse the repository at this point in the history
  • Loading branch information
abernier committed May 2, 2023
1 parent d2b6a5b commit 3ca723a
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 49 deletions.
31 changes: 7 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,37 +20,25 @@ 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?)).

<a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
<img src="bubbles.jpg" alt="Bubbles Demo" />
</a>

```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() {
Expand Down
30 changes: 5 additions & 25 deletions src/Autofocus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
const hitpointRef = useRef<THREE.Mesh>(null)
const targetRef = useRef<THREE.Mesh>(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
Expand Down Expand Up @@ -67,25 +68,6 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
[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
Expand All @@ -110,11 +92,9 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
)

useFrame(async (_, delta) => {
if (manual) return
update(delta)
})

useFrame(() => {
if (!manual) {
update(delta)
}
if (hitpointRef.current) {
hitpointRef.current.position.copy(hitpoint)
}
Expand Down

0 comments on commit 3ca723a

Please sign in to comment.