NgtpTiltShift

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Ground plane -->
        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" [position]="[0, -0.5, 0]">
            <ngt-plane-geometry *args="[20, 20]" />
            <ngt-mesh-standard-material color="#444444" />
        </ngt-mesh>

        <!-- City-like buildings -->
        @for (building of buildings; track building.id) {
            <ngt-mesh [position]="building.position">
                <ngt-box-geometry *args="[building.width, building.height, building.depth]" />
                <ngt-mesh-standard-material [color]="building.color" />
            </ngt-mesh>
        }

        <ngtp-effect-composer>
            <ngtp-tilt-shift [options]="{ blur: 0.5, offset: 0 }" />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpTiltShift],
})
export class SceneGraph {
    protected Math = Math;

    buildings = [
        { id: 1, position: [-3, 1, -2] as const, width: 1, height: 2, depth: 1, color: '#e74c3c' },
        { id: 2, position: [-1, 1.5, -3] as const, width: 1.2, height: 3, depth: 1.2, color: '#3498db' },
        { id: 3, position: [1, 0.75, -2] as const, width: 0.8, height: 1.5, depth: 0.8, color: '#2ecc71' },
        { id: 4, position: [3, 1.25, -3] as const, width: 1, height: 2.5, depth: 1, color: '#f39c12' },
        { id: 5, position: [-2, 0.5, 0] as const, width: 0.6, height: 1, depth: 0.6, color: '#9b59b6' },
        { id: 6, position: [0, 1, 0] as const, width: 1.5, height: 2, depth: 1.5, color: '#1abc9c' },
        { id: 7, position: [2, 0.75, 1] as const, width: 0.8, height: 1.5, depth: 0.8, color: '#e67e22' },
        { id: 8, position: [-1, 0.6, 2] as const, width: 0.7, height: 1.2, depth: 0.7, color: '#34495e' },
        { id: 9, position: [1, 0.4, 3] as const, width: 0.5, height: 0.8, depth: 0.5, color: '#c0392b' },
    ];
}

The tilt-shift effect simulates the shallow depth of field of tilt-shift photography, creating a “miniature” appearance by blurring areas outside a focus band.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-tilt-shift [options]="{
        blur: 0.5,
        offset: 0
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpTiltShift],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
blur	number	0.5	Blur intensity
offset	number	0	Vertical offset of the focus band

Example: Miniature City Effect

@Component({
  template: `
    <!-- Scene with multiple objects at different positions -->
    <ngt-mesh [position]="[-2, 0, 0]">
      <ngt-box-geometry *args="[1, 2, 1]" />
      <ngt-mesh-standard-material color="red" />
    </ngt-mesh>

    <ngt-mesh [position]="[0, 0, 0]">
      <ngt-box-geometry *args="[1, 3, 1]" />
      <ngt-mesh-standard-material color="blue" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <ngtp-tilt-shift [options]="{
        blur: 0.6,
        offset: 0.1
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpTiltShift, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Tips

• Higher blur values create stronger blur in out-of-focus areas
• Adjust offset to move the focus band up or down
• Works best with scenes viewed from above (bird’s eye view)
• Combine with increased saturation for enhanced miniature effect
• See also NgtpTiltShift2 for more control over the focus area