NgtpDepthOfField

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-depth-of-field',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 6], fov: 50 }">
            <app-postprocessing-wrapper *canvasContent [lights]="true" [controls]="null">
                <app-scene-graph />
            </app-postprocessing-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'depth-of-field-demo relative block h-full' },
    imports: [NgtCanvas, PostprocessingWrapper, SceneGraph],
})
export default class DepthOfField {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Row of spheres at different depths -->
        <ngt-mesh [position]="[-3, 0, -6]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#e74c3c" />
        </ngt-mesh>

        <ngt-mesh [position]="[-1.5, 0, -3]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#f39c12" />
        </ngt-mesh>

        <ngt-mesh #focusMesh [position]="[0, 0, 0]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#2ecc71" />
        </ngt-mesh>

        <ngt-mesh [position]="[1.5, 0, 3]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#3498db" />
        </ngt-mesh>

        <ngt-mesh [position]="[3, 0, 6]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#9b59b6" />
        </ngt-mesh>

        <ngtp-effect-composer>
            <ngtp-depth-of-field
                [options]="{
                    focusDistance: 0,
                    focalLength: 0.05,
                    bokehScale: 6,
                }"
            />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpDepthOfField],
})
export class SceneGraph {
    private focusMeshRef = viewChild.required<ElementRef<THREE.Mesh>>('focusMesh');

    constructor() {
        beforeRender(({ delta }) => {
            const mesh = this.focusMeshRef().nativeElement;
            mesh.rotation.y += delta * 0.5;
        });
    }
}

The depth of field effect simulates camera focus, blurring objects that are not at the focal distance.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-depth-of-field [options]="{
        focusDistance: 0.01,
        focalLength: 0.02,
        bokehScale: 2
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpDepthOfField],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
focusDistance	number	0	Distance to focus point (normalized 0-1)
focalLength	number	0.05	Focal length of the camera
bokehScale	number	2	Scale of the bokeh blur
target	Vector3	undefined	Target position to focus on

Example: Focus on Object

@Component({
  template: `
    <ngt-mesh #target [position]="[0, 0, -5]">
      <ngt-box-geometry />
      <ngt-mesh-standard-material />
    </ngt-mesh>

    <ngtp-effect-composer>
      <ngtp-depth-of-field [options]="{
        target: targetPosition,
        focalLength: 0.02,
        bokehScale: 3
      }" />
    </ngtp-effect-composer>
  `,
})
export class SceneGraph {
  targetPosition = new THREE.Vector3(0, 0, -5);
}