SMAAEffectDesc

The SMAAEffectDesc class is a Descriptor that applies the SMAA (Subpixel Morphological Anti-Aliasing) anti-aliasing effect. It provides higher quality anti-aliasing than FXAA.

Properties

visible

Type: boolean | undefined

Description: Controls the visibility of the effect descriptor.

Default: true

quality

Type: "low" | "medium" | "high" | "ultra" | undefined

Description: Specifies the SMAA quality preset.

Default: "medium"

Example:

{
  smaa: {
    quality: "high",
  }
}

edgeDetectionMode

Type: "color" | "depth" | "luma" | undefined

Description: Specifies the edge detection mode.

Default: "color"

Example:

{
  smaa: {
    edgeDetectionMode: "luma",
  }
}

Usage Examples

Using SMAA with default effects

import ThreeView from "@navaramap/three";
import { DefaultPlugin } from "@navaramap/three_default_plugin";

const view = new ThreeView();
const plugin = new DefaultPlugin();
view.addPlugin(plugin);
await view.init();

// Add default photorealistic objects (includes SMAA)
const defaultLayers = plugin.addDefaultPhotorealScene();

// Enable SMAA and set quality
defaultLayers.smaa.update({
  visible: true,
  smaa: {
    quality: "high",
    edgeDetectionMode: "color",
  },
});

High-quality SMAA settings

import ThreeView from "@navaramap/three";
import { SMAAEffectDesc } from "@navaramap/three_default_descs";

const view = new ThreeView();
await view.init();

// Add SMAA effect descriptor
view.addEffect<SMAAEffectDesc>({
  smaa: {
    quality: "ultra",
    edgeDetectionMode: "luma",
  },
});

Dynamically changing SMAA quality and edge detection mode

import ThreeView from "@navaramap/three";
import { FXAAEffectDesc } from "@navaramap/three_default_descs";
import { DefaultPlugin } from "@navaramap/three_default_plugin";

const view = new ThreeView();
const plugin = new DefaultPlugin();
view.addPlugin(plugin);
await view.init();

const defaultLayers = plugin.addDefaultPhotorealScene();

// Change quality to medium
defaultLayers.smaa.update({
  smaa: {
    quality: "medium",
  },
});

// Change edge detection mode to depth
defaultLayers.smaa.update({
  smaa: {
    edgeDetectionMode: "depth",
  },
});

// Disable SMAA and switch to FXAA
defaultLayers.smaa.update({ visible: false });
view.addEffect<FXAAEffectDesc>({
  fxaa: {},
});

Notes

SMAAEffectDesc is applied at the final stage of the rendering pipeline. Use it when higher quality anti-aliasing than FXAA is needed. Quality presets can be selected from low, medium, high, and ultra. Edge detection modes can be selected from color (highest quality), luma (balanced), and depth (fastest).