Impulse

One-off camera shakes from events like explosions and hits.

Fire an impulse from anywhere in your game, and every camera listening to it reacts. Impulses live in an ImpulseField. The shared impulseField is enough unless you want separate event streams:

import { impulseField, ImpulseShapes } from '@pmndrs/klipp';

function onExplosion(position: [number, number, number]) {
  impulseField.generate({
    position,
    direction: [0, 0.5, 0],
    shape: ImpulseShapes.explosion,
    radius: 5,
    dissipationDistance: 15,
  });
}

A camera reacts once it has an ImpulseListener, a Noise.

Generating an impulse

Option	Description	Default
`position`	Where the impulse happens, in world space.
`direction`	Which way, and how far, the camera gets pushed at the peak. A bigger vector is a stronger kick.	`[0, 0, 0]`
`shape`	How the strength changes over time: `ImpulseShapes.recoil`, `bump`, `explosion`, `rumble`, or your own `(t) => number`.	`ImpulseShapes.bump`
`duration`	Length in seconds.	`0.4`
`radius`	Distance from `position` where the impulse is felt at full strength.	`0`
`dissipationDistance`	Distance beyond `radius` over which it fades out. `0` means it's felt everywhere.	`0`
`propagationSpeed`	How fast it travels, in units per second, so faraway cameras feel it later.	`Infinity`
`channel`	Bitmask to target specific listeners. See `channelMask` below.	`1`

Listener settings

Setting	Description	Default
`gain`	Multiplies the impulse strength. `0` mutes this listener.	`1`
`shake`	Adds a rattle on top of the push. See below.
`cameraSpace`	Treat `direction` relative to the camera instead of the world. See below.	`false`
`channelMask`	Only react to impulses where `channel & channelMask` is not `0`.	`1`
`field`	A separate `ImpulseField` to listen to instead of the shared `impulseField`.	`impulseField`

Adding a rattle

An impulse on its own only pushes the camera. shake adds rotation and jitter that grows and fades with it. It's a BasicMultiChannelPerlin whose amplitudeGain follows the impulse strength.

By default direction is in world space, which suits explosions: the camera gets pushed away from where it happened. For recoil or a landing thump, use cameraSpace so the same direction always kicks the same way on screen.

Usage

import { ImpulseListenerNoise } from '@pmndrs/klipp';

camera.addNoise(new ImpulseListenerNoise());

Adding a rattle

import { BasicMultiChannelPerlinNoise } from '@pmndrs/klipp';

const shake = new BasicMultiChannelPerlinNoise({ positionAmplitude: [0.1, 0.1, 0.1], rotationAmplitude: [4, 4, 4] });
camera.addNoise(new ImpulseListenerNoise({ shake }));

Camera-relative

impulseField.generate({ position: [0, 0, 0], direction: [0, 0.3, 0.1], shape: ImpulseShapes.recoil });

camera.addNoise(new ImpulseListenerNoise({ cameraSpace: true }));

import { ImpulseListenerNoise } from '@pmndrs/klipp';

camera.addNoise(new ImpulseListenerNoise());

Adding a rattle

import { Vector3 } from 'three';
import { BasicMultiChannelPerlinNoiseThree } from '@pmndrs/klipp/three';

const shake = new BasicMultiChannelPerlinNoiseThree({ positionAmplitude: new Vector3(0.1, 0.1, 0.1), rotationAmplitude: new Vector3(4, 4, 4) });
camera.addNoise(new ImpulseListenerNoise({ shake }));

Camera-relative

impulseField.generate({ position: [0, 0, 0], direction: [0, 0.3, 0.1], shape: ImpulseShapes.recoil });

camera.addNoise(new ImpulseListenerNoise({ cameraSpace: true }));

import { Noise } from '@pmndrs/klipp/react';

<VirtualCamera name="follow" priority={10}>
  <Body.Follow target={playerRef} offset={[0, 3, 8]} />
  <Aim.HardLookAt target={playerRef} />
  <Noise.ImpulseListener />
</VirtualCamera>

ref gives you the ImpulseListenerNoise.

Note

With frameloop="demand", call invalidate() after generate(). See On-demand rendering.

Adding a rattle

shake takes the noise's settings instead of the noise itself:

<Noise.ImpulseListener shake={{ positionAmplitude: [0.1, 0.1, 0.1], rotationAmplitude: [4, 4, 4] }} />

Camera-relative

<Noise.ImpulseListener cameraSpace />

Edit this page

Generating an impulse

Listener settings

Adding a rattle

Camera-relative impulses

Usage