NgtpSMAA

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-smaa',
    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: 'smaa-demo relative block h-full' },
    imports: [NgtCanvas, PostprocessingWrapper, SceneGraph],
})
export default class SMAA {
    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, NgtpSMAA } from 'angular-three-postprocessing';
import * as THREE from 'three';

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Sharp-edged geometry to show anti-aliasing -->
        <ngt-mesh #mesh [rotation]="[0.5, 0.5, 0]">
            <ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
            <ngt-mesh-standard-material color="#3498db" />
        </ngt-mesh>

        <ngt-mesh [position]="[2, 0, -1]" [rotation]="[0.3, 0.7, 0]">
            <ngt-box-geometry *args="[1, 1, 1]" />
            <ngt-mesh-standard-material color="#e74c3c" />
        </ngt-mesh>

        <ngt-mesh [position]="[-2, 0, -1]" [rotation]="[0.7, 0.3, 0]">
            <ngt-box-geometry *args="[1, 1, 1]" />
            <ngt-mesh-standard-material color="#2ecc71" />
        </ngt-mesh>

        <!-- Disable multisampling and use SMAA instead -->
        <ngtp-effect-composer [options]="{ multisampling: 0 }">
            <ngtp-smaa />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpSMAA],
})
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.3;
        });
    }
}

SMAA (Subpixel Morphological Anti-Aliasing) is a high-quality anti-aliasing technique that smooths jagged edges in the rendered scene.

Usage

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

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

Options

Property	Type	Default	Description
preset	SMAAPreset	SMAAPreset.HIGH	Quality preset (LOW, MEDIUM, HIGH, ULTRA)

Note

When using SMAA, you typically want to disable the built-in multisampling on the effect composer by setting multisampling: 0.

Example: High Quality AA

<ngtp-effect-composer [options]="{ multisampling: 0 }">
  <ngtp-smaa [options]="{ preset: SMAAPreset.ULTRA }" />
  <!-- Other effects -->
  <ngtp-bloom [options]="{ intensity: 0.5 }" />
</ngtp-effect-composer>