NgtpDepth

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Objects at various depths to demonstrate depth visualization -->
        <ngt-ambient-light [intensity]="0.5" />
        <ngt-directional-light [position]="[5, 5, 5]" [intensity]="1" />

        <!-- Near objects (will appear white/light) -->
        <ngt-mesh [position]="[-2, 0, 2]">
            <ngt-box-geometry *args="[1, 1, 1]" />
            <ngt-mesh-standard-material color="#ff6b6b" />
        </ngt-mesh>

        <ngt-mesh [position]="[2, 0, 1]">
            <ngt-sphere-geometry *args="[0.6, 32, 32]" />
            <ngt-mesh-standard-material color="#4ecdc4" />
        </ngt-mesh>

        <!-- Mid-distance objects -->
        <ngt-mesh [position]="[0, 0, -2]">
            <ngt-torus-knot-geometry *args="[0.5, 0.2, 100, 16]" />
            <ngt-mesh-standard-material color="#ffe66d" />
        </ngt-mesh>

        <ngt-mesh [position]="[-1.5, 1, -3]">
            <ngt-cone-geometry *args="[0.5, 1, 32]" />
            <ngt-mesh-standard-material color="#a855f7" />
        </ngt-mesh>

        <!-- Far objects (will appear dark/black) -->
        <ngt-mesh [position]="[1.5, -0.5, -6]">
            <ngt-dodecahedron-geometry *args="[0.8, 0]" />
            <ngt-mesh-standard-material color="#f472b6" />
        </ngt-mesh>

        <ngt-mesh [position]="[0, 1.5, -8]">
            <ngt-icosahedron-geometry *args="[0.7, 0]" />
            <ngt-mesh-standard-material color="#22d3ee" />
        </ngt-mesh>

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

        <ngtp-effect-composer>
            <ngtp-depth [options]="{ inverted: true }" />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpDepth],
})
export class SceneGraph {
    protected readonly Math = Math;
}

The depth effect visualizes the scene’s depth buffer, useful for debugging or creating stylized depth-based visuals.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer [options]="{ depthBuffer: true }">
      <ngtp-depth [options]="{ inverted: false }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpDepth],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
inverted	boolean	false	Invert the depth visualization

Example: Depth Visualization

@Component({
  template: `
    <!-- Multiple objects at different depths -->
    <ngt-mesh [position]="[0, 0, 0]">
      <ngt-box-geometry />
      <ngt-mesh-standard-material color="red" />
    </ngt-mesh>

    <ngt-mesh [position]="[2, 0, -3]">
      <ngt-sphere-geometry />
      <ngt-mesh-standard-material color="blue" />
    </ngt-mesh>

    <ngt-mesh [position]="[-2, 0, -6]">
      <ngt-cone-geometry />
      <ngt-mesh-standard-material color="green" />
    </ngt-mesh>

    <ngtp-effect-composer [options]="{ depthBuffer: true }">
      <ngtp-depth />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpDepth],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Tips

• Ensure depthBuffer: true is set on the effect composer
• White represents near objects, black represents far objects (unless inverted)
• Useful for debugging depth-based effects like depth of field
• Can be combined with other effects for artistic depth-based styling