---
url: /examples/post-processing-builtin/bloom.md
description: >-
Combine the built-in bloom and tone-mapping effects to add glow and exposure
control.
---
::: example-editor {deps=tweakpane@^4.0.5}
```ts
import { bloom, glCanvas, hableToneMapping } from "@radiancejs/gl";
import { Pane } from "tweakpane";
import fragment from "./dots.frag?raw";
import "./styles.css";
const bloomEffect = bloom();
const toneMapping = hableToneMapping({ exposure: 3 });
glCanvas({
canvas: "#glCanvas",
fragment,
uniforms: {
uTime: ({ time }) => time / 500,
},
postEffects: [bloomEffect, toneMapping],
});
// You can dynamically update the uniforms of an effect pass, like any other pass
const pane = new Pane({ title: "Uniforms" });
const bloomUniforms = pane.addFolder({ title: "Bloom" });
bloomUniforms.addBinding(bloomEffect.uniforms, "uRadius", { min: 0, max: 1 });
bloomUniforms.addBinding(bloomEffect.uniforms, "uMix", { min: 0, max: 1 });
const toneMappingUniforms = pane.addFolder({ title: "Tone Mapping" });
toneMappingUniforms.addBinding(toneMapping.uniforms, "uExposure", { min: 0, max: 5 });
```
```frag
in vec2 vUv;
uniform float uTime;
const vec2 center = vec2(0.5, 0.5);
const float ringRadius = 0.3;
const float dotRadius = 0.05;
float circle(vec2 uv, vec2 center, float radius) {
float d = length(uv - center);
return 1.0 - smoothstep(radius - 0.003, radius + 0.003, d);
}
void main() {
vec3 color = vec3(0.0);
float t = - uTime * 0.15;
float offset = 0.;
for (int i = 0; i < 8; i++) {
vec2 p = center + vec2(cos(t + offset), sin(t + offset)) * ringRadius;
float r = dotRadius * (1.8 - 0.24 * float(i));
color += vec3(1., vUv) * circle(vUv, p, r);
offset += atan(4. * r, ringRadius);
}
// important!
// - the colors need to be in linear space for the bloom calculation to be correct
// - a final pass is needed to convert linear RGB back to sRGB (can be done with a builtin tone mapping pass)
color = pow(color, vec3(2.2));
gl_FragColor = vec4(color, 1.0);
}
```
```css
html {
color-scheme: light dark;
}
body {
margin: 0;
height: 100svh;
display: grid;
place-items: center;
}
canvas {
width: min(90svmin, 900px);
aspect-ratio: 1;
display: block;
border-radius: 8px;
border: 1px solid rgb(128 128 128 / 0.4);
}
```
```html
RadianceJS Example
```
:::