275 lines
6.5 KiB
Markdown
275 lines
6.5 KiB
Markdown
# Post-Processing Effects
|
|
|
|
Visual effects applied after scene render. Two effect systems available.
|
|
|
|
```bash
|
|
pnpm add @tresjs/post-processing
|
|
```
|
|
|
|
## Effect Composers
|
|
|
|
### EffectComposer (Three.js native)
|
|
|
|
Uses Three.js built-in effects:
|
|
|
|
```vue
|
|
<script setup>
|
|
import { EffectComposer, UnrealBloom, Glitch } from '@tresjs/post-processing'
|
|
</script>
|
|
|
|
<template>
|
|
<TresCanvas>
|
|
<TresPerspectiveCamera :position="[5, 5, 5]" />
|
|
<!-- scene content -->
|
|
|
|
<Suspense>
|
|
<EffectComposer>
|
|
<UnrealBloom :strength="1.5" :radius="0.5" :threshold="0.8" />
|
|
<Glitch />
|
|
</EffectComposer>
|
|
</Suspense>
|
|
</TresCanvas>
|
|
</template>
|
|
```
|
|
|
|
### EffectComposerPmndrs (pmndrs postprocessing)
|
|
|
|
Uses pmndrs/postprocessing library (more effects, better performance):
|
|
|
|
```vue
|
|
<script setup>
|
|
import { EffectComposerPmndrs, BloomPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
|
|
</script>
|
|
|
|
<template>
|
|
<Suspense>
|
|
<EffectComposerPmndrs>
|
|
<BloomPmndrs :intensity="4" :luminance-threshold="0.1" mipmap-blur />
|
|
<GlitchPmndrs />
|
|
</EffectComposerPmndrs>
|
|
</Suspense>
|
|
</template>
|
|
```
|
|
|
|
**Rule:** Pmndrs effects end with `Pmndrs` suffix and require `EffectComposerPmndrs`.
|
|
|
|
## Three.js Effects (EffectComposer)
|
|
|
|
### UnrealBloom
|
|
|
|
Glow around bright areas:
|
|
|
|
```vue
|
|
<UnrealBloom :strength="1.5" :radius="0.5" :threshold="0.8" />
|
|
```
|
|
|
|
| Prop | Description | Default |
|
|
| ----------- | ---------------- | ------- |
|
|
| `strength` | Bloom intensity | `1` |
|
|
| `radius` | Bloom spread | `0` |
|
|
| `threshold` | Luminance cutoff | `0` |
|
|
|
|
### Glitch
|
|
|
|
Digital glitch distortion:
|
|
|
|
```vue
|
|
<Glitch />
|
|
```
|
|
|
|
### Halftone
|
|
|
|
Halftone print effect:
|
|
|
|
```vue
|
|
<Halftone :radius="4" :scatter="0" />
|
|
```
|
|
|
|
### Pixelation
|
|
|
|
Pixelated look:
|
|
|
|
```vue
|
|
<Pixelation :granularity="5" />
|
|
```
|
|
|
|
### Output
|
|
|
|
Color space/tone mapping:
|
|
|
|
```vue
|
|
<Output />
|
|
```
|
|
|
|
### SMAA
|
|
|
|
Anti-aliasing pass:
|
|
|
|
```vue
|
|
<SMAA />
|
|
```
|
|
|
|
## Pmndrs Effects (EffectComposerPmndrs)
|
|
|
|
More effects with better performance through effect merging.
|
|
|
|
### BloomPmndrs
|
|
|
|
Advanced bloom:
|
|
|
|
```vue
|
|
<BloomPmndrs
|
|
:intensity="4"
|
|
:luminance-threshold="0.1"
|
|
:luminance-smoothing="0.3"
|
|
:radius="0.85"
|
|
mipmap-blur
|
|
/>
|
|
```
|
|
|
|
| Prop | Description | Default |
|
|
| -------------------- | -------------------------------- | ------- |
|
|
| `intensity` | Effect strength | `1` |
|
|
| `luminanceThreshold` | Brightness cutoff (0-1) | `0.9` |
|
|
| `luminanceSmoothing` | Threshold smoothness | `0.025` |
|
|
| `mipmapBlur` | Enable mipmap blur (like Unreal) | `false` |
|
|
| `radius` | Blur radius | - |
|
|
|
|
### DepthOfFieldPmndrs
|
|
|
|
Camera focus blur:
|
|
|
|
```vue
|
|
<DepthOfFieldPmndrs
|
|
:focus-distance="0.5"
|
|
:focus-range="0.1"
|
|
:bokeh-scale="2"
|
|
/>
|
|
```
|
|
|
|
| Prop | Description | Default |
|
|
| -------------------- | ------------------------------- | ------- |
|
|
| `focusDistance` | Normalized focus distance (0-1) | - |
|
|
| `focusRange` | Focus range (0-1) | `0.1` |
|
|
| `bokehScale` | Bokeh blur scale | `1` |
|
|
| `worldFocusDistance` | Focus in world units | - |
|
|
|
|
### GlitchPmndrs
|
|
|
|
Digital glitch:
|
|
|
|
```vue
|
|
<GlitchPmndrs
|
|
:delay="[1.5, 3.5]"
|
|
:duration="[0.6, 1.0]"
|
|
:strength="[0.3, 1.0]"
|
|
/>
|
|
```
|
|
|
|
| Prop | Description | Default |
|
|
| ---------- | -------------------------------------------- | ------------ |
|
|
| `delay` | [min, max] delay between glitches (s) | `[1.5, 3.5]` |
|
|
| `duration` | [min, max] glitch duration (s) | `[0.6, 1.0]` |
|
|
| `strength` | [weak, strong] glitch intensity | `[0.3, 1.0]` |
|
|
| `mode` | `SPORADIC`, `CONSTANT_MILD`, `CONSTANT_WILD` | `SPORADIC` |
|
|
| `active` | Enable/disable | - |
|
|
|
|
### ChromaticAberrationPmndrs
|
|
|
|
Color fringing:
|
|
|
|
```vue
|
|
<ChromaticAberrationPmndrs :offset="[0.002, 0.002]" />
|
|
```
|
|
|
|
### VignettePmndrs
|
|
|
|
Darkened edges:
|
|
|
|
```vue
|
|
<VignettePmndrs :darkness="0.5" :offset="0.3" />
|
|
```
|
|
|
|
### NoisePmndrs
|
|
|
|
Film grain:
|
|
|
|
```vue
|
|
<NoisePmndrs :opacity="0.1" />
|
|
```
|
|
|
|
### OutlinePmndrs
|
|
|
|
Object outlines:
|
|
|
|
```vue
|
|
<OutlinePmndrs
|
|
:selected-objects="[meshRef]"
|
|
:edge-strength="3"
|
|
:pulse-speed="0"
|
|
visible-edge-color="#ffffff"
|
|
hidden-edge-color="#22090a"
|
|
/>
|
|
```
|
|
|
|
### Other Pmndrs Effects
|
|
|
|
| Effect | Description |
|
|
| -------------------------- | --------------------------- |
|
|
| `AsciiPmndrs` | ASCII art rendering |
|
|
| `BarrelBlurPmndrs` | Barrel distortion with blur |
|
|
| `BrightnessContrastPmndrs` | Adjust brightness/contrast |
|
|
| `ColorAveragePmndrs` | Grayscale conversion |
|
|
| `ColorDepthPmndrs` | Reduce color depth |
|
|
| `DotScreenPmndrs` | Dot matrix effect |
|
|
| `FishEyePmndrs` | Fisheye lens distortion |
|
|
| `FXAAPmndrs` | Fast anti-aliasing |
|
|
| `GodRaysPmndrs` | Volumetric light rays |
|
|
| `GridPmndrs` | Grid overlay |
|
|
| `HueSaturationPmndrs` | Color adjustment |
|
|
| `KuwaharaPmndrs` | Painterly effect |
|
|
| `LensDistortionPmndrs` | Lens distortion |
|
|
| `LinocutPmndrs` | Linocut print effect |
|
|
| `PixelationPmndrs` | Pixelation |
|
|
| `ScanlinePmndrs` | CRT scanlines |
|
|
| `SepiaPmndrs` | Sepia tone |
|
|
| `ShockWavePmndrs` | Shockwave ripple |
|
|
| `SMAAPmndrs` | Enhanced anti-aliasing |
|
|
| `TexturePmndrs` | Texture overlay |
|
|
| `TiltShiftPmndrs` | Miniature effect |
|
|
| `ToneMappingPmndrs` | Tone mapping |
|
|
|
|
## Effect Stacking
|
|
|
|
Effects apply in order. Combine for complex looks:
|
|
|
|
```vue
|
|
<EffectComposerPmndrs>
|
|
<!-- Base effects first -->
|
|
<SMAAPmndrs />
|
|
|
|
<!-- Main effects -->
|
|
<BloomPmndrs :intensity="2" />
|
|
<DepthOfFieldPmndrs :focus-distance="0.5" />
|
|
|
|
<!-- Color grading -->
|
|
<VignettePmndrs :darkness="0.3" />
|
|
<NoisePmndrs :opacity="0.05" />
|
|
</EffectComposerPmndrs>
|
|
```
|
|
|
|
## Performance
|
|
|
|
1. **Use Pmndrs** - effects are merged into fewer passes
|
|
2. **Limit effects** - each adds GPU cost
|
|
3. **Consider mobile** - reduce or disable on low-end devices
|
|
4. **Wrap in Suspense** - effects load asynchronously
|
|
|
|
```vue
|
|
<Suspense>
|
|
<EffectComposerPmndrs>
|
|
<!-- effects -->
|
|
</EffectComposerPmndrs>
|
|
</Suspense>
|
|
```
|