NgtpColorDepth

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Gradient sphere to show color banding -->
        <ngt-mesh #mesh1 [position]="[-1.2, 0, 0]">
            <ngt-sphere-geometry *args="[0.7, 32, 32]" />
            <ngt-mesh-standard-material color="#ff9a56" [metalness]="0.2" [roughness]="0.6" />
        </ngt-mesh>

        <ngt-mesh #mesh2 [position]="[1.2, 0, 0]">
            <ngt-torus-geometry *args="[0.5, 0.2, 16, 32]" />
            <ngt-mesh-standard-material color="#56c4ff" [metalness]="0.2" [roughness]="0.6" />
        </ngt-mesh>

        <!-- Ground plane with gradient -->
        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" [position]="[0, -1.2, 0]">
            <ngt-plane-geometry *args="[8, 8]" />
            <ngt-mesh-standard-material color="#8b5cf6" [metalness]="0.1" [roughness]="0.8" />
        </ngt-mesh>

        <ngtp-effect-composer>
            <!-- Low bit depth creates visible color banding (posterization) -->
            <ngtp-color-depth [options]="{ bits: 3 }" />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpColorDepth],
})
export class SceneGraph {
    protected readonly Math = Math;

    private mesh1Ref = viewChild.required<ElementRef<THREE.Mesh>>('mesh1');
    private mesh2Ref = viewChild.required<ElementRef<THREE.Mesh>>('mesh2');

    constructor() {
        beforeRender(({ clock }) => {
            const t = clock.getElapsedTime();
            const mesh1 = this.mesh1Ref().nativeElement;
            const mesh2 = this.mesh2Ref().nativeElement;

            mesh1.rotation.y = t * 0.3;
            mesh2.rotation.x = t * 0.4;
            mesh2.rotation.y = t * 0.5;
        });
    }
}

The color depth effect reduces the number of colors in the scene, creating a posterized or retro look similar to older graphics hardware.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-color-depth [options]="{ bits: 4 }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpColorDepth],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
bits	number	16	Color depth in bits per channel (1-16)

Example: Retro 8-bit Style

@Component({
  template: `
    <ngt-mesh>
      <ngt-icosahedron-geometry *args="[1, 1]" />
      <ngt-mesh-standard-material color="orange" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <!-- Combine with pixelation for full retro effect -->
      <ngtp-pixelation [options]="{ granularity: 8 }" />
      <ngtp-color-depth [options]="{ bits: 4 }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpColorDepth, NgtpPixelation, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Tips

• Lower bit values create more pronounced color banding
• bits: 1 creates a 2-color (1-bit) look per channel
• bits: 8 is standard 24-bit color (8 bits per RGB channel)
• Combine with NgtpPixelation for a complete retro game aesthetic