About

What is three_default_descs?

three_default_descs is a default Descriptor implementation package for the Descriptor system provided by navara_three. It offers commonly used Descriptors such as 3D meshes, post-processing effects, and lighting in a ready-to-use form.

Relationship with navara_three

navara_three is the core library that manages adding and managing Descriptors, but it does not include implementations of individual Descriptors. three_default_descs provides the concrete implementations for mesh Descriptors, effect Descriptors, and light Descriptors.

navara_three (core)
  └── three_default_descs (default Descriptor implementations)
        ├── Mesh Desc (3D meshes)
        ├── Effect Desc (post-processing)
        └── Light Desc (lighting)

Usage

To use Descriptors from three_default_descs, you need to register the Descriptor classes with view.registerMesh() / view.registerEffect() / view.registerLight() before calling view.addMesh() / view.addEffect() / view.addLight().

import ThreeView from "@navaramap/three";
import { BoxMeshDesc, FXAAEffectDesc, SunLightDesc } from "@navaramap/three_default_descs";

const view = new ThreeView();

// Register descriptor classes
view.registerMesh("box", BoxMeshDesc);
view.registerEffect("fxaa", FXAAEffectDesc);
view.registerLight("sun", SunLightDesc);

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

// Use after registration
view.addMesh({ box: { width: 100, height: 100, depth: 100 } });
view.addEffect({ fxaa: {} });
view.addLight({ sun: { intensity: 1.0 } });

Tip

If you want to register all default descriptors at once, it is convenient to use DefaultPlugin from three_default_plugin.

Types of Provided Descriptors

Mesh Descs

Descriptors that add 3D mesh objects to the scene. They support basic shapes such as boxes, spheres, and cylinders, as well as loading glTF models.

import { BoxMeshDesc, GLTFModelDesc } from "@navaramap/three_default_descs";

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

// Use after registration
view.addMesh({ box: { width: 100, height: 100, depth: 100 } });
view.addMesh({ gltfModel: { url: "model.glb" } });

See the Mesh Desc Reference for details.

Effect Descs

Descriptors that apply post-processing effects. They provide a rich set of effects including anti-aliasing, SSAO, SSR, and more.

import { FXAAEffectDesc, SSAOEffectDesc } from "@navaramap/three_default_descs";

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

// Use after registration
view.addEffect({ fxaa: {} });
view.addEffect({ ssao: {} });

See the Effect Desc Reference for details.

Light Descs

Descriptors that manage scene lighting. They provide sunlight, ambient light, light probes, and more.

import { SunLightDesc, AmbientLightDesc } from "@navaramap/three_default_descs";

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

// Use after registration
view.addLight({ sun: { intensity: 1.0, castShadow: true } });
view.addLight({ ambient: { intensity: 0.3 } });

See the Light Desc Reference for details.