SSAOEffectDesc

The SSAOEffectDesc class is a Descriptor that applies the Screen Space Ambient Occlusion (SSAO) effect. It adds dark shadows to crevices and concavities in the geometry, producing a more three-dimensional appearance.

Properties

visible

Type: boolean | undefined

Description: Controls the visibility of the effect descriptor.

Default: true

samples

Type: number | null | undefined

Description: Specifies the number of AO samples.

Default: null

Example:

{
  ssao: {
    samples: 16,
  }
}

radius

Type: number | null | undefined

Description: Specifies the AO influence radius.

Default: null

Example:

{
  ssao: {
    radius: 5,
  }
}

intensity

Type: number | undefined

Description: Specifies the intensity of the AO effect.

Default: 1

Example:

{
  ssao: {
    intensity: 1.5,
  }
}

color

Type: Color | undefined

Description: Specifies the AO color.

Default: new Color().setHex(0x000000) (black)

Example:

import { Color } from "@navaramap/three";

{
  ssao: {
    color: new Color().setHex(0x000000),
  }
}

halfRes

Type: boolean | null | undefined

Description: Specifies whether to render at half resolution. Useful for improving performance.

Default: false

Example:

{
  ssao: {
    halfRes: true,
  }
}

quality

Type: "Low" | "Medium" | "High" | "Ultra" | undefined

Description: Specifies the SSAO quality mode.

Default: "Low"

Example:

{
  ssao: {
    quality: "High",
  }
}

Usage Examples

Adding a basic SSAO effect

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

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

// Add SSAO effect descriptor
const ssaoDesc = view.addEffect<SSAOEffectDesc>({
  visible: true,
  ssao: {},
});

High-quality SSAO settings

import ThreeView, { Color } from "@navaramap/three";
import { SSAOEffectDesc } from "@navaramap/three_default_descs";

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

// Add high-quality SSAO
const ssaoDesc = view.addEffect<SSAOEffectDesc>({
  visible: true,
  ssao: {
    quality: "High",
    samples: 16,
    radius: 5,
    intensity: 1.5,
    color: new Color().setHex(0x000000),
  },
});

Performance-oriented SSAO settings

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

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

// Improve performance with half resolution
const ssaoDesc = view.addEffect<SSAOEffectDesc>({
  visible: true,
  ssao: {
    quality: "Low",
    halfRes: true,
  },
});

Usage combined with default effects

import ThreeView, { Color } from "@navaramap/three";
import { SSAOEffectDesc } 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();

// Add default photorealistic objects
plugin.addDefaultPhotorealScene();

// Add SSAO
const ssaoDesc = view.addEffect<SSAOEffectDesc>({
  visible: true,
  ssao: {
    quality: "High",
    halfRes: true,
    samples: 16,
    radius: 5,
    intensity: 1,
    color: new Color().setHex(0x000000),
  },
});

// Use combined with 3D tiles
const buildingsSource = view.addSource({
  type: "3d-tiles",
  url: "https://example.com/tileset.json",
});

view.addLayer({
  type: "3d-tiles",
  source: buildingsSource,
  model: {
    show: true,
    color: new Color().setHex(0xffffff),
  },
});

See Also

• Color class - How to configure colors