NgtpSelectiveBloom

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-selective-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: 'selective-bloom-demo relative block h-full' },
    imports: [NgtCanvas, PostprocessingWrapper, SceneGraph],
})
export default class SelectiveBloom {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-ambient-light #ambientLight [intensity]="0.3" />
        <ngt-point-light #pointLight [position]="[5, 5, 5]" [intensity]="1" />

        <!-- Non-glowing box (gray, no bloom) -->
        <ngt-mesh [position]="[-2, 0, 0]">
            <ngt-box-geometry *args="[1, 1, 1]" />
            <ngt-mesh-standard-material color="#4b5563" />
        </ngt-mesh>

        <!-- Glowing orb 1 - hover to select -->
        <ngt-mesh
            #orb1
            [select]="selected() === 'orb1'"
            [position]="[0, 0, 0]"
            (pointerover)="selected.set('orb1')"
            (pointerout)="selected.set(null)"
        >
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#ff00ff" [emissive]="'#ff00ff'" [emissiveIntensity]="0.5" />
        </ngt-mesh>

        <!-- Glowing orb 2 - hover to select -->
        <ngt-mesh
            #orb2
            [select]="selected() === 'orb2'"
            [position]="[2, 0, 0]"
            (pointerover)="selected.set('orb2')"
            (pointerout)="selected.set(null)"
        >
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#00ffff" [emissive]="'#00ffff'" [emissiveIntensity]="0.5" />
        </ngt-mesh>

        <ngtp-effect-composer>
            <ngtp-selective-bloom
                [lights]="[ambientLight, pointLight]"
                [options]="{
                    intensity: 2,
                    luminanceThreshold: 0.2,
                    luminanceSmoothing: 0.025,
                }"
            />
        </ngtp-effect-composer>
    `,
    hostDirectives: [NgtSelectionApi],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpSelectiveBloom, NgtSelection],
})
export class SceneGraph {
    ambientLight = viewChild.required<ElementRef<THREE.AmbientLight>>('ambientLight');
    pointLight = viewChild.required<ElementRef<THREE.PointLight>>('pointLight');
    orb1Ref = viewChild.required<ElementRef<THREE.Mesh>>('orb1');
    orb2Ref = viewChild.required<ElementRef<THREE.Mesh>>('orb2');

    selected = signal<string | null>(null);

    constructor() {
        extend(THREE);

        beforeRender(({ clock }) => {
            const t = clock.getElapsedTime();
            const orb1 = this.orb1Ref().nativeElement;
            const orb2 = this.orb2Ref().nativeElement;

            orb1.position.y = Math.sin(t * 2) * 0.3;
            orb2.position.y = Math.sin(t * 2 + Math.PI) * 0.3;
        });
    }
}

The selective bloom effect applies bloom only to specific objects in your scene, giving you precise control over which elements glow.

Usage

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

@Component({
  template: `
    <ngt-point-light #light [position]="[0, 5, 0]" />

    <ngt-mesh #glowingMesh>
      <ngt-sphere-geometry />
      <ngt-mesh-standard-material color="hotpink" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <ngtp-selective-bloom
        [lights]="[light]"
        [options]="{
          selection: [glowingMesh],
          intensity: 2
        }"
      />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpSelectiveBloom],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Inputs

Input	Type	Description
lights	Object3D[] | ElementRef[]	Light sources (required)

Options

Property	Type	Default	Description
selection	Object3D | Object3D[] | ElementRef[]	[]	Objects to apply bloom to
selectionLayer	number	10	Layer for selected objects
inverted	boolean	false	Invert selection (bloom on non-selected)
ignoreBackground	boolean	false	Ignore background in bloom
intensity	number	1	Bloom intensity
luminanceThreshold	number	0.9	Luminance threshold
luminanceSmoothing	number	0.025	Luminance smoothing

Example: Glowing Orbs

@Component({
  template: `
    <ngt-ambient-light [intensity]="0.5" />
    <ngt-point-light #light [position]="[10, 10, 10]" />

    <!-- Non-glowing objects -->
    <ngt-mesh [position]="[-2, 0, 0]">
      <ngt-box-geometry />
      <ngt-mesh-standard-material color="gray" />
    </ngt-mesh>

    <!-- Glowing orb -->
    <ngt-mesh #orb1 [position]="[0, 0, 0]">
      <ngt-sphere-geometry *args="[0.5, 32, 32]" />
      <ngt-mesh-standard-material color="#ff00ff" [emissive]="'#ff00ff'" [emissiveIntensity]="0.5" />
    </ngt-mesh>

    <!-- Another glowing orb -->
    <ngt-mesh #orb2 [position]="[2, 0, 0]">
      <ngt-sphere-geometry *args="[0.5, 32, 32]" />
      <ngt-mesh-standard-material color="#00ffff" [emissive]="'#00ffff'" [emissiveIntensity]="0.5" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <ngtp-selective-bloom
        [lights]="[light]"
        [options]="{
          selection: [orb1, orb2],
          intensity: 1.5,
          luminanceThreshold: 0.5
        }"
      />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpSelectiveBloom, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Tips

• Always provide lights input - it’s required for proper rendering
• Use emissive materials on selected objects for best results
• The selectionLayer should not conflict with other layers in your scene
• Set inverted: true to bloom everything except selected objects
• Combine with regular bloom for layered glow effects