# VignetteEffect

Class · extends [`CameraFrameEffect`](https://api.playcanvas.com/engine/classes/CameraFrameEffect.md) · category: Graphics

Source: https://github.com/playcanvas/engine/blob/64089771243fe28a9b9d2b4de538b99b07c75097/src/extras/effects/vignette/vignette-effect.js#L24

The vignette effect, a postprocessing technique that darkens the image edges, creating a gradual
falloff in brightness from the center outward. The effect can be also reversed, making the center
of the image darker than the edges, by specifying the outer distance smaller than the inner
distance.

Applied in display-referred space, after tone mapping, so that the vignette color is reached
exactly regardless of the tone mapping in use.

Every [CameraFrame](https://api.playcanvas.com/engine/classes/CameraFrame.md) constructs and registers one, available as [CameraFrame#vignette](https://api.playcanvas.com/engine/classes/CameraFrame.md#vignette).

## Constructors

### constructor

```ts
new VignetteEffect(device: GraphicsDevice)
```

**Parameters**

- `device` ([`GraphicsDevice`](https://api.playcanvas.com/engine/classes/GraphicsDevice.md)): The graphics device.

## Properties

### color

```ts
color: Color
```

The color of the vignette effect. Defaults to black.

### curvature

```ts
curvature: number = 0.5
```

The curvature of the vignette effect, 0.01-10 range. The vignette is rendered using a
rectangle with rounded corners, and this parameter controls the curvature of the corners.
Value of 1 represents a circle. Smaller values make the corners more square, while larger
values make them more rounded. Defaults to 0.5.

### inner

```ts
inner: number = 0.5
```

The inner distance of the vignette effect measured from the center of the screen, 0-3 range.
This is where the vignette effect starts. Value larger than 1 represents the value off
screen, which allows more control. Defaults to 0.5, representing half the distance from
center.

### intensity

```ts
intensity: number = 0
```

The intensity of the vignette effect, 0-1 range. Defaults to 0, making it disabled.

### outer

```ts
outer: number = 1
```

The outer distance of the vignette effect measured from the center of the screen, 0-3 range.
This is where the vignette reaches full intensity. Value larger than 1 represents the value
off screen, which allows more control. Defaults to 1, representing the full screen.

## Accessors

### active

```ts
get active(): boolean
```

Gets whether the effect contributes to the frame. A zero intensity disables it, the
intensity being the effect's on/off control.

## Methods

### update

```ts
update(): void
```

Applies the effect's parameters. Called by [CameraFrame#update](https://api.playcanvas.com/engine/classes/CameraFrame.md#update) while the effect is
active: set the uniform values with [CameraFrameEffect#setUniform](https://api.playcanvas.com/engine/classes/CameraFrameEffect.md#setuniform) here, and the
defines which depend on the parameters.
Everything it sets is what the frames rendered until the next update use.

## Inherited from [CameraFrameEffect](https://api.playcanvas.com/engine/classes/CameraFrameEffect.md)

- `cameraFrame: CameraFrame | null = null`
- `device: GraphicsDevice`
- `enabled: boolean = true`
- `get cameraExposureScale(): number`
- `get chunkName(): string`
- `get debugViews(): string[]`
- `get defineName(): string`
- `get entryPoint(): string`
- `get glsl(): string | null`
- `get id(): string`
- `get requires(): string[]`
- `get slot(): string | null`
- `get wgsl(): string | null`
- `buildKey(): string`
- `createPasses(resources: CameraFrameEffectResources, passes: CameraFrameEffectPasses): void`
- `destroy(): void`
- `destroyPasses(): void`
- `frameUpdate(frame: CameraFrameEffectContext): void`
- `getChunk(shaderLanguage: string): string | null`
- `resolveScene(scene: CameraFrameEffectScene): void`
- `setDefine(name: string, value: any): void`
- `setUniform(name: string, value: number | number[] | ArrayBufferView<ArrayBufferLike> | Texture): void`