Effect Descriptor

EffectDesc is a descriptor type for applying post-processing effects to the rendering pipeline. You can add various visual effects such as anti-aliasing, depth of field, tone mapping, and more.

Note

This page covers the effects provided by @navaramap/three_default_descs. A few effects that are tightly coupled to the rendering pipeline (e.g. SkyEnvMapEffectDesc) live in @navaramap/three core instead — see Effect Descriptor (three core).

Available EffectDescriptor Types

The following EffectDescriptor types are available in navara_three:

Descriptor Type	Description
AerialPerspectiveEffectDesc	An effect that simulates light scattering and transmittance through the atmosphere
CloudsEffectDesc	An effect that renders real-time volumetric clouds
ColorGradingLUTEffectDesc	An effect that applies color grading using a LUT
DepthOfFieldEffectDesc	An effect that applies bokeh based on the camera’s focal plane
FogLightEffectDesc	An effect that generates volumetric fog from point lights
FXAAEffectDesc	An effect that applies FXAA (Fast Approximate Anti-Aliasing)
LensFlareEffectDesc	An effect that generates lens flares from the sun and moon
RainDropEffectDesc	An effect that applies raindrop refraction to the screen
SelectiveBloomEffectDesc	An effect that applies selective bloom
SelectiveOutlineEffectDesc	An effect that applies selective outlines
SMAAEffectDesc	An effect that applies SMAA (Subpixel Morphological Anti-Aliasing)
SSAOEffectDesc	An effect that applies screen-space ambient occlusion
SSREffectDesc	An effect that generates real-time screen-space reflections
ToneMappingEffectDesc	An effect that performs HDR to LDR color adjustment

Basic Usage

Effect Descriptors are added by registering the descriptor class and then calling the view.addEffect() method:

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

const view = new ThreeView();

// Register the descriptor class
view.registerEffect("aerialPerspective", AerialPerspectiveEffectDesc);

await view.init();

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

Common Properties

All Effect Descriptors have the following basic settings:

• id: A unique identifier for the object
• visible: Toggles the object’s visibility

Refer to each descriptor type’s documentation for detailed usage.