fix: convert apps/website from submodule to regular directory
This commit is contained in:
yeuimu
@@ -0,0 +1,274 @@
|
||||
# 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>
|
||||
```
|
||||
Reference in New Issue
Block a user