# GradingEffect

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

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

The color grading effect, a postprocessing technique used to adjust the visual tone of an image.
This effect modifies brightness, contrast, saturation, and overall color balance to achieve a
specific aesthetic or mood.

It also includes a channel mixer, which builds each output channel from a weighted mix of the
red, green and blue input channels. Use it to convert to black and white with custom channel
weights, swap channels, or simulate color vision deficiencies. The mixer is applied first,
followed by the tint, brightness, saturation and contrast.

Applied in linear HDR space, before tone mapping. As the channel mixer is linear, its result
does not depend on the exposure, so it works the same with [AutoExposureEffect](https://api.playcanvas.com/engine/classes/AutoExposureEffect.md).

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

## Constructors

### constructor

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

**Parameters**

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

## Properties

### brightness

```ts
brightness: number = 1
```

The brightness of the grading effect, 0-3 range. Defaults to 1.

### contrast

```ts
contrast: number = 1
```

The contrast of the grading effect, 0.5-1.5 range. Defaults to 1.

### enabled

```ts
enabled: boolean = false
```

Whether grading is enabled. Defaults to false.

### mixerBlue

```ts
mixerBlue: Vec3
```

The channel mixer weights of the blue output channel: how much of the red, green and blue
input channels it is made of, -2 to 2 range per component. Defaults to (0, 0, 1).

**Example**

```ts
// black and white, with the same weights in all three output channels
const grading = cameraFrame.grading;
grading.mixerRed.set(0.5, 0.4, 0.1);
grading.mixerGreen.copy(grading.mixerRed);
grading.mixerBlue.copy(grading.mixerRed);
```

### mixerGreen

```ts
mixerGreen: Vec3
```

The channel mixer weights of the green output channel: how much of the red, green and blue
input channels it is made of, -2 to 2 range per component. Defaults to (0, 1, 0).

### mixerRed

```ts
mixerRed: Vec3
```

The channel mixer weights of the red output channel: how much of the red, green and blue
input channels it is made of, -2 to 2 range per component. Defaults to (1, 0, 0).

**Example**

```ts
// swap the red and blue channels
cameraFrame.grading.mixerRed.set(0, 0, 1);
cameraFrame.grading.mixerBlue.set(1, 0, 0);
```

### saturation

```ts
saturation: number = 1
```

The saturation of the grading effect, 0-2 range. Defaults to 1.

### tint

```ts
tint: Color
```

The tint color of the grading effect. Defaults to white.

## 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`
- `get active(): boolean`
- `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`