@pixi/3d
    Preparing search index...

    Class BloomEffect

    Bright parts of the frame glow outward

    The effect keeps what's brighter than threshold, blurs it through levels textures, each half the size of the last, and adds the result back onto the frame. That costs 2 × levels passes, all but the last at resolution or smaller. threshold, intensity and radius can change every frame; levels and resolution are fixed, so replace the effect to change them.

    By default it runs before the tone curve, where emissive surfaces, lights and specular glints are still brighter than 1, so they glow in their own colour. Lower threshold to let bright but ordinary surfaces glow too, for a hazier look.

    view.passes = [new BloomEffect({ intensity: 0.6 })];

    Hierarchy (View Summary)

    Index
    constructor
    enabled inputMips levels requiredOutputs? resolution stage defaultOptions
    intensity radius threshold
    build destroy
    enabled: boolean

    Whether this pass runs

    Flipping it rebuilds the view's render graph on the next render, which suits a settings toggle but not a change every frame; animate an effect's own properties instead. It can also recompile the view's materials; View3D#passes says when.

    const wireframe = new MeshPass({ name: 'wireframe' });
    view.passes = [wireframe];
    wireframe.enabled = false;
    inputMips: boolean = false

    Whether the effect's input has mips, for an effect that reads coarse levels with sampleColorLod, such as a blur

    Costs a mip generation every frame and about a third more memory for the input, so leave it false unless the effect samples levels above 0.

    levels: number = 0

    Number of blur levels, fixed at construction

    requiredOutputs?: readonly SceneOutput[]

    Extra outputs the view's scene draw writes beside its colour while this pass is enabled

    Each costs the scene draw a texture and the shader work to fill it, and any output makes the view draw its scene into a texture first, as a post effect does. Reach an output's texture with RenderGraph#getSceneOutput, to read it or draw into it.

    const objectIdOutput: SceneOutput = { name: 'objectId', format: 'r32uint' };

    class MyPickingPass extends Pass3D {
      public readonly stage = 'afterTransparent';
      public readonly requiredOutputs = [objectIdOutput];
      public build(): void {}
    }
    resolution: number = 0

    Texels per logical pixel for the largest blur level, fixed at construction

    stage: EffectStage

    The stage the effect runs at, set by the stage option

    defaultOptions: BloomEffectOptions = ...

    Defaults for every new BloomEffect; an option passed as undefined keeps its default

    BloomEffect.defaultOptions.resolution = 0.25;
    • get intensity(): number

      Strength of the glow added back onto the frame

      0 hides the glow, but every pass still runs; set enabled to false to skip them.

      Returns number

      bloom.intensity = 1 + Math.sin(time) * 0.5;
    • set intensity(value: number): void

      Sets the glow strength

      Parameters

      • value: number

        Multiplier on the glow.

      Returns void

    • get radius(): number

      How much each coarser level blends into the finer one, 0 (tight) to 1 (wide)

      Returns number

      bloom.radius = 0.85;
    • set radius(value: number): void

      Sets how far the glow spreads

      Parameters

      • value: number

        0 (tight) to 1 (wide).

      Returns void

    • get threshold(): number

      Brightness above which a pixel blooms; BloomEffectOptions#threshold has the details

      Returns number

      bloom.threshold = 0.4;
    • set threshold(value: number): void

      Sets the bloom threshold

      Parameters

      • value: number

        Brightness of a pixel's brightest channel.

      Returns void

    • Advanced

      Adds the effect's passes for this slot in the chain

      Parameters

      • graph: RenderGraph

        Render graph being built.

      • io: EffectIO

        Input/output handles for this slot in the chain.

      Returns void

      const glow = graph.createColor({ label: 'glow' });
      bloom.build(graph, { ...io, output: glow });

    • Releases GPU resources the pass made outside the graph; the base class has none

      The view never calls it, not on replacing view.passes nor on its own destroy, since a pass can be shared. Call it yourself once the pass is retired. Override it only for resources of your own: the render passes added in build go with the view's graph, and a plain UniformGroup needs no release.

      Returns void

      view.passes = [];
      wireframe.destroy();

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods