NgtpFXAA

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Sharp-edged geometry to show anti-aliasing effect -->
        <ngt-group #group>
            <ngt-mesh [position]="[-1.5, 0.5, 0]" [rotation]="[0.5, 0.5, 0]">
                <ngt-box-geometry *args="[1, 1, 1]" />
                <ngt-mesh-standard-material color="#3b82f6" [metalness]="0.3" [roughness]="0.4" />
            </ngt-mesh>

            <ngt-mesh [position]="[0, 0, 0]" [rotation]="[0.3, 0.7, 0]">
                <ngt-box-geometry *args="[1.2, 1.2, 1.2]" />
                <ngt-mesh-standard-material color="#ef4444" [metalness]="0.3" [roughness]="0.4" />
            </ngt-mesh>

            <ngt-mesh [position]="[1.5, -0.3, 0]" [rotation]="[0.7, 0.3, 0]">
                <ngt-box-geometry *args="[0.8, 0.8, 0.8]" />
                <ngt-mesh-standard-material color="#22c55e" [metalness]="0.3" [roughness]="0.4" />
            </ngt-mesh>

            <!-- Thin lines that benefit from anti-aliasing -->
            <ngt-mesh [position]="[0, -1.5, 0]" [rotation]="[0, 0, Math.PI / 4]">
                <ngt-box-geometry *args="[4, 0.02, 0.02]" />
                <ngt-mesh-standard-material color="white" />
            </ngt-mesh>

            <ngt-mesh [position]="[0, -1.5, 0]" [rotation]="[0, 0, -Math.PI / 4]">
                <ngt-box-geometry *args="[4, 0.02, 0.02]" />
                <ngt-mesh-standard-material color="white" />
            </ngt-mesh>
        </ngt-group>

        <!-- Disable multisampling and use FXAA instead -->
        <ngtp-effect-composer [options]="{ multisampling: 0 }">
            <ngtp-fxaa />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpFXAA],
})
export class SceneGraph {
    protected readonly Math = Math;

    private groupRef = viewChild.required<ElementRef<THREE.Group>>('group');

    constructor() {
        beforeRender(({ clock }) => {
            const t = clock.getElapsedTime();
            this.groupRef().nativeElement.rotation.y = t * 0.2;
        });
    }
}

FXAA (Fast Approximate Anti-Aliasing) is a screen-space anti-aliasing technique that smooths jagged edges with minimal performance impact.

Usage

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

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

Options

Property	Type	Default	Description
blendFunction	BlendFunction	BlendFunction.SRC	How the effect blends

Example: FXAA vs No Anti-Aliasing

@Component({
  template: `
    <ngt-mesh [rotation]="[0.5, 0.5, 0]">
      <ngt-box-geometry />
      <ngt-mesh-standard-material color="steelblue" />
    </ngt-mesh>

    <!-- Disable multisampling and use FXAA instead -->
    <ngtp-effect-composer [options]="{ multisampling: 0 }">
      <ngtp-fxaa />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpFXAA],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SceneGraph {}

FXAA vs SMAA

Feature	FXAA	SMAA
Performance	Faster	Slightly slower
Quality	Good	Better
Blurring	May blur fine details	Preserves details better
Use case	Performance-critical	Quality-focused

Tips

• Set multisampling: 0 on the effect composer when using FXAA to avoid redundant anti-aliasing
• FXAA is faster than SMAA but may slightly blur textures and fine details
• Good choice for mobile or performance-critical applications
• Consider SMAA if quality is more important than performance