NgtpTiltShift2

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

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtpEffectComposer, NgtpTiltShift2 } 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>
            <!-- TiltShift2 with start/end points for more control -->
            <ngtp-tilt-shift-2
                [options]="{
                    blur: 0.2,
                    taper: 0.5,
                    start: [0.5, 0.3],
                    end: [0.5, 0.7],
                    samples: 10,
                }"
            />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpTiltShift2],
})
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' },
    ];
}

TiltShift2 is an alternative tilt-shift implementation that provides more control over the focus area using start and end points in screen space.

Usage

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

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

Options

Property	Type	Default	Description
blur	number	0.15	Blur intensity
taper	number	0.5	Taper factor for blur falloff
start	[x, y]	[0.5, 0.0]	Start point in screen space (0-1)
end	[x, y]	[0.5, 1.0]	End point in screen space (0-1)
samples	number	10	Number of blur samples
direction	[x, y]	[1, 1]	Blur direction

Example: Diagonal Focus Band

@Component({
  template: `
    <ngt-mesh [position]="[0, 0, 0]">
      <ngt-torus-knot-geometry *args="[1, 0.3, 128, 32]" />
      <ngt-mesh-standard-material color="coral" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <!-- Diagonal focus from bottom-left to top-right -->
      <ngtp-tilt-shift-2 [options]="{
        blur: 0.2,
        taper: 0.6,
        start: [0.2, 0.8],
        end: [0.8, 0.2],
        samples: 15
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpTiltShift2, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Example: Horizontal Focus Strip

@Component({
  template: `
    <ngtp-effect-composer>
      <!-- Horizontal focus band in the middle -->
      <ngtp-tilt-shift-2 [options]="{
        blur: 0.25,
        start: [0, 0.5],
        end: [1, 0.5],
        taper: 0.4
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpTiltShift2],
})
export class SceneGraph {}

TiltShift vs TiltShift2

Feature	TiltShift	TiltShift2
Focus control	Vertical offset only	Start/end points (any angle)
Flexibility	Simple	More customizable
Use case	Standard miniature	Custom focus areas

Tips

• start and end define a line in screen space (0-1 coordinates)
• The focus area is perpendicular to this line
• Higher samples improves quality but reduces performance
• taper controls how quickly the blur fades from the focus line
• Use for creative focus effects beyond traditional tilt-shift