inkreach-official-website/apps/website/.agents/skills/tresjs/references/effects.md

Post-Processing Effects

Visual effects applied after scene render. Two effect systems available.

pnpm add @tresjs/post-processing

Effect Composers

EffectComposer (Three.js native)

Uses Three.js built-in effects:

<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):

<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:

<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:

<Glitch />

Halftone

Halftone print effect:

<Halftone :radius="4" :scatter="0" />

Pixelation

Pixelated look:

<Pixelation :granularity="5" />

Output

Color space/tone mapping:

<Output />

SMAA

Anti-aliasing pass:

<SMAA />

Pmndrs Effects (EffectComposerPmndrs)

More effects with better performance through effect merging.

BloomPmndrs

Advanced bloom:

<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:

<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:

<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:

<ChromaticAberrationPmndrs :offset="[0.002, 0.002]" />

VignettePmndrs

Darkened edges:

<VignettePmndrs :darkness="0.5" :offset="0.3" />

NoisePmndrs

Film grain:

<NoisePmndrs :opacity="0.1" />

OutlinePmndrs

Object outlines:

<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:

<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

<Suspense>
  <EffectComposerPmndrs>
    <!-- effects -->
  </EffectComposerPmndrs>
</Suspense>