NgtpScanline

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-scanline',
    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: 'scanline-demo relative block h-full' },
    imports: [NgtCanvas, PostprocessingWrapper, SceneGraph],
})
export default class Scanline {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh #mesh>
            <ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
            <ngt-mesh-standard-material color="#00ffff" [emissive]="'#004444'" [emissiveIntensity]="0.5" />
        </ngt-mesh>

        <ngtp-effect-composer>
            <ngtp-scanline [options]="{ density: 1.5 }" />
            <ngtp-noise [options]="{ opacity: 0.15 }" />
            <ngtp-vignette [options]="{ darkness: 0.7 }" />
            <ngtp-chromatic-aberration [options]="{ offset: [0.002, 0.002] }" />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpScanline, NgtpNoise, NgtpVignette, NgtpChromaticAberration],
})
export class SceneGraph {
    private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');

    constructor() {
        beforeRender(({ delta }) => {
            const mesh = this.meshRef().nativeElement;
            mesh.rotation.x += delta * 0.2;
            mesh.rotation.y += delta * 0.4;
        });
    }
}

The scanline effect simulates the horizontal lines visible on CRT monitors and old televisions, adding a retro aesthetic to your scene.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-scanline [options]="{ density: 1.25 }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpScanline],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
density	number	1.25	Density of scanlines

Example: CRT Monitor Effect

@Component({
  template: `
    <ngt-mesh>
      <ngt-box-geometry />
      <ngt-mesh-standard-material color="cyan" />
    </ngt-mesh>

    <ngtp-effect-composer>
      <!-- Combine effects for authentic CRT look -->
      <ngtp-scanline [options]="{ density: 1.5 }" />
      <ngtp-noise [options]="{ opacity: 0.1 }" />
      <ngtp-vignette [options]="{ darkness: 0.6 }" />
      <ngtp-chromatic-aberration [options]="{ offset: [0.001, 0.001] }" />
    </ngtp-effect-composer>
  `,
  imports: [
    NgtpEffectComposer,
    NgtpScanline,
    NgtpNoise,
    NgtpVignette,
    NgtpChromaticAberration
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Tips

• Higher density values create more visible scanlines
• Combine with NgtpNoise for static/grain effect
• Add NgtpVignette for CRT edge darkening
• Use NgtpChromaticAberration for color fringing typical of old monitors
• Works great with NgtpPixelation for retro game aesthetics