NgtpLensFlare

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-lens-flare',
    template: `
        <ngt-canvas [camera]="{ position: [0, 2, 10], fov: 50 }">
            <app-postprocessing-wrapper *canvasContent [lights]="false" background="#0a0a1a">
                <app-scene-graph />
            </app-postprocessing-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'lens-flare-demo relative block h-full' },
    imports: [NgtCanvas, PostprocessingWrapper, SceneGraph],
})
export default class LensFlare {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtpBloom, NgtpEffectComposer, NgtpLensFlare } from 'angular-three-postprocessing';

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Sun/light source -->
        <ngt-mesh [position]="[8, 6, -15]">
            <ngt-sphere-geometry *args="[1.5, 32, 32]" />
            <ngt-mesh-basic-material color="#ffffcc" />
        </ngt-mesh>

        <!-- Scene objects that can occlude the sun -->
        <ngt-mesh [position]="[-2, 0, 0]">
            <ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
            <ngt-mesh-standard-material color="#374151" [metalness]="0.5" [roughness]="0.5" />
        </ngt-mesh>

        <ngt-mesh [position]="[1, -0.5, 2]">
            <ngt-cylinder-geometry *args="[0.5, 0.5, 2, 32]" />
            <ngt-mesh-standard-material color="#4b5563" [metalness]="0.5" [roughness]="0.5" />
        </ngt-mesh>

        <ngt-mesh [position]="[3, 0.5, -2]">
            <ngt-torus-geometry *args="[0.6, 0.25, 16, 32]" />
            <ngt-mesh-standard-material color="#6b7280" [metalness]="0.5" [roughness]="0.5" />
        </ngt-mesh>

        <!-- Ground plane -->
        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" [position]="[0, -2, 0]">
            <ngt-plane-geometry *args="[30, 30]" />
            <ngt-mesh-standard-material color="#1f2937" />
        </ngt-mesh>

        <ngt-ambient-light [intensity]="0.3" />
        <ngt-directional-light [position]="[8, 6, -15]" [intensity]="1.5" />

        <ngtp-effect-composer>
            <ngtp-lens-flare
                [options]="{
                    position: [8, 6, -15],
                    glareSize: 0.5,
                    starPoints: 6,
                    flareSize: 0.01,
                    flareSpeed: 0.3,
                    animated: true,
                    anamorphic: true,
                    secondaryGhosts: true,
                    starBurst: true,
                    haloScale: 0.6,
                    opacity: 0.9,
                }"
            />
            <ngtp-bloom [options]="{ intensity: 0.3, luminanceThreshold: 0.8 }" />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpLensFlare, NgtpBloom],
})
export class SceneGraph {
    protected readonly Math = Math;
}

The lens flare effect simulates camera lens artifacts including glare, ghosts, and anamorphic streaks. It automatically fades when the light source is occluded by scene objects.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-lens-flare [options]="{
        position: [5, 5, -10],
        glareSize: 0.5
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpLensFlare],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
position	NgtVector3	[0, 0, 0]	Light source position
followMouse	boolean	false	Follow mouse cursor position
smoothTime	number	0.07	Smoothing time for mouse following
glareSize	number	0.35	Size of the main glare
starPoints	number	6	Number of star burst points
flareSize	number	0.005	Size of secondary flares
flareSpeed	number	0.4	Animation speed of flares
flareShape	number	0.1	Shape factor of flares
animated	boolean	true	Enable flare animation
anamorphic	boolean	false	Enable anamorphic streak effect
colorGain	Color	undefined	Color tint for the flare
lensDirtTexture	Texture	undefined	Lens dirt texture overlay
haloScale	number	0.5	Scale of the halo effect
secondaryGhosts	boolean	true	Enable secondary ghost flares
aditionalStreaks	boolean	true	Enable additional streak effects
ghostScale	number	0.3	Scale of ghost flares
opacity	number	1.0	Overall opacity
starBurst	boolean	true	Enable star burst effect

Example: Cinematic Lens Flare

@Component({
  template: `
    <!-- Sun/light source -->
    <ngt-mesh [position]="[10, 8, -20]">
      <ngt-sphere-geometry *args="[2, 32, 32]" />
      <ngt-mesh-basic-material color="#ffffaa" />
    </ngt-mesh>

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

    <ngtp-effect-composer>
      <ngtp-lens-flare [options]="{
        position: [10, 8, -20],
        glareSize: 0.6,
        starPoints: 8,
        anamorphic: true,
        secondaryGhosts: true
      }" />
      <ngtp-bloom [options]="{ intensity: 0.3 }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpLensFlare, NgtpBloom, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Example: Interactive Mouse Flare

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-lens-flare [options]="{
        followMouse: true,
        smoothTime: 0.1,
        glareSize: 0.4
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpLensFlare],
})
export class SceneGraph {}

Tips

• The flare automatically fades when occluded by scene geometry
• Enable anamorphic for horizontal streak effects common in cinema
• Use lensDirtTexture for realistic dirty lens simulation
• Combine with bloom for enhanced glow around the light source
• Position should match your actual light source for realistic occlusion