SelectiveBloomEffectDesc

The SelectiveBloomEffectDesc class is a Descriptor that applies a selective bloom effect. It uses mask-based filtering to apply the bloom effect only to specific objects.

Properties

visible

Type: boolean | undefined

Description: Controls the visibility of the effect descriptor.

Default: true

strength

Type: number | undefined

Description: Specifies the strength of the bloom effect.

Default: 0.8

Example:

{
  selectiveBloom: {
    strength: 1.2,
  }
}

radius

Type: number | undefined

Description: Specifies the radius (blur spread) of the bloom effect.

Default: 0.2

Example:

{
  selectiveBloom: {
    radius: 0.4,
  }
}

threshold

Type: number | undefined

Description: Specifies the threshold for the bloom effect. Only pixels brighter than this value will have bloom applied.

Default: 0.0

Example:

{
  selectiveBloom: {
    threshold: 0.5,
  }
}

resolutionScale

Type: number | undefined

Description: Specifies the rendering resolution scale factor. Lower values improve performance.

Default: 0.5

Example:

{
  selectiveBloom: {
    resolutionScale: 0.5,
  }
}

Applying the Effect to Objects

To apply the selective bloom effect to specific objects, specify the bloom effect descriptor’s ID in the target object’s effectIds property.

effectIds

An array of selective effect descriptor IDs to apply to the target object. When a bloom effect descriptor is added, a unique ID is assigned, and the effect is applied by specifying this ID in the target object’s effectIds.

emissiveColor (optional)

Specifies the bloom source color. When not set, the material’s surface color (diffuseColor) is automatically used as the bloom source. This means you can enable bloom with just effectIds and emissiveIntensity without explicitly specifying a color.

emissiveIntensity

Controls the intensity of the bloom source. Higher values produce brighter bloom.

Usage Examples

Adding a basic selective bloom

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

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

// Add selective bloom effect descriptor
const bloomDesc = view.addEffect<SelectiveBloomEffectDesc>({
  selectiveBloom: {
    strength: 0.8,
    radius: 0.2,
    threshold: 0.0,
  },
});

// Apply bloom effect to an object
// When emissiveColor is not set, the material's color is used as the bloom source
const cubeDesc = view.addMesh<BoxMeshDesc>({
  box: {
    width: 100,
    height: 100,
    depth: 100,
    color: new Color().setHex(0xff0000),
    emissiveIntensity: 1.0, // Controls bloom brightness
    effectIds: [bloomDesc.id],
  },
  position: { x: 0, y: 0, z: 1000 },
});

Strong bloom effect

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

plugin.addDefaultPhotorealScene();

// Add a strong bloom effect
const bloomDesc = view.addEffect<SelectiveBloomEffectDesc>({
  selectiveBloom: {
    strength: 1.5,
    radius: 0.5,
    threshold: 0.2,
  },
});

Performance-oriented settings

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

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

// Performance-oriented settings
const bloomDesc = view.addEffect<SelectiveBloomEffectDesc>({
  selectiveBloom: {
    strength: 0.6,
    radius: 0.2,
    threshold: 0.0,
    resolutionScale: 0.5, // Lower resolution for improved performance
  },
});

Dynamic bloom effect updates

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

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

const bloomDesc = view.addEffect<SelectiveBloomEffectDesc>({
  selectiveBloom: {
    strength: 0.8,
  },
});

// Update parameters later
bloomDesc.update({
  selectiveBloom: {
    strength: 1.2,
    radius: 0.3,
  },
});

Applying bloom to 3D Tiles

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

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

const bloomDesc = view.addEffect<SelectiveBloomEffectDesc>({
  selectiveBloom: {
    strength: 1.0,
    radius: 0.5,
  },
});

// Apply bloom to 3D Tiles buildings
// emissiveColor is optional — the model's own color is used when omitted
const buildingsSource = view.addSource({
  type: "3d-tiles",
  url: "https://example.com/tileset.json",
});

const buildingsLayer = view.addLayer({
  type: "3d-tiles",
  source: buildingsSource,
  model: {
    show: true,
    color: new Color().setHex(0xffffff),
    effectIds: [bloomDesc.id],
    emissiveIntensity: 0.3,
  },
});

Applying bloom to GeoJSON models

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

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

const bloomDesc = view.addEffect<SelectiveBloomEffectDesc>({
  selectiveBloom: {
    strength: 1.2,
  },
});

// Apply bloom to GeoJSON layer models
// emissiveColor is optional — the model's own color is used when omitted
const modelSource = view.addSource({
  type: "geojson",
  data: featureCollection,
});

const modelLayer = view.addLayer({
  type: "vector",
  source: modelSource,
  model: {
    show: true,
    size: 100,
    url: "model.glb",
    effectIds: [bloomDesc.id],
    emissiveIntensity: 0.5,
  },
});

Dynamically toggling the effect

// Initially no effects applied
const cubeDesc = view.addMesh<BoxMeshDesc>({
  box: {
    width: 100,
    height: 100,
    depth: 100,
    color: new Color().setHex(0xff0000),
    effectIds: [],
  },
  position: { x: 0, y: 0, z: 1000 },
});

// Add bloom effect later
cubeDesc.update({
  box: {
    effectIds: [bloomDesc.id],
    emissiveIntensity: 1.0,
  },
});

// Disable the effect
cubeDesc.update({
  box: {
    effectIds: [],
  },
});

Notes

• The selective bloom effect uses mask-based filtering to apply bloom only to specific objects.
• When emissiveColor is not set, the material’s surface color (diffuseColor) is automatically used as the bloom source. This includes per-instance colors for InstancedMesh and texture colors for textured materials.
• To use the bloom effect effectively, it is important to set the object’s emissiveIntensity appropriately.