@pixi/3d
    Preparing search index...

    Class TiltShiftEffect

    Tilt-shift: a miniature look from a narrow depth of field

    A thin band of depth stays sharp and everything in front of and behind it blurs, the way a macro lens sees a close-up, so a full-size scene reads as a tiny model. A high, angled camera sells it best.

    One pass, but its input needs mipmaps, which cost a mipmap generation each frame and a third more memory. Every property can change every frame.

    view.passes = [new TiltShiftEffect({ focalDepth: 35, maxBlur: 12 })];

    Hierarchy (View Summary)

    Index
    constructor
    enabled inputMips requiredOutputs? stage defaultOptions
    debug focalDepth focalFar focalNear maxBlur
    build destroy
    enabled: boolean

    Whether this pass runs

    Flipping it rebuilds the view's render graph on the next render, which suits a settings toggle but not a change every frame; animate an effect's own properties instead. It can also recompile the view's materials; View3D#passes says when.

    const wireframe = new MeshPass({ name: 'wireframe' });
    view.passes = [wireframe];
    wireframe.enabled = false;
    inputMips: true

    Always true: the blur reads coarse mip levels of its input

    requiredOutputs?: readonly SceneOutput[]

    Extra outputs the view's scene draw writes beside its colour while this pass is enabled

    Each costs the scene draw a texture and the shader work to fill it, and any output makes the view draw its scene into a texture first, as a post effect does. Reach an output's texture with RenderGraph#getSceneOutput, to read it or draw into it.

    const objectIdOutput: SceneOutput = { name: 'objectId', format: 'r32uint' };

    class MyPickingPass extends Pass3D {
      public readonly stage = 'afterTransparent';
      public readonly requiredOutputs = [objectIdOutput];
      public build(): void {}
    }
    stage: EffectStage

    The stage the effect runs at, set by the stage option

    defaultOptions: TiltShiftEffectOptions = ...

    Defaults for every new TiltShiftEffect; an option passed as undefined keeps its default

    TiltShiftEffect.defaultOptions.maxBlur = 8;
    • get debug(): boolean

      Whether to paint the focus settings instead of blurring, to tune them by eye

      Over a dimmed grey copy of the frame, a white line marks the focal plane and green the sharp band. Blurred areas shift toward orange in front of the plane and blue behind it, more so the stronger the blur.

      Returns boolean

      tiltShift.debug = true;
    • set debug(value: boolean): void

      Sets whether to paint the focus settings

      Parameters

      • value: boolean

        true to paint them instead of blurring.

      Returns void

    • get focalDepth(): number

      Distance from the camera to the plane in focus, in world units

      Returns number

      tiltShift.focalDepth = 20 + Math.sin(time) * 5;
    • set focalDepth(value: number): void

      Sets the distance to the plane in focus

      Parameters

      • value: number

        Distance from the camera to the focal plane, in world units.

      Returns void

    • get focalFar(): number

      Distance from the focal plane at which the blur is strongest, in world units

      Returns number

      tiltShift.focalFar = 6;
    • set focalFar(value: number): void

      Sets the distance from the focal plane at which the blur is strongest

      Parameters

      • value: number

        Distance from the focal plane, in world units.

      Returns void

    • get focalNear(): number

      How far either side of the focal plane stays fully sharp, in world units

      Returns number

      tiltShift.focalNear = 1;
    • set focalNear(value: number): void

      Sets how far either side of the focal plane stays fully sharp

      Parameters

      • value: number

        Distance from the focal plane, in world units.

      Returns void

    • get maxBlur(): number

      Blur radius at full strength, in physical pixels on screen

      Returns number

      tiltShift.maxBlur = 20;
    • set maxBlur(value: number): void

      Sets the blur radius at full strength

      Parameters

      • value: number

        Radius in physical pixels on screen.

      Returns void

    • Advanced

      Adds the blur pass for this slot in the chain

      Parameters

      • graph: RenderGraph

        Render graph being built.

      • io: EffectIO

        Input/output handles for this slot in the chain.

      Returns void

      const focused = graph.createColor({ label: 'focused' });
      tiltShift.build(graph, { ...io, output: focused });

    • Releases GPU resources the pass made outside the graph; the base class has none

      The view never calls it, not on replacing view.passes nor on its own destroy, since a pass can be shared. Call it yourself once the pass is retired. Override it only for resources of your own: the render passes added in build go with the view's graph, and a plain UniformGroup needs no release.

      Returns void

      view.passes = [];
      wireframe.destroy();

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods