---
url: /api/passes/compositor/functions/compositor.md
---
# compositor()

```ts
function compositor(params: {
  gl: WebGL2RenderingContext;
  renderPass: RenderPass<any, any>;
  postEffects?: (EffectPass | CompositeEffectPass)[];
}): Compositor;
```

Composes a main pass and post-processing effects into one render graph.

The compositor initializes every pass, creates intermediate targets, resolves
contextual uniform functions, and renders the chain in order. It owns the
lifecycle of supplied effects and intermediate targets.

It manages:

* Initialization of the WebGL context for every pass.
* Automatic creation of intermediate floating-point render targets.
* Supplying `previousPass`, `inputPass`, and frame context to effect uniforms.
* Rendering every effect in the correct order.

## Parameters

### params

Rendering context, main pass, and optional effects.

#### gl

`WebGL2RenderingContext`

WebGL2 context shared by all passes.

#### renderPass

[`RenderPass`](../../renderPass/type-aliases/RenderPass.md)<`any`, `any`>

Main scene pass rendered before post-processing.

#### postEffects?

(
| [`EffectPass`](../../effectPass/type-aliases/EffectPass.md)
| [`CompositeEffectPass`](../../compositeEffectPass/type-aliases/CompositeEffectPass.md))\[] = `[]`

Post-processing effects rendered after the main scene pass.

## Returns

[`Compositor`](../type-aliases/Compositor.md)