`<StandardPostProcessing>`

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

Prop List

Name	Type	Status
`sao`	`{SAOProps}`	Optional
`bloom`	`BloomProps`	Optional
`exposure`	`ExposureProps`	Optional
`toneMapping`	`ToneMappingProps`	Optional
`antiAliasing`	`AntiAliasingProps`	Optional
`colorCorrection`	`ColorCorrectionProps`	Optional
`background`	`BackgroundProps`	Optional

`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 <StandardPostProcessing> 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:

Switch off SAO and Bloom from the default modes
Set the Tonemapping to filmic mode
AntiAliasing to MSAAx4
Set the Background to fully transparent
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>