@relu-interactives/spatial-ecs
@relu-interactives/spatial-ecs / components / PostprocessingState
Type Alias: PostprocessingState ​
ts
type PostprocessingState = {
postEnabled: boolean;
dof: {
enabled: boolean;
focusDistance: number;
focalLength: number;
bokehScale: number;
};
bloom: {
enabled: boolean;
intensity: number;
threshold: number;
radius: number;
};
vignette: {
enabled: boolean;
offset: number;
darkness: number;
};
chromAberration: {
enabled: boolean;
offsetX: number;
offsetY: number;
};
noise: {
enabled: boolean;
opacity: number;
};
pixelation: {
enabled: boolean;
granularity: number;
};
toneMapping: {
enabled: boolean;
exposure: number;
};
hueSaturation: {
enabled: boolean;
hue: number;
saturation: number;
};
sepia: {
enabled: boolean;
intensity: number;
};
smaa: {
enabled: boolean;
};
ssao: {
enabled: boolean;
intensity: number;
radius: number;
};
dotScreen: {
enabled: boolean;
dotScreenScale: number;
dotScreenAngle: number;
angle?: number;
scale?: number;
blendFunction?: number;
opacity?: number;
};
glitch: {
enabled: boolean;
blendFunction?: number;
chromaticAberrationOffset?: | {
x: number;
y: number;
}
| [number, number];
delay?: [number, number];
duration?: [number, number];
strength?: | number
| {
x: number;
y: number;
};
dtSize?: number;
columns?: number;
ratio?: number;
mode?: string;
active?: boolean;
};
};Defined in: components/Postprocessing.ts:4
Aggregated post-processing effect chain authored on the scene environment. Each sub-effect has its own enabled flag plus per-effect parameters.
Properties ​
| Property | Type | Description | Defined in |
|---|---|---|---|
postEnabled | boolean | Master toggle. When false no post-processing is applied even if individual effects are enabled. | components/Postprocessing.ts:6 |
dof | { enabled: boolean; focusDistance: number; focalLength: number; bokehScale: number; } | Depth-of-field (bokeh) effect. | components/Postprocessing.ts:8 |
dof.enabled | boolean | Enable the effect. | components/Postprocessing.ts:10 |
dof.focusDistance | number | Distance to the focal plane in world units. | components/Postprocessing.ts:12 |
dof.focalLength | number | Lens focal length controlling depth-of-field strength. | components/Postprocessing.ts:14 |
dof.bokehScale | number | Bokeh blur kernel scale. | components/Postprocessing.ts:16 |
bloom | { enabled: boolean; intensity: number; threshold: number; radius: number; } | Bloom (HDR glow) effect. | components/Postprocessing.ts:19 |
bloom.enabled | boolean | Enable the effect. | components/Postprocessing.ts:21 |
bloom.intensity | number | Strength of the bloom contribution. | components/Postprocessing.ts:23 |
bloom.threshold | number | Luminance threshold above which pixels bloom. | components/Postprocessing.ts:25 |
bloom.radius | number | Blur radius applied to the bloom buffer. | components/Postprocessing.ts:27 |
vignette | { enabled: boolean; offset: number; darkness: number; } | Vignette (corner darkening) effect. | components/Postprocessing.ts:30 |
vignette.enabled | boolean | Enable the effect. | components/Postprocessing.ts:32 |
vignette.offset | number | Distance from screen center where the vignette begins. | components/Postprocessing.ts:34 |
vignette.darkness | number | Maximum darkness applied at screen edges. | components/Postprocessing.ts:36 |
chromAberration | { enabled: boolean; offsetX: number; offsetY: number; } | Chromatic aberration (RGB channel offset) effect. | components/Postprocessing.ts:39 |
chromAberration.enabled | boolean | Enable the effect. | components/Postprocessing.ts:41 |
chromAberration.offsetX | number | Horizontal channel offset. | components/Postprocessing.ts:43 |
chromAberration.offsetY | number | Vertical channel offset. | components/Postprocessing.ts:45 |
noise | { enabled: boolean; opacity: number; } | Film-noise overlay. | components/Postprocessing.ts:48 |
noise.enabled | boolean | Enable the effect. | components/Postprocessing.ts:50 |
noise.opacity | number | Opacity of the noise layer in [0, 1]. | components/Postprocessing.ts:52 |
pixelation | { enabled: boolean; granularity: number; } | Pixelation (mosaic) effect. | components/Postprocessing.ts:55 |
pixelation.enabled | boolean | Enable the effect. | components/Postprocessing.ts:57 |
pixelation.granularity | number | Pixel block size in screen pixels. | components/Postprocessing.ts:59 |
toneMapping | { enabled: boolean; exposure: number; } | Tone-mapping exposure control. | components/Postprocessing.ts:62 |
toneMapping.enabled | boolean | Enable the effect. | components/Postprocessing.ts:64 |
toneMapping.exposure | number | Exposure multiplier applied before tone-mapping. | components/Postprocessing.ts:66 |
hueSaturation | { enabled: boolean; hue: number; saturation: number; } | Hue/saturation color grading. | components/Postprocessing.ts:69 |
hueSaturation.enabled | boolean | Enable the effect. | components/Postprocessing.ts:71 |
hueSaturation.hue | number | Hue rotation in radians. | components/Postprocessing.ts:73 |
hueSaturation.saturation | number | Saturation offset (0 = unchanged, >0 = more saturated). | components/Postprocessing.ts:75 |
sepia | { enabled: boolean; intensity: number; } | Sepia color grade. | components/Postprocessing.ts:78 |
sepia.enabled | boolean | Enable the effect. | components/Postprocessing.ts:80 |
sepia.intensity | number | Blend strength between original and sepia in [0, 1]. | components/Postprocessing.ts:82 |
smaa | { enabled: boolean; } | SMAA antialiasing pass. | components/Postprocessing.ts:85 |
smaa.enabled | boolean | Enable the effect. | components/Postprocessing.ts:87 |
ssao | { enabled: boolean; intensity: number; radius: number; } | Screen-space ambient occlusion. | components/Postprocessing.ts:90 |
ssao.enabled | boolean | Enable the effect. | components/Postprocessing.ts:92 |
ssao.intensity | number | Strength of the AO contribution. | components/Postprocessing.ts:94 |
ssao.radius | number | Sampling radius in world units. | components/Postprocessing.ts:96 |
dotScreen | { enabled: boolean; dotScreenScale: number; dotScreenAngle: number; angle?: number; scale?: number; blendFunction?: number; opacity?: number; } | Dot-screen (halftone) effect. | components/Postprocessing.ts:99 |
dotScreen.enabled | boolean | Enable the effect. | components/Postprocessing.ts:101 |
dotScreen.dotScreenScale | number | Pattern scale (legacy field; use scale where available). | components/Postprocessing.ts:103 |
dotScreen.dotScreenAngle | number | Pattern rotation in radians (legacy field; use angle where available). | components/Postprocessing.ts:105 |
dotScreen.angle? | number | Pattern rotation in radians. | components/Postprocessing.ts:107 |
dotScreen.scale? | number | Pattern scale. | components/Postprocessing.ts:109 |
dotScreen.blendFunction? | number | Three.js blend function override. | components/Postprocessing.ts:111 |
dotScreen.opacity? | number | Effect opacity in [0, 1]. | components/Postprocessing.ts:113 |
glitch | { enabled: boolean; blendFunction?: number; chromaticAberrationOffset?: | { x: number; y: number; } | [number, number]; delay?: [number, number]; duration?: [number, number]; strength?: | number | { x: number; y: number; }; dtSize?: number; columns?: number; ratio?: number; mode?: string; active?: boolean; } | Glitch effect (digital corruption simulation). | components/Postprocessing.ts:116 |
glitch.enabled | boolean | Enable the effect. | components/Postprocessing.ts:118 |
glitch.blendFunction? | number | Three.js blend function override. | components/Postprocessing.ts:120 |
glitch.chromaticAberrationOffset? | | { x: number; y: number; } | [number, number] | RGB channel offset applied during a glitch burst. | components/Postprocessing.ts:122 |
glitch.delay? | [number, number] | [min, max] delay (seconds) between glitch bursts. | components/Postprocessing.ts:124 |
glitch.duration? | [number, number] | [min, max] duration (seconds) of each glitch burst. | components/Postprocessing.ts:126 |
glitch.strength? | | number | { x: number; y: number; } | Glitch displacement strength (scalar or per-axis). | components/Postprocessing.ts:128 |
glitch.dtSize? | number | Size of the displacement texture sampled by the glitch shader. | components/Postprocessing.ts:130 |
glitch.columns? | number | Fraction of columns affected during a glitch burst. | components/Postprocessing.ts:132 |
glitch.ratio? | number | Ratio between weak and strong glitch bursts. | components/Postprocessing.ts:134 |
glitch.mode? | string | Glitch mode label (matches the postprocessing library's mode enum). | components/Postprocessing.ts:136 |
glitch.active? | boolean | Force the glitch to remain active. | components/Postprocessing.ts:138 |