NgtpHueSaturation

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

scene-graph.ts

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

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

        <ngt-mesh #mesh [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, 0]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#3498db" />
        </ngt-mesh>

        <ngtp-effect-composer>
            <ngtp-hue-saturation
                [options]="{
                    hue: hueShift,
                    saturation: 0.3,
                }"
            />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpHueSaturation],
})
export class SceneGraph {
    hueShift = 0;

    private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');

    constructor() {
        beforeRender(({ clock }) => {
            // Animate hue shift over time
            this.hueShift = Math.sin(clock.getElapsedTime() * 0.5) * Math.PI;

            const mesh = this.meshRef().nativeElement;
            mesh.rotation.y += 0.01;
        });
    }
}

The hue/saturation effect allows you to shift colors and adjust color intensity across the entire scene.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-hue-saturation [options]="{
        hue: 0,
        saturation: 0.2
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpHueSaturation],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
hue	number	0	Hue rotation in radians (-PI to PI)
saturation	number	0	Saturation adjustment (-1 to 1)

Example: Desaturated Look

@Component({
  template: `
    <ngtp-effect-composer>
      <!-- Reduce saturation for a muted, cinematic look -->
      <ngtp-hue-saturation [options]="{ saturation: -0.5 }" />
      <ngtp-vignette [options]="{ darkness: 0.4 }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpHueSaturation, NgtpVignette],
})
export class SceneGraph {}

Tips

• hue: 0 means no color shift
• saturation: -1 creates a grayscale image
• saturation: 1 doubles the color intensity
• Combine with NgtpBrightnessContrast for complete color grading
• Use small hue values for subtle color temperature adjustments