About

What is three_default_descs?

three_default_descs は、navara_three が提供するレイヤーシステム向けのデフォルトDescriptor実装パッケージです。3D メッシュ、ポストプロセッシングエフェクト、照明など、よく使われるDescriptorをすぐに利用できる形で提供します。

navara_three との関係

navara_three はオブジェクトの追加・管理を行うコアライブラリですが、個々のDescriptorの実装は含まれていません。three_default_descs がメッシュ、エフェクト、ライトの具体的な実装を提供します。

navara_three（コア）
  └── three_default_descs（デフォルトDescriptor実装）
        ├── Mesh Desc（3D メッシュ）
        ├── Effect Desc（ポストプロセッシング）
        └── Light Desc（照明）

使い方

three_default_descs のDescriptorを使用するには、view.addMesh() / view.addEffect() / view.addLight() を呼び出す前に view.registerMesh() / view.registerEffect() / view.registerLight() でDescriptorクラスを登録する必要があります。

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

const view = new ThreeView();

// Descriptorクラスを登録
view.registerMesh("box", BoxMeshDesc);
view.registerEffect("fxaa", FXAAEffectDesc);
view.registerLight("sun", SunLightDesc);

await view.init({ canvas: document.getElementById("canvas") });

// 登録後に addMesh / addEffect / addLight で使用可能
view.addMesh({ box: { width: 100, height: 100, depth: 100 } });
view.addEffect({ fxaa: {} });
view.addLight({ sun: { intensity: 1.0 } });

提供されるDescriptorの種類

メッシュ

3D メッシュオブジェクトをシーンに追加するDescriptorです。ボックス、球体、円柱などの基本形状や、glTF モデルの読み込みに対応しています。

import { BoxMeshDesc, GLTFModelDesc } from "@navaramap/three-default-descs";

view.registerMesh("box", BoxMeshDesc);
view.registerMesh("gltfModel", GLTFModelDesc);

// 登録後に使用
view.addMesh({ box: { width: 100, height: 100, depth: 100 } });
view.addMesh({ gltfModel: { url: "model.glb" } });

詳細は Mesh Desc Reference を参照してください。

エフェクト

ポストプロセッシングエフェクトを適用するDescriptorです。アンチエイリアス、SSAO、SSR など、豊富なエフェクトを提供します。

import { FXAAEffectDesc, SSAOEffectDesc } from "@navaramap/three-default-descs";

view.registerEffect("fxaa", FXAAEffectDesc);
view.registerEffect("ssao", SSAOEffectDesc);

// 登録後に使用
view.addEffect({ fxaa: {} });
view.addEffect({ ssao: {} });

詳細は Effect Desc Reference を参照してください。

ライト

シーンの照明を管理するDescriptorです。太陽光、環境光、ライトプローブなどを提供します。

import { SunLightDesc, AmbientLightDesc } from "@navaramap/three-default-descs";

view.registerLight("sun", SunLightDesc);
view.registerLight("ambient", AmbientLightDesc);

// 登録後に使用
view.addLight({ sun: { intensity: 1.0, castShadow: true } });
view.addLight({ ambient: { intensity: 0.3 } });

詳細は Light Desc Reference を参照してください。