NgtpASCII

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh #mesh>
            <ngt-torus-knot-geometry *args="[1, 0.3, 128, 32]" />
            <ngt-mesh-standard-material color="white" />
        </ngt-mesh>

        <ngtp-effect-composer>
            <ngtp-ascii
                [options]="{
                    fontSize: 54,
                    cellSize: 12,
                    color: '#00ff00',
                    characters: ' .:-=+*#%@',
                }"
            />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpASCII],
})
export class SceneGraph {
    private meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');

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

The ASCII effect renders your scene as ASCII characters, creating a retro terminal-style appearance. Character brightness is mapped to different ASCII characters.

Usage

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

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-ascii [options]="{
        fontSize: 54,
        cellSize: 16,
        color: '#00ff00'
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpASCII],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
font	string	'arial'	Font family for ASCII characters
characters	string	”	Characters used for brightness mapping
fontSize	number	54	Font size in pixels
cellSize	number	16	Size of each ASCII cell
color	string	'#ffffff'	Color of ASCII characters
invert	boolean	false	Invert brightness mapping

Example: Terminal Style

Create a classic green terminal look:

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

    <ngtp-effect-composer>
      <ngtp-ascii [options]="{
        fontSize: 48,
        cellSize: 12,
        color: '#00ff00',
        characters: ' .:-=+*#%@'
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpASCII, NgtArgs],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

Tips

• Smaller cellSize values create more detailed ASCII art but may impact performance
• The characters string should be ordered from darkest to brightest
• Use monospace fonts for consistent character spacing