From 6175c4b3905d64bf567c32c01c353f774d166638 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Tue, 26 Aug 2025 21:56:55 +0200
Subject: [PATCH] docs: add tone mapping in the bloom example

---
 docs/components/ExampleEditor.vue                 |  2 +-
 docs/examples/gpgpu/boids/index.ts                | 15 ++++++---------
 docs/examples/gpgpu/particles/index.ts            | 13 +++++--------
 .../post-processing/builtin-bloom/dots.frag       |  4 ++--
 .../post-processing/builtin-bloom/index.ts        | 14 ++++++++++----
 docs/examples/textures/video/index.ts             |  8 +++-----
 6 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/docs/components/ExampleEditor.vue b/docs/components/ExampleEditor.vue
index 79179e5..60e3c4b 100644
--- a/docs/components/ExampleEditor.vue
+++ b/docs/components/ExampleEditor.vue
@@ -7,7 +7,7 @@
       ...props,
       deps: {
         ...deps,
-        usegl: '0.7.0',
+        usegl: '0.8.0',
       },
     }"
   >
diff --git a/docs/examples/gpgpu/boids/index.ts b/docs/examples/gpgpu/boids/index.ts
index dee0af8..560f57a 100644
--- a/docs/examples/gpgpu/boids/index.ts
+++ b/docs/examples/gpgpu/boids/index.ts
@@ -67,17 +67,14 @@ const renderPass = useWebGLCanvas({
   transparent: true,
 });
 
-// Wait for the canvas to be resized to avoid a flash at the first renders
-renderPass.onCanvasReady(() => {
-  useLoop(({ deltaTime }) => {
-    velocities.uniforms.uDeltaTime = deltaTime / 500;
-    velocities.render();
+useLoop(({ deltaTime }) => {
+  velocities.uniforms.uDeltaTime = deltaTime / 500;
+  velocities.render();
 
-    positions.uniforms.uDeltaTime = deltaTime / 500;
-    positions.render();
+  positions.uniforms.uDeltaTime = deltaTime / 500;
+  positions.render();
 
-    renderPass.render();
-  });
+  renderPass.render();
 });
 
 const pane = new Pane({ title: "Uniforms", expanded: false });
diff --git a/docs/examples/gpgpu/particles/index.ts b/docs/examples/gpgpu/particles/index.ts
index 690960f..69ede63 100644
--- a/docs/examples/gpgpu/particles/index.ts
+++ b/docs/examples/gpgpu/particles/index.ts
@@ -43,7 +43,7 @@ const positions = usePingPongFBO(gl, {
         /* G */ Math.random() * 0.2 - 0.1,
         /* B */ 0,
         /* A */ 0,
-      ]),
+      ])
     ),
   },
   dataTexture: {
@@ -86,11 +86,8 @@ const renderPass = useWebGLCanvas({
   transparent: true,
 });
 
-// Wait for the canvas to be resized to avoid a flash at the first renders
-renderPass.onCanvasReady(() => {
-  useLoop(({ deltaTime }) => {
-    positions.uniforms.uDeltaTime = deltaTime / 500;
-    positions.render();
-    renderPass.render();
-  });
+useLoop(({ deltaTime }) => {
+  positions.uniforms.uDeltaTime = deltaTime / 500;
+  positions.render();
+  renderPass.render();
 });
diff --git a/docs/examples/post-processing/builtin-bloom/dots.frag b/docs/examples/post-processing/builtin-bloom/dots.frag
index ec05b23..bc4f67f 100644
--- a/docs/examples/post-processing/builtin-bloom/dots.frag
+++ b/docs/examples/post-processing/builtin-bloom/dots.frag
@@ -22,9 +22,9 @@ void main() {
     offset += atan(4. * r, ringRadius);
   }
 
-  // important !
+  // important!
   // - the colors need to be in linear space for the bloom calculation to be correct
-  // - there needs to be a final pass to convert linear RGB back to sRGB
+  // - 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);
diff --git a/docs/examples/post-processing/builtin-bloom/index.ts b/docs/examples/post-processing/builtin-bloom/index.ts
index 06e1d64..d30e193 100644
--- a/docs/examples/post-processing/builtin-bloom/index.ts
+++ b/docs/examples/post-processing/builtin-bloom/index.ts
@@ -1,17 +1,23 @@
-import { useWebGLCanvas, bloom, linearToSRGB } from "usegl";
+import { useWebGLCanvas, bloom, hableToneMapping } from "usegl";
 import { Pane } from "tweakpane";
 import fragment from "./dots.frag?raw";
 import "./styles.css";
 
 const bloomEffect = bloom();
+const toneMapping = hableToneMapping({ exposure: 3 });
 
 useWebGLCanvas({
   canvas: "#glCanvas",
   fragment,
-  postEffects: [bloomEffect, linearToSRGB()],
+  postEffects: [bloomEffect, toneMapping],
 });
 
 // You can dynamically update the uniforms of an effect pass, like any other pass
 const pane = new Pane({ title: "Uniforms" });
-pane.addBinding(bloomEffect.uniforms, "uRadius", { min: 0, max: 1 });
-pane.addBinding(bloomEffect.uniforms, "uMix", { min: 0, max: 1 });
+
+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 });
diff --git a/docs/examples/textures/video/index.ts b/docs/examples/textures/video/index.ts
index 6ea4650..0b6c02b 100644
--- a/docs/examples/textures/video/index.ts
+++ b/docs/examples/textures/video/index.ts
@@ -1,10 +1,6 @@
 import { loadVideoTexture, useWebGLCanvas } from "usegl";
 import "./styles.css";
 
-const texture = loadVideoTexture(
-  "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-);
-
 useWebGLCanvas({
   canvas: "#glCanvas",
   fragment: /* glsl */ `
@@ -21,6 +17,8 @@ useWebGLCanvas({
     }
   `,
   uniforms: {
-    uTexture: texture,
+    uTexture: loadVideoTexture(
+      "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+    ),
   },
 });