NgtpBloom

Preview

canvas.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PostprocessingWrapper } from '@postprocessing/wrapper.ts';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
    selector: 'app-bloom',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 5], fov: 50 }">
            <app-postprocessing-wrapper *canvasContent [lights]="false" background="#0a0a0a">
                <app-scene-graph />
            </app-postprocessing-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'bloom-demo relative block h-full' },
    imports: [NgtCanvas, PostprocessingWrapper, SceneGraph],
})
export default class Bloom {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
import { beforeRender, NgtArgs } from 'angular-three';
import { NgtpBloom, NgtpEffectComposer } from 'angular-three-postprocessing';
import * as THREE from 'three';

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Glowing orbs -->
        <ngt-mesh #mesh1 [position]="[-1.5, 0, 0]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#ff0066" [emissive]="'#ff0066'" [emissiveIntensity]="2" />
        </ngt-mesh>

        <ngt-mesh #mesh2 [position]="[0, 0, 0]">
            <ngt-sphere-geometry *args="[0.6, 32, 32]" />
            <ngt-mesh-standard-material color="#00ffff" [emissive]="'#00ffff'" [emissiveIntensity]="2" />
        </ngt-mesh>

        <ngt-mesh #mesh3 [position]="[1.5, 0, 0]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#ffff00" [emissive]="'#ffff00'" [emissiveIntensity]="2" />
        </ngt-mesh>

        <ngt-ambient-light [intensity]="0.1" />

        <ngtp-effect-composer>
            <ngtp-bloom
                [options]="{
                    luminanceThreshold: 0.2,
                    luminanceSmoothing: 0.9,
                    intensity: 1.5,
                    mipmapBlur: true,
                }"
            />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpBloom],
})
export class SceneGraph {
    private mesh1Ref = viewChild.required<ElementRef<THREE.Mesh>>('mesh1');
    private mesh2Ref = viewChild.required<ElementRef<THREE.Mesh>>('mesh2');
    private mesh3Ref = viewChild.required<ElementRef<THREE.Mesh>>('mesh3');

    constructor() {
        beforeRender(({ clock }) => {
            const t = clock.getElapsedTime();
            const mesh1 = this.mesh1Ref().nativeElement;
            const mesh2 = this.mesh2Ref().nativeElement;
            const mesh3 = this.mesh3Ref().nativeElement;

            mesh1.position.y = Math.sin(t * 2) * 0.5;
            mesh2.position.y = Math.sin(t * 2 + 2) * 0.5;
            mesh3.position.y = Math.sin(t * 2 + 4) * 0.5;
        });
    }
}

The bloom effect creates a glow around bright areas of the scene, simulating how bright lights appear to bleed into surrounding areas.

Usage

import { NgtpEffectComposer, NgtpBloom } from 'angular-three-postprocessing';

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-bloom [options]="{
        luminanceThreshold: 0.9,
        luminanceSmoothing: 0.025,
        intensity: 0.5
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpBloom],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
intensity	number	1	Bloom intensity
luminanceThreshold	number	0.9	Luminance threshold for bloom
luminanceSmoothing	number	0.025	Smoothness of luminance threshold
mipmapBlur	boolean	false	Use mipmap blur for better quality
radius	number	0.85	Blur radius
levels	number	undefined	Number of blur levels

Example: Emissive Materials

Bloom works great with emissive materials:

<ngt-mesh>
  <ngt-sphere-geometry />
  <ngt-mesh-standard-material
    color="#ff0000"
    [emissive]="'#ff0000'"
    [emissiveIntensity]="2"
  />
</ngt-mesh>

<ngtp-effect-composer>
  <ngtp-bloom [options]="{ luminanceThreshold: 0.5, intensity: 1.5 }" />
</ngtp-effect-composer>