Documentation
Discussions

PostEffects

<StandardPostProcessing>

This component enables us to add support for additional postEffect passes to the Viewer component.

Prop List

NameTypeStatus
sao{SAOProps}Optional
bloomBloomPropsOptional
exposureExposurePropsOptional
toneMappingToneMappingPropsOptional
antiAliasingAntiAliasingPropsOptional
colorCorrectionColorCorrectionPropsOptional
backgroundBackgroundPropsOptional

sao: {SAOProps} - Optional

This option adds the SAO (Screen Ambient Occlusion) pass to the player, controlled by the following options:

export type SAOProps = {
    intensity?: number;
    blur?: boolean;
    blurRadius?: number;
    worldRadius?: number;
    numSamples?: number;
    edgeSharpness?: number;
    threshold?: number;
};

bloom: BloomProps - Optional

This option adds the Bloom pass to the player, controlled by the following options:

export type BloomProps = {
    intensity?: number;
    radius?: number;
    threshold?: number;
};

exposure: ExposureProps - Optional

This option controls the overall exposure of the visuals in the player, with the following options:

export type ExposureProps = {
    exposure?: number;
};

toneMapping: ToneMappingProps - Optional

The tonemapping controls how the overall dynamic range of values is interpreted on the screen. There are several options between different looks:

export declare enum ToneMappingMode {
    Uncharted = "filmic",
    ACES = "aces",
    Linear = "linear",
    Reinhard = "reinhard",
    Reinhard2 = "reinhard2",
    Reinhard2Adaptive = "reinhard-adaptive",
    Cineon = "cineon",
    AGX = "agx"
}

export type ToneMappingProps = {
    mode?: ToneMappingMode;
    whitePoint?: number;
    middleGrey?: number;
    minLuminance?: number;
    maxLuminance?: number;
    averageLuminance?: number;
};

antiAliasing: AntiAliasingProps - Optional

The antialiasing controls how the pixels are interpolated to create smooth edges. It comes with the following different modes:

export declare enum AntiAliasingMode {
    None = "none",
    FXAA = "fxaa",
    MSAA = "msaa"
}
export type AntiAliasingProps = {
    mode?: AntiAliasingMode;
    msaaSamples?: number;
};

colorCorrection: ColorCorrectionProps - Optional

ColorCorrection allows us to adjust the overall contrast and colours of the player, for a more stylized look, with the following options:

export type ColorLevelProps = {
    saturation?: number;
    contrast?: number;
    gain?: number;
    tint?: Color | string;
};
export type ColorLevel = 'shadows' | 'midtones' | 'highlights' | 'master';
export type ColorCorrectionProps = {
    midtonesRange?: [number, number];
} & Partial<Record<ColorLevel, ColorLevelProps>>;

background: BackgroundProps - Optional

This option allows us to choose the options for the background of the player, as a combination of a solid color and transparency level.

When the component is added, this overrides the background of the player. If you wish to return to a transparent background, then set this background prop to alpha: 0.

export type BackgroundProps = {
    color?: string | Color;
    alpha?: number;
};

Example

In the following example we do the following:

  1. Switch off SAO and Bloom from the default modes
  2. Set the Tonemapping to filmic mode
  3. AntiAliasing to MSAAx4
  4. Set the Background to fully transparent
  5. Use colorCorrection to make the visuals a contrasty black and white image.
<Viewer
  auth={auth}
  ui={true}
  resolver={UnifiedResolver({
    cacheScope: "v1",
    optimize: false,
  })}
>
  <OrbitControls />
  <MyScene assetId={"b1571ea4-e7f3-400f-ba58-b875b382a4a5"} />
  <StandardPostProcessing
    sao={{ intensity: 0 }}
    bloom={{ intensity: 0 }}
    toneMapping={{ mode: ToneMappingMode.Uncharted }}
    antiAliasing={{ mode: AntiAliasingMode.MSAA, msaaSamples: 4 }}
    colorCorrection={{ master: { saturation: 0, contrast: 1.3 } }}
    background={{ alpha: 0 }}
  />
</Viewer>