xr-postprocessing

🥽 WebXR-compatible postprocessing effects for React Three Fiber. Stereo-aware visual effects that work in VR, AR, and standard 3D.

Installation

``bash
npm install xr-postprocessing


or


pnpm add xr-postprocessing
`

Quick Start

`tsx
import { Canvas } from '@react-three/fiber'
import { createXRStore, XR } from '@react-three/xr'
import { XREffectComposer, Bloom } from 'xr-postprocessing'

const store = createXRStore()

function App() {
return (
<>
store.enterVR()}>Enter VR
store.enterAR()}>Enter AR



{/ your scene /}






{/ add effects inside XR /}






)
}
`

Available Effects

$3

`tsx

`

$3

unreal engine style bloom with more artistic control

`tsx

`

$3

edge detection for a cel-shaded or outlined look

`tsx

`

$3

`tsx

`

$3

`tsx

`

Exports

- XREffectComposer - main composer component
- useEffectComposer - hook for custom effects
- Bloom - bloom effect
- UnrealBloom - unreal-style bloom
- Sobel - edge detection
- Blur - blur effect
- Pixelate` - pixelation effect

Requirements

- React 18+
- Three.js 0.160+
- @react-three/fiber 8+
- @react-three/xr (for WebXR)

License

MIT