← DESCOBREIX
WebGL post-processing: bloom sense sobre-exposar
TÈCNICWEBGL · THREE.JSMarç 202510 min lectura

WebGL post-processing: bloom sense sobre-exposar

Configuració exacta d'UnrealBloomPass per a escenes de marca. El threshold que ningú et diu.

El problema del bloom genèric

El bloom per defecte en la majoria de tutorials fa que tota l'escena sembli un videojoc dels anys 2000. L'objectiu és que només el rim light neon brilli, no tot.

La configuració correcta

import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";

<EffectComposer>
  <Bloom
    intensity={0.4}
    luminanceThreshold={0.85}
    luminanceSmoothing={0.3}
    blendFunction={BlendFunction.ADD}
    radius={0.6}
  />
</EffectComposer>

Per què `luminanceThreshold: 0.85`

Amb threshold alt, només els elements que passen de luminance 0.85 (pràcticament blanc) activen el bloom. El neon verd #39FF14 té luminance 0.89 → bloom actiu. El text crema #F2F2F0 té luminance 0.93 → bloom lleu.

L'error més comú

Posar `intensity` alt i `threshold` baix. El resultat és un núvol lluminós que amaga els detalls. Millor intensity baix i threshold alt: bloom quirúrgic.

Materials que fan brillo

`emissiveIntensity > 0.5` en MeshPhongMaterial activa el bloom automàticament. És la manera més eficient.

← TORNAR AL BLOG@GARCIACLAVERO.STUDIO ↗

MÉS ARTICLES

TUTORIAL

Com crear un cursor 3D amb Three.js en 20 línies

LLEGIR →
CAS D'ESTUDI

De 0 a 1.240 reserves: Cal Masover Rural

LLEGIR →
PROCÉS

El prompt exacte per a renders de restaurant amb Flux

LLEGIR →