Blending

Control how Klipp moves from one camera to the next.

When a different camera wins, Klipp blends from the old shot to the new one. By default that takes 2 seconds with an ease-in-out curve. Set defaultBlend when creating Klipp, or change it later on klipp.defaultBlend.

Curve or damping

A blend is one of two kinds:

{ curve: BlendCurves.easeInOut, time: 1 } // takes exactly `time` seconds
{ damping: 0.5, maxSpeed: 20 }           // eases in like a spring, see Damping

Use a curve for scripted, predictable transitions. Use damping for transitions that should feel physical, especially when the target camera is moving.

Set time: 0 for an instant cut.

Curves

Curve	Feels like
`BlendCurves.linear`	Constant speed.
`BlendCurves.easeInOut`	Starts and ends gently.
`BlendCurves.easeIn`	Leaves gently, arrives quickly.
`BlendCurves.easeOut`	Leaves quickly, arrives gently.
`BlendCurves.cubicIn`	Leaves gently, arrives abruptly.
`BlendCurves.cubicOut`	Leaves abruptly, arrives gently.
`BlendCurves.cut`	Holds the old shot, then jumps at the end of `time`.

Any (t) => number function works as a curve too:

{ curve: (t) => t * t * t, time: 1 }

Custom blends

customBlends gives specific camera pairs their own blend. from and to are camera names; leave one out to match any camera.

When several entries match, the most specific one wins: from and to together, then to only, then from only, then defaultBlend. Change them later on klipp.customBlends.

Blend hints

By default the camera moves in a straight line between the two shots. If both shots follow the same target from different sides, that line can pass right through it. Blend hints change the path:

Hint	Effect
`BlendHints.sphericalPosition`	Arcs around the target instead of cutting through it.
`BlendHints.cylindricalPosition`	Arcs around the target horizontally, moves straight vertically.
`BlendHints.ignoreTarget`	Rotates directly between the two shots instead of keeping the target in view during the blend.

A hint is a setting of the camera, and applies to every blend into or out of it. Combine hints with |.

Usage

import { BlendCurves, BlendHints, Klipp, VirtualCamera } from '@pmndrs/klipp';

const klipp = new Klipp({
  defaultBlend: { curve: BlendCurves.easeInOut, time: 1 },
  customBlends: [
    { to: 'closeup', blend: { curve: BlendCurves.linear, time: 0 } },
    { from: 'intro', to: 'gameplay', blend: { damping: 0.8 } },
  ],
});
klipp.defaultBlend = { curve: BlendCurves.linear, time: 0.5 };

Blend hints

const orbit = new VirtualCamera('orbit', { priority: 10, hints: BlendHints.sphericalPosition });
klipp.add(orbit);
orbit.hints = BlendHints.sphericalPosition | BlendHints.ignoreTarget;

import { BlendCurves, BlendHints } from '@pmndrs/klipp';
import { KlippThree, VirtualCameraThree } from '@pmndrs/klipp/three';

const klipp = new KlippThree(camera, {
  defaultBlend: { curve: BlendCurves.easeInOut, time: 1 },
  customBlends: [
    { to: 'closeup', blend: { curve: BlendCurves.linear, time: 0 } },
    { from: 'intro', to: 'gameplay', blend: { damping: 0.8 } },
  ],
});
klipp.defaultBlend = { curve: BlendCurves.linear, time: 0.5 };

Blend hints

const orbit = new VirtualCameraThree('orbit', { priority: 10, hints: BlendHints.sphericalPosition });
klipp.add(orbit);
orbit.hints = BlendHints.sphericalPosition | BlendHints.ignoreTarget;

import { BlendCurves, BlendHints } from '@pmndrs/klipp';

<Klipp
  defaultBlend={{ curve: BlendCurves.easeInOut, time: 1 }}
  customBlends={[
    { to: 'closeup', blend: { curve: BlendCurves.linear, time: 0 } },
    { from: 'intro', to: 'gameplay', blend: { damping: 0.8 } },
  ]}
>

Blend hints

<VirtualCamera name="orbit" priority={10} hints={BlendHints.sphericalPosition | BlendHints.ignoreTarget}>

Edit this page