Effect Descriptor

EffectDescは、レンダリングパイプラインにポストプロセッシングエフェクトを適用するためのDescriptorタイプです。アンチエイリアシング、被写界深度、トーンマッピングなど、様々なビジュアルエフェクトを追加できます。

利用可能なEffectDescタイプ

navara_threeでは、以下のEffectDescタイプが利用可能です:

Descriptorタイプ	説明
AerialPerspectiveEffectDesc	大気による光の散乱と透過を表現するエフェクト
CloudsEffectDesc	リアルタイムボリュメトリック雲をレンダリングするエフェクト
ColorGradingLUTEffectDesc	LUTを使用したカラーグレーディングを適用するエフェクト
DepthOfFieldEffectDesc	カメラの焦点面に基づいてボケ効果を適用するエフェクト
FogLightEffectDesc	ポイントライトからのボリュメトリックフォグを生成するエフェクト
FXAAEffectDesc	FXAA(Fast Approximate Anti-Aliasing)を適用するエフェクト
LensFlareEffectDesc	太陽や月からのレンズフレアを生成するエフェクト
RainDropEffectDesc	画面に雨粒の屈折効果を適用するエフェクト
SelectiveBloomEffectDesc	セレクティブブルームを適用するエフェクト
SelectiveOutlineEffectDesc	セレクティブアウトラインを適用するエフェクト
SMAAEffectDesc	SMAA(Subpixel Morphological Anti-Aliasing)を適用するエフェクト
SSAOEffectDesc	スクリーンスペースアンビエントオクルージョンを適用するエフェクト
SSREffectDesc	リアルタイムスクリーンスペース反射を生成するエフェクト
ToneMappingEffectDesc	HDRからLDRへの色調整を行うエフェクト

基本的な使い方

EffectDescは、Descriptorクラスを登録した後、view.addEffect()メソッドで追加します:

import ThreeView from "@navaramap/three";
import { AerialPerspectiveEffectDesc } from "@navaramap/three-default-descs";

const view = new ThreeView();

// Descriptorクラスを登録
view.registerEffect("aerialPerspective", AerialPerspectiveEffectDesc);

await view.init();

const aerialPerspectiveDesc = view.addEffect<AerialPerspectiveEffectDesc>({
  aerialPerspective: {},
});

共通プロパティ

すべてのEffectDescは、以下の基本設定を持ちます:

id: オブジェクトの一意な識別子
visible: オブジェクトの表示/非表示を切り替え

詳細な使用方法は、各Descriptorタイプのドキュメントを参照してください。