🥽 Declarative WebXR-compatible postprocessing effects for React Three Fiber. Stereo-aware visual effects that work seamlessly in VR/AR and standard 3D rendering.
npm install xr-postprocessing🥽 WebXR-compatible postprocessing effects for React Three Fiber. Stereo-aware visual effects that work in VR, AR, and standard 3D.
``bash`
npm install xr-postprocessingor
pnpm add xr-postprocessing
`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 (
<>
{/ add effects inside XR /}
>
)
}
`
`tsx`
unreal engine style bloom with more artistic control
`tsx`
edge detection for a cel-shaded or outlined look
`tsx`
`tsx`
`tsx`
- XREffectComposer - main composer componentuseEffectComposer
- - hook for custom effectsBloom
- - bloom effectUnrealBloom
- - unreal-style bloomSobel
- - edge detectionBlur
- - blur effectPixelate` - pixelation effect
-
- React 18+
- Three.js 0.160+
- @react-three/fiber 8+
- @react-three/xr (for WebXR)
MIT