BasicMultiChannelPerlin

Smooth, continuous camera shake.

Smooth, random shake on each position and rotation axis, relative to the camera: X is left/right, Y is up/down, Z is forward/back. Nothing shakes until you set an amplitude.

Settings

Setting	Description	Default
`positionAmplitude`	How far the camera moves on each axis.	`[0, 0, 0]`
`positionFrequency`	How fast the position shakes on each axis.	`[1, 1, 1]`
`rotationAmplitude`	How far the camera turns on each axis, in degrees.	`[0, 0, 0]`
`rotationFrequency`	How fast the rotation shakes on each axis.	`[1, 1, 1]`
`amplitudeGain`	Multiplies all amplitudes. Set to `0` to turn the shake off.	`1`
`frequencyGain`	Multiplies all frequencies.	`1`
`amplitudeDamping`	Seconds to fade to a new `amplitudeGain`, instead of switching instantly.	`0`
`seed`	Same seed, same shake. Read once on creation.	random

Fading in and out

Change amplitudeGain with amplitudeDamping set, and the shake fades smoothly instead of starting or stopping abruptly.

Layering

For a slow sway plus a fast jitter, add two of them with different settings.

Usage

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

const shake = new BasicMultiChannelPerlinNoise({
  positionAmplitude: [0.05, 0.05, 0],
  rotationAmplitude: [0.3, 0.3, 0],
  frequencyGain: 2,
});
camera.addNoise(shake);

Fading in and out

shake.amplitudeDamping = 0.5;
shake.amplitudeGain = engineRunning ? 1 : 0;

Layering

camera.addNoise(new BasicMultiChannelPerlinNoise({ rotationAmplitude: [1, 1, 0], frequencyGain: 0.3 }));
camera.addNoise(new BasicMultiChannelPerlinNoise({ positionAmplitude: [0.02, 0.02, 0], frequencyGain: 8 }));

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

const shake = new BasicMultiChannelPerlinNoiseThree({
  positionAmplitude: new Vector3(0.05, 0.05, 0),
  rotationAmplitude: new Vector3(0.3, 0.3, 0),
  frequencyGain: 2,
});
camera.addNoise(shake);

Fading in and out

shake.amplitudeDamping = 0.5;
shake.amplitudeGain = engineRunning ? 1 : 0;

Layering

camera.addNoise(new BasicMultiChannelPerlinNoiseThree({ rotationAmplitude: new Vector3(1, 1, 0), frequencyGain: 0.3 }));
camera.addNoise(new BasicMultiChannelPerlinNoiseThree({ positionAmplitude: new Vector3(0.02, 0.02, 0), frequencyGain: 8 }));

<Noise.BasicMultiChannelPerlin
  positionAmplitude={[0.05, 0.05, 0]}
  rotationAmplitude={[0.3, 0.3, 0]}
  frequencyGain={2}
/>

ref gives you the BasicMultiChannelPerlinNoiseThree.

Fading in and out

<Noise.BasicMultiChannelPerlin
  positionAmplitude={[0.1, 0.1, 0]}
  amplitudeGain={engineRunning ? 1 : 0}
  amplitudeDamping={0.5}
/>

Layering

<Noise.BasicMultiChannelPerlin rotationAmplitude={[1, 1, 0]} frequencyGain={0.3} />
<Noise.BasicMultiChannelPerlin positionAmplitude={[0.02, 0.02, 0]} frequencyGain={8} />

Edit this page