SelectiveOutlineEffectDesc

SelectiveOutlineEffectDescクラスは、選択的なアウトラインエフェクトを適用する Descriptor です。マスクベースのフィルタリングを使用して、特定のオブジェクトにのみアウトラインを描画できます。Sobelフィルタを使用したエッジ検出により、オブジェクトの輪郭を強調します。

Properties

visible

Type: boolean | undefined

Description: エフェクトの表示/非表示を制御します。

Default: true

color

Type: Color | undefined

Description: アウトラインの色をColorで指定します。

Default: 0xffffff

Example:

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

{
  selectiveOutline: {
    color: new Color().setStyle("#ff0000"),
  }
}

thickness

Type: number | undefined

Description: アウトラインの太さを指定します。

Default: 1.0

Example:

{
  selectiveOutline: {
    thickness: 2.0,
  }
}

edgeStrength

Type: number | undefined

Description: エッジ検出の強度を指定します。値が大きいほどエッジが強調されます。

Default: 1.0

Example:

{
  selectiveOutline: {
    edgeStrength: 1.5,
  }
}

resolutionScale

Type: number | undefined

Description: レンダリング解像度のスケール係数を指定します。低い値でパフォーマンスが向上します。

Default: 1.0

Example:

{
  selectiveOutline: {
    resolutionScale: 0.5,
  }
}

オブジェクトへのエフェクト適用

選択的アウトラインエフェクトを特定のオブジェクトに適用するには、対象オブジェクトのeffectIdsプロパティにアウトラインエフェクトのIDを指定します。

effectIds

対象オブジェクトに適用するセレクティブエフェクトのIDの配列です。アウトラインエフェクトを追加すると一意のIDが割り当てられ、このIDを対象オブジェクトのeffectIdsに指定することでエフェクトが適用されます。

Usage Examples

基本的な選択的アウトラインの追加

import ThreeView, { Color } from "@navaramap/three";
import {
  BoxMeshDesc,
  SelectiveOutlineEffectDesc,
} from "@navaramap/three-default-descs";

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

// 選択的アウトラインエフェクトを追加
const outlineDesc = view.addEffect<SelectiveOutlineEffectDesc>({
  selectiveOutline: {
    color: new Color().setHex(0xffffff),
    thickness: 1.0,
    edgeStrength: 1.0,
  },
});

// オブジェクトにアウトラインエフェクトを適用
const cubeDesc = view.addMesh<BoxMeshDesc>({
  box: {
    width: 100,
    height: 100,
    depth: 100,
    color: new Color().setHex(0x0088ff),
    effectIds: [outlineDesc.id], // アウトラインエフェクトを適用
  },
  position: { x: 0, y: 0, z: 1000 },
});

カラーアウトラインの追加

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

// 赤色の太いアウトラインを追加
const outlineDesc = view.addEffect<SelectiveOutlineEffectDesc>({
  selectiveOutline: {
    color: new Color().setHex(0xff0000),
    thickness: 2.5,
    edgeStrength: 1.5,
  },
});

パフォーマンス重視の設定

import ThreeView, { Color } from "@navaramap/three";
import { SelectiveOutlineEffectDesc } from "@navaramap/three-default-descs";

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

// パフォーマンス重視の設定
const outlineDesc = view.addEffect<SelectiveOutlineEffectDesc>({
  selectiveOutline: {
    color: new Color().setHex(0xffffff),
    thickness: 1.0,
    edgeStrength: 1.0,
    resolutionScale: 0.5, // 低解像度でパフォーマンス向上
  },
});

アウトラインエフェクトの動的更新

import ThreeView, { Color } from "@navaramap/three";
import { SelectiveOutlineEffectDesc } from "@navaramap/three-default-descs";

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

const outlineDesc = view.addEffect<SelectiveOutlineEffectDesc>({
  selectiveOutline: {
    color: new Color().setHex(0xffffff),
    thickness: 1.0,
  },
});

// 後からパラメータを更新
outlineDesc.update({
  selectiveOutline: {
    color: new Color().setHex(0x00ff00), // 緑
    thickness: 2.0,
  },
});

3D Tiles へのアウトライン適用

import ThreeView, { Color } from "@navaramap/three";
import { SelectiveOutlineEffectDesc } from "@navaramap/three-default-descs";

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

const outlineDesc = view.addEffect<SelectiveOutlineEffectDesc>({
  selectiveOutline: {
    color: new Color().setHex(0xff0000),
    thickness: 2.0,
  },
});

// 3D Tiles の建物にアウトラインを適用
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: [outlineDesc.id],
  },
});

ブルームとアウトラインを組み合わせる

import ThreeView, { Color } from "@navaramap/three";
import {
  BoxMeshDesc,
  SelectiveBloomEffectDesc,
  SelectiveOutlineEffectDesc,
} from "@navaramap/three-default-descs";

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

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

const outlineDesc = view.addEffect<SelectiveOutlineEffectDesc>({
  selectiveOutline: {
    color: new Color().setHex(0xff0000),
    thickness: 2.0,
  },
});

// 両方のエフェクトを適用
const cubeDesc = view.addMesh<BoxMeshDesc>({
  box: {
    width: 100,
    height: 100,
    depth: 100,
    color: new Color().setHex(0xff0000),
    emissiveIntensity: 1.0,
    effectIds: [bloomDesc.id, outlineDesc.id], // 両方を適用
  },
  position: { x: 0, y: 0, z: 1000 },
});

備考

• 選択的アウトラインエフェクトは、Sobel フィルタを使用したエッジ検出により、オブジェクトの輪郭を描画します。
• 選択したオブジェクトのハイライト表示やフォーカス表示に適しています。