NgtpN8AO

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

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtpEffectComposer } from 'angular-three-postprocessing';
import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Ground plane -->
        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" [position]="[0, -0.5, 0]" [receiveShadow]="true">
            <ngt-plane-geometry *args="[10, 10]" />
            <ngt-mesh-standard-material color="white" />
        </ngt-mesh>

        <!-- Stacked boxes to show AO in corners -->
        <ngt-mesh [position]="[0, 0, 0]">
            <ngt-box-geometry *args="[1, 1, 1]" />
            <ngt-mesh-standard-material color="white" />
        </ngt-mesh>

        <ngt-mesh [position]="[1.2, 0, 0]">
            <ngt-box-geometry *args="[0.8, 0.8, 0.8]" />
            <ngt-mesh-standard-material color="white" />
        </ngt-mesh>

        <ngt-mesh [position]="[-0.8, 0.5, 0.8]">
            <ngt-box-geometry *args="[0.6, 1.5, 0.6]" />
            <ngt-mesh-standard-material color="white" />
        </ngt-mesh>

        <ngt-mesh [position]="[0.5, -0.25, -0.8]">
            <ngt-sphere-geometry *args="[0.4, 32, 32]" />
            <ngt-mesh-standard-material color="white" />
        </ngt-mesh>

        <ngtp-effect-composer>
            <ngtp-n8ao
                [options]="{
                    aoRadius: 1,
                    intensity: 3,
                    aoSamples: 16,
                    denoiseSamples: 8,
                }"
            />
        </ngtp-effect-composer>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtpEffectComposer, NgtpN8AO],
})
export class SceneGraph {
    protected Math = Math;
}

N8AO (N8 Ambient Occlusion) is a high-quality screen-space ambient occlusion effect that adds realistic shadowing to crevices, corners, and areas where objects meet.

Installation

N8AO requires an additional dependency:

npm install n8ao

Usage

import { NgtpEffectComposer } from 'angular-three-postprocessing';
import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';

@Component({
  template: `
    <ngtp-effect-composer>
      <ngtp-n8ao [options]="{
        aoRadius: 0.5,
        intensity: 1
      }" />
    </ngtp-effect-composer>
  `,
  imports: [NgtpEffectComposer, NgtpN8AO],
})
export class SceneGraph {}

Options

Property	Type	Default	Description
quality	'performance' | 'low' | 'medium' | 'high' | 'ultra'	-	Quality preset
intensity	number	5	Strength of AO effect
aoRadius	number	5.0	Radius in world units
aoSamples	number	16	Samples for AO calculation
denoiseSamples	number	8	Denoising samples
denoiseRadius	number	12	Denoising filter radius
halfRes	boolean	false	Render at half resolution
screenSpaceRadius	boolean	false	Screen-space vs world-space radius
color	ColorRepresentation	'black'	AO shadow color

Quality Presets

// Performance preset - fastest, lowest quality
<ngtp-n8ao [options]="{ quality: 'performance' }" />

// Ultra preset - slowest, highest quality
<ngtp-n8ao [options]="{ quality: 'ultra' }" />

Tips

• Use halfRes: true for better performance on lower-end devices
• Increase aoRadius for larger, softer shadows
• Use color to tint AO shadows (e.g., slight blue for outdoor scenes)
• screenSpaceRadius: true makes AO consistent regardless of camera distance
• N8AO is more performant than traditional SSAO while providing better quality