docs: add tone mapping in the bloom example

Author: jsulpis

docs/components/ExampleEditor.vue

@@ -7,7 +7,7 @@
       ...props,
       deps: {
         ...deps,
-        usegl: '0.7.0',
+        usegl: '0.8.0',
       },
     }"
   >

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 });

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();
 });

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);

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 });

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"
+    ),
   },
 });