From 3ae890cb71cbe3b4200ba93772ff3323ca8b62e3 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Mon, 4 Aug 2025 21:57:09 +0200
Subject: [PATCH 01/15] fix: don't override the render target of an effect pass
 if it already exists

---
 lib/src/hooks/useCompositeEffectPass.ts | 2 +-
 lib/src/hooks/useCompositor.ts          | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/src/hooks/useCompositeEffectPass.ts b/lib/src/hooks/useCompositeEffectPass.ts
index 81ddd13..8374b14 100644
--- a/lib/src/hooks/useCompositeEffectPass.ts
+++ b/lib/src/hooks/useCompositeEffectPass.ts
@@ -28,7 +28,7 @@ export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>
     for (const [index, pass] of effectPasses.entries()) {
       pass.initialize(gl);
 
-      if (index < effectPasses.length - 1) {
+      if (index < effectPasses.length - 1 && pass.target == undefined) {
         pass.setTarget(createRenderTarget(gl));
       }
 
diff --git a/lib/src/hooks/useCompositor.ts b/lib/src/hooks/useCompositor.ts
index b59722a..0aa467a 100644
--- a/lib/src/hooks/useCompositor.ts
+++ b/lib/src/hooks/useCompositor.ts
@@ -6,7 +6,6 @@ import type { CompositeEffectPass, EffectPass, RenderPass } from "../types";
  * The compositor handles the combination of the render pass and the effects:
  * - initialize the gl context and create render targets for all effects
  * - provide each effect with its previousPass and inputPass to use in uniforms
- * - fill the texture uniforms with the previous pass if they are not provided in uniforms
  * - detect the first texture uniform of each effect and, if it has no value provided, fill it with the previous pass
  * - render all passes in the correct order
  */
@@ -23,7 +22,10 @@ export function useCompositor(
 
   for (const [index, effect] of effects.entries()) {
     effect.initialize(gl);
-    effect.setTarget(index === effects.length - 1 ? null : createRenderTarget(gl));
+
+    if (index < effects.length - 1 && effect.target == undefined) {
+      effect.setTarget(createRenderTarget(gl));
+    }
 
     if (isCompositeEffectPass(effect)) {
       const inputPass = previousPass;

From 6cc0db99f66222704ede550c39a7a744778b1059 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Wed, 6 Aug 2025 22:43:15 +0200
Subject: [PATCH 02/15] feat: add srgb to linear rgb color space conversion for
 textures

---
 lib/src/core/texture.ts | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/lib/src/core/texture.ts b/lib/src/core/texture.ts
index 39647a9..8765cda 100644
--- a/lib/src/core/texture.ts
+++ b/lib/src/core/texture.ts
@@ -1,6 +1,11 @@
 export type TextureData = ArrayBufferView | null;
 
-type BaseTextureParams = {
+type MagFilter = "linear" | "nearest";
+type MinFilter = "linear" | "nearest" | "linear-mipmap-linear" | "nearest-mipmap-linear";
+type ColorSpace = "srgb" | "linear-rgb";
+type WrappingMode = "clamp-to-edge" | "repeat" | "mirrored-repeat";
+
+export type BaseTextureParams = {
   /**
    * @default "linear-mipmap-linear" if generateMipmaps is true, "linear" otherwise
    */
@@ -37,6 +42,10 @@ type BaseTextureParams = {
    * @default WebGL2RenderingContext.RGBA
    */
   internalFormat?: number;
+  /**
+   * @default "linear-rgb"
+   */
+  colorSpace?: ColorSpace;
   /**
    * @default WebGL2RenderingContext.RGBA
    */
@@ -75,10 +84,6 @@ export type ImageTextureParams = BaseTextureParams & {
 
 export type TextureParams = DataTextureParams | ImageTextureParams;
 
-type MagFilter = "linear" | "nearest";
-type MinFilter = "linear" | "nearest" | "linear-mipmap-linear" | "nearest-mipmap-linear";
-type WrappingMode = "clamp-to-edge" | "repeat" | "mirrored-repeat";
-
 const minFilterMap: Record<MinFilter, number> = {
   linear: WebGL2RenderingContext.LINEAR,
   nearest: WebGL2RenderingContext.NEAREST,
@@ -118,8 +123,11 @@ export function fillTexture(
   const {
     level = 0,
     flipY = true,
-    internalFormat = WebGL2RenderingContext.RGBA,
     format = WebGL2RenderingContext.RGBA,
+    colorSpace = "linear-rgb",
+    internalFormat = colorSpace === "srgb"
+      ? WebGL2RenderingContext.SRGB8_ALPHA8
+      : WebGL2RenderingContext.RGBA,
     type = WebGL2RenderingContext.UNSIGNED_BYTE,
     generateMipmaps = true,
     anisotropy = navigator.hardwareConcurrency, // in most case between 4 and 12, depending on the hardware range

From 504d6ba30bef719447ac4cc1f966cc8e448ae615 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Wed, 6 Aug 2025 22:49:35 +0200
Subject: [PATCH 03/15] feat: allow to scale the render target of an effect
 pass

---
 lib/src/core/renderTarget.ts       |  7 +++---
 lib/src/hooks/useEffectPass.ts     | 37 ++++++++++++++++++++++++++++--
 lib/src/hooks/useQuadRenderPass.ts |  5 ++--
 lib/src/hooks/useRenderPass.ts     |  6 ++---
 4 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/lib/src/core/renderTarget.ts b/lib/src/core/renderTarget.ts
index dcf5f84..7cf214f 100644
--- a/lib/src/core/renderTarget.ts
+++ b/lib/src/core/renderTarget.ts
@@ -2,9 +2,11 @@ import type { RenderTarget } from "../types";
 import type { DataTextureParams } from "./texture";
 import { fillTexture } from "./texture";
 
+export type RenderTargetParams = Partial<Omit<DataTextureParams, "data">>;
+
 export function createRenderTarget(
   gl: WebGL2RenderingContext,
-  params?: Omit<DataTextureParams, "data">,
+  params?: RenderTargetParams,
 ): RenderTarget {
   let _width = params?.width ?? gl.canvas.width;
   let _height = params?.height ?? gl.canvas.height;
@@ -14,10 +16,10 @@ export function createRenderTarget(
   let _texture = gl.createTexture()!;
   fillTexture(gl, _texture, {
     data: null,
-    ...params,
     width: _width,
     height: _height,
     generateMipmaps: false,
+    ...params,
   });
 
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
@@ -38,7 +40,6 @@ export function createRenderTarget(
     });
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-    gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, width, height);
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, newTexture, 0);
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
diff --git a/lib/src/hooks/useEffectPass.ts b/lib/src/hooks/useEffectPass.ts
index ed5641d..e743e6a 100644
--- a/lib/src/hooks/useEffectPass.ts
+++ b/lib/src/hooks/useEffectPass.ts
@@ -1,9 +1,42 @@
+import type { RenderTargetParams } from "../core/renderTarget";
+import { createRenderTarget } from "../core/renderTarget";
 import type { EffectPass, EffectUniforms } from "../types";
 import type { QuadPassOptions } from "./useQuadRenderPass";
 import { useQuadRenderPass } from "./useQuadRenderPass";
 
+type EffectPassOptions<U extends EffectUniforms> = Omit<QuadPassOptions<U>, "target"> & {
+  /**
+   * Allow to scale the render target texture based on size given to the pass.
+   */
+  resolutionScale?: number;
+  /**
+   * Params to create the render target of the pass.
+   */
+  target?: RenderTargetParams | null;
+};
+
 export function useEffectPass<U extends EffectUniforms>(
-  options: QuadPassOptions<U>,
+  options: EffectPassOptions<U>,
 ): EffectPass<U> {
-  return useQuadRenderPass(undefined, options);
+  const { target, resolutionScale = 1 } = options;
+
+  const renderPass = useQuadRenderPass(undefined, { ...options, target: null });
+
+  const renderPassSetSize = renderPass.setSize;
+  renderPass.setSize = function ({ width, height }) {
+    renderPassSetSize({
+      width: Math.ceil(width * resolutionScale),
+      height: Math.ceil(height * resolutionScale),
+    });
+  };
+
+  const renderPassInitialize = renderPass.initialize;
+  renderPass.initialize = function (gl) {
+    if (target != null && !("framebuffer" in target)) {
+      renderPass.setTarget(createRenderTarget(gl, target));
+    }
+    renderPassInitialize(gl);
+  };
+
+  return renderPass;
 }
diff --git a/lib/src/hooks/useQuadRenderPass.ts b/lib/src/hooks/useQuadRenderPass.ts
index baf9ebf..79fc06d 100644
--- a/lib/src/hooks/useQuadRenderPass.ts
+++ b/lib/src/hooks/useQuadRenderPass.ts
@@ -42,13 +42,12 @@ export function useQuadRenderPass<U extends Uniforms>(
 }
 
 const quadVertexShaderSource = /*glsl*/ `#version 300 es
-
 in vec2 aPosition;
 out vec2 vUv;
 
 void main() {
-   gl_Position = vec4(aPosition, 0.0, 1.0);
-   vUv = (aPosition + 1.0) / 2.0;
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+  vUv = (aPosition + 1.0) / 2.0;
 }
 `;
 
diff --git a/lib/src/hooks/useRenderPass.ts b/lib/src/hooks/useRenderPass.ts
index fb8afff..b40e089 100644
--- a/lib/src/hooks/useRenderPass.ts
+++ b/lib/src/hooks/useRenderPass.ts
@@ -37,7 +37,7 @@ export function useRenderPass<U extends Uniforms>(
     transformFeedbackVaryings,
   }: RenderPassOptions<U>,
 ): RenderPass<U> {
-  /**
+  /*
    * INIT
    */
 
@@ -77,7 +77,7 @@ export function useRenderPass<U extends Uniforms>(
     initialize(gl);
   }
 
-  /**
+  /*
    * UPDATE
    */
 
@@ -96,7 +96,7 @@ export function useRenderPass<U extends Uniforms>(
     _target = target;
   }
 
-  /**
+  /*
    * RENDER
    */
 

From 0a2f8ddbdce671c100d177f097f8223cee531310 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Sat, 9 Aug 2025 15:26:25 +0200
Subject: [PATCH 04/15] feat: add bloom effect

---
 .../src/pages/post-processing/bloom.astro     |  86 ++-----
 lib/playground/src/shaders/bloom.ts           | 222 +++---------------
 lib/src/effects/bloom.ts                      |  85 +++++++
 lib/src/effects/glsl/combine.frag             |  22 ++
 lib/src/effects/glsl/downsample.frag          |  34 +++
 lib/src/effects/glsl/sample.vert              |  12 +
 lib/src/effects/glsl/upsample.frag            |  36 +++
 lib/src/index.ts                              |   2 +
 8 files changed, 239 insertions(+), 260 deletions(-)
 create mode 100644 lib/src/effects/bloom.ts
 create mode 100644 lib/src/effects/glsl/combine.frag
 create mode 100644 lib/src/effects/glsl/downsample.frag
 create mode 100644 lib/src/effects/glsl/sample.vert
 create mode 100644 lib/src/effects/glsl/upsample.frag

diff --git a/lib/playground/src/pages/post-processing/bloom.astro b/lib/playground/src/pages/post-processing/bloom.astro
index a1164bc..7e38224 100644
--- a/lib/playground/src/pages/post-processing/bloom.astro
+++ b/lib/playground/src/pages/post-processing/bloom.astro
@@ -3,78 +3,25 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-  import { useEffectPass, useWebGLCanvas, useCompositeEffectPass } from "usegl";
-  import { fragment, mipmapsShader, blurShader, combineShader } from "../../shaders/bloom";
+  import { useWebGLCanvas, loadTexture, bloom } from "usegl";
+  import { fragment } from "../../shaders/bloom";
   import { incrementRenderCount } from "../../components/renderCount";
 
-  const mipmaps = useEffectPass({
-    fragment: mipmapsShader,
-    uniforms: {
-      uThreshold: 0.2,
-    },
-  });
-
-  const horizontalBlur = useEffectPass({
-    fragment: blurShader,
-    uniforms: {
-      uDirection: [1, 0],
-    },
-  });
-
-  const verticalBlur = useEffectPass({
-    fragment: blurShader,
-    uniforms: {
-      uDirection: [0, 1],
-    },
-  });
-
-  const combine = useEffectPass({
-    fragment: combineShader,
-    uniforms: {
-      uImage: ({ inputPass }) => inputPass.target!.texture,
-      uBloomTexture: () => verticalBlur.target!.texture,
-      uMix: 0,
-    },
-  });
-
-  const bloomEffect = useCompositeEffectPass({
-    mipmaps,
-    horizontalBlur,
-    verticalBlur,
-    combine,
-  });
-
-  bloomEffect.passes.combine.uniforms.uMix = 1;
-
-  const vignetteEffect = useEffectPass({
-    fragment: /* glsl */ `
-			uniform sampler2D uTexture;
-			varying vec2 vUv;
-
-			#define SIZE .6      // (0.0 - 1.0)
-			#define ROUNDNESS .7 // (0.0 = rectangle, 1.0 = round)
-			#define STRENGTH .6  // (0.0 - 1.0)
-
-			float vignette() {
-				vec2 centered = vUv * 2.0 - 1.0;
-				float circDist = length(centered);
-				float rectDist = max(abs(centered.x), abs(centered.y));
-				float dist = mix(rectDist, circDist, ROUNDNESS);
-				return 1. - smoothstep(SIZE, SIZE * 2., dist) * STRENGTH;
-			}
-
-			void main() {
-				vec4 color = texture(uTexture, vUv);
-        color.rgb *= vignette();
-				gl_FragColor = color;
-			}
-		`,
-  });
+  const radius = 0.65;
+  const levels = 8;
+  const mix = 0.5;
 
   const { onAfterRender } = useWebGLCanvas({
     canvas: "#glCanvas",
     fragment: fragment,
-    postEffects: [vignetteEffect, bloomEffect],
+    uniforms: {
+      uTexture: loadTexture(
+        "https://st.depositphotos.com/2300153/2648/i/950/depositphotos_26489675-stock-photo-dark-room-with-window.jpg",
+        // "https://st.depositphotos.com/8521256/56706/v/600/depositphotos_567060820-stock-video-white-picture-of-rectangle-on.jpg",
+        { colorSpace: "srgb" }
+      ),
+    },
+    postEffects: [bloom({ levels, radius, mix })],
   });
 
   onAfterRender(incrementRenderCount);
@@ -83,3 +30,10 @@ import Layout from "../../layouts/Layout.astro";
 <Layout title="Bloom">
   <canvas id="glCanvas"></canvas>
 </Layout>
+
+<style>
+  canvas {
+    width: 600px;
+    height: 600px;
+  }
+</style>
diff --git a/lib/playground/src/shaders/bloom.ts b/lib/playground/src/shaders/bloom.ts
index b16b2f5..37d5341 100644
--- a/lib/playground/src/shaders/bloom.ts
+++ b/lib/playground/src/shaders/bloom.ts
@@ -1,18 +1,6 @@
-export const vertex = /*glsl*/ `
-  in vec2 a_position;
-  in float a_size;
-  out vec2 vUv;
-  uniform vec2 uResolution;
-
-  void main() {
-    vUv = (a_position + 1.0) / 2.0;
-    gl_Position = vec4(a_position, 0.0, 1.0);
-    gl_PointSize = a_size;
-  }
-`;
-
 export const fragment = /*glsl*/ `
   in vec2 vUv;
+  uniform sampler2D uTexture;
 
   float sdCircle(vec2 p, float r) {
     return length(p) - r;
@@ -23,187 +11,33 @@ export const fragment = /*glsl*/ `
   }
 
   void main() {
-    vec3 color = vec3(0, 0.07, 0.15);
+    // circles
+    vec3 color = vec3(0, 0.02, 0.06);
     color += drawCircle(vUv - vec2(.4), .1, vec3(vUv, 1.));
-    color += drawCircle(vUv - vec2(.65, .65), .02, vec3(vUv, 1.));
-    color += drawCircle(vUv - vec2(.75, .4), .04, vec3(vUv, 1.));
-    gl_FragColor.rgba = vec4(color, 1.);
+    color += drawCircle(vUv - vec2(.5, .68), .003, vec3(vUv, 1.));
+    color += drawCircle(vUv - vec2(.66, .6), .015, vec3(vUv, 1.));
+    color += drawCircle(vUv - vec2(.75, .4), .03, vec3(vUv, 1.));
+    gl_FragColor.rgba = vec4(color * 1.5, 1.);
+    gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(2.2));
+
+    // grid of dots
+    // vec2 center = vec2(0.5, 0.5);
+    // vec2 size = vec2(0.05); // Half the size of each small square
+    // vec2 gridSize = vec2(10.0); // Number of squares in each dimension
+
+    // vec2 gridPos = floor(vUv * gridSize);
+    // vec2 gridUv = fract(vUv * gridSize);
+
+    // vec2 dist = abs(gridUv - center);
+
+    // if (dist.x < size.x && dist.y < size.y) {
+    //   gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // White square
+    // } else {
+    //   gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // Black background
+    // }
+    // gl_FragColor = vec4(vec3(1. - step(size.x, length(gridUv - center))), 1.);
+
+    // image texture
+    // gl_FragColor.rgba = texture(uTexture, vUv);
   }
 `;
-
-export const mipmapsShader = /*glsl*/ `
-uniform sampler2D uImage;
-uniform vec2 uResolution;
-uniform float uThreshold;
-
-in vec2 vUv;
-out vec4 outColor;
-
-vec2 CalcOffset(float octave) {
-	 vec2 offset = vec2(0.0);
-	 vec2 padding = vec2(10.0) / uResolution.xy;
-
-	 offset.x = -min(1.0, floor(octave / 3.0)) * (0.25 + padding.x);
-
-	 offset.y = -(1.0 - (1.0 / exp2(octave))) - padding.y * octave;
-	 offset.y += min(1.0, floor(octave / 3.0)) * (0.35 + padding.y);
-
-	 return offset;
-}
-
-
-vec3 mipmapLevel(float octave) {
-	 float scale = exp2(octave);
-	 vec2 offset = CalcOffset(octave - 1.);
-	 vec2 coord = (vUv + offset) * scale;
-
-	 if (coord.x < 0.0 || coord.x > 1.0 || coord.y < 0.0 || coord.y > 1.0) {
-			return vec3(0.0);
-	 }
-
-	 vec3 color = vec3(0.0);
-	 float weights = 0.0;
-
-	 int spread = int(scale);
-
-	 for (int i = 0; i < spread; i++) {
-			for (int j = 0; j < spread; j++) {
-				 vec2 off = (vec2(i, j) / uResolution.xy + vec2(0.0) / uResolution.xy) * scale / float(spread);
-				 vec3 imageColor = texture(uImage, coord + off).rgb;
-         color += max(vec3(0.0), imageColor.rgb - vec3(uThreshold));
-
-				 weights += 1.0;
-			}
-	 }
-
-	 color /= weights;
-
-	 return color;
-}
-
- void main() {
-	 vec3 color = mipmapLevel(1.0);
-	 color += mipmapLevel(3.0);
-	 color += mipmapLevel(5.0);
-
-	 outColor = vec4(color, 1.0);
- }
-`;
-
-export const blurShader = /*glsl*/ `
-uniform sampler2D uImage;
-uniform vec2 uResolution;
-uniform vec2 uDirection;
-in vec2 vUv;
-out vec4 outColor;
-
-vec3 ColorFetch(vec2 coord) {
-	 return texture(uImage, coord).rgb;
-}
-
-float weights[5];
-float offsets[5];
-
-
-void main() {
-	 weights[0] = 0.19638062;
-	 weights[1] = 0.29675293;
-	 weights[2] = 0.09442139;
-	 weights[3] = 0.01037598;
-	 weights[4] = 0.00025940;
-
-	 offsets[0] = 0.00000000;
-	 offsets[1] = 1.41176471;
-	 offsets[2] = 3.29411765;
-	 offsets[3] = 5.17647059;
-	 offsets[4] = 7.05882353;
-
- vec2 uv = vUv;
-
- vec3 color = vec3(0.0);
- float weightSum = 0.0;
-
- if (uv.x < 0.52) {
-		 color += ColorFetch(uv) * weights[0];
-		 weightSum += weights[0];
-
-		 for(int i = 1; i < 5; i++)
-		 {
-				 vec2 offset = vec2(offsets[i]) / uResolution.xy;
-				 color += ColorFetch(uv + offset * .5 * uDirection) * weights[i];
-				 color += ColorFetch(uv - offset * .5 * uDirection) * weights[i];
-				 weightSum += weights[i] * 2.0;
-		 }
-
-		 color /= weightSum;
- }
-
- outColor = vec4(color,1.0);
-}
-`;
-
-export const combineShader = /* glsl */ `
-uniform sampler2D uImage;
-uniform sampler2D uBloomTexture;
-uniform float uMix;
-uniform vec2 uResolution;
-in vec2 vUv;
-out vec4 outColor;
-
-
-
-vec3 ColorFetch(vec2 coord) {
-return texture(uImage, coord).rgb;
-}
-
-vec3 BloomFetch(vec2 coord) {
-return texture(uBloomTexture, coord).rgb;
-}
-
-
-vec3 Grab(vec2 coord, const float octave, const vec2 offset)
-{
-float scale = exp2(octave);
-
- coord /= scale;
- coord -= offset;
-
- return BloomFetch(coord);
-}
-
-vec2 CalcOffset(float octave) {
-vec2 offset = vec2(0.0);
-
-vec2 padding = vec2(10.0) / uResolution.xy;
-
-offset.x = -min(1.0, floor(octave / 3.0)) * (0.25 + padding.x);
-
-offset.y = -(1.0 - (1.0 / exp2(octave))) - padding.y * octave;
-offset.y += min(1.0, floor(octave / 3.0)) * (0.35 + padding.y);
-
-return offset + .5 / uResolution.xy;
-}
-
-vec3 GetBloom(vec2 coord) {
-vec3 bloom = vec3(0.0);
-
-//Reconstruct bloom from multiple blurred images
-bloom += Grab(coord, 1.0, vec2(CalcOffset(0.0))) * .2;
-bloom += Grab(coord, 3.0, vec2(CalcOffset(2.0))) * .2;
-bloom += Grab(coord, 5.0, vec2(CalcOffset(4.0))) * .6;
-
-return bloom;
-}
-
-void main() {
-  vec4 baseColor = texture(uImage, vUv);
-  vec4 bloomColor = vec4(GetBloom(vUv), 1);
-
-  outColor = baseColor;
-
-  float baseColorGreyscale = dot(baseColor.rgb, vec3(0.299, 0.587, 0.114));
-  float mixFactor = (bloomColor.a - baseColorGreyscale * baseColor.a) * uMix;
-
-  outColor = mix(baseColor, baseColor + bloomColor, mixFactor);
-}
-`;
diff --git a/lib/src/effects/bloom.ts b/lib/src/effects/bloom.ts
new file mode 100644
index 0000000..46b3270
--- /dev/null
+++ b/lib/src/effects/bloom.ts
@@ -0,0 +1,85 @@
+import { useCompositeEffectPass } from "../hooks/useCompositeEffectPass";
+import { useEffectPass } from "../hooks/useEffectPass";
+import type { CompositeEffectPass, EffectPass } from "../types";
+
+import downsampleFragment from "./glsl/downsample.frag?raw";
+import sampleVertex from "./glsl/sample.vert?raw";
+import upsampleFragment from "./glsl/upsample.frag?raw";
+import combineFragment from "./glsl/combine.frag?raw";
+
+export type BloomParams = {
+  levels?: number;
+  radius?: number;
+  mix?: number;
+};
+
+const targetConfig = {
+  internalFormat: WebGL2RenderingContext.RGBA16F,
+  type: WebGL2RenderingContext.FLOAT,
+};
+
+export function bloom(params: BloomParams = {}) {
+  const { levels = 8, radius = 0.65, mix = 0.5 } = params;
+
+  const passes: Record<string, EffectPass<any>> = {};
+  const downsamplePasses: EffectPass<any>[] = [];
+
+  // --- Downsample pyramid (progressively half resolution) ---
+  for (let level = 1; level <= levels; level++) {
+    const pass = useEffectPass({
+      fragment: downsampleFragment,
+      vertex: sampleVertex,
+      resolutionScale: 1 / 2 ** level,
+      target: targetConfig,
+      uniforms: {
+        uTexelSizeMultiplier: 0.5,
+      },
+    });
+    downsamplePasses.push(pass);
+    passes[`downsample${level}`] = pass;
+  }
+
+  // --- Upsample & accumulate ---
+  const upsamplePasses: EffectPass<any>[] = [];
+
+  for (let level = levels - 1; level >= 1; level--) {
+    const pass = useEffectPass({
+      fragment: upsampleFragment,
+      vertex: sampleVertex,
+      resolutionScale: 1 / 2 ** level,
+      target: targetConfig,
+      uniforms: {
+        uTexelSizeMultiplier: 1,
+        uCurrentTexture: () => downsamplePasses[level].target!.texture,
+        uPreviousTexture:
+          level === levels - 1
+            ? () => downsamplePasses[levels - 1].target!.texture
+            : () => upsamplePasses[levels - 1 - level - 1].target!.texture,
+        uRadius: radius,
+      },
+    });
+    upsamplePasses.push(pass);
+    passes[`upsample${level}`] = pass;
+  }
+
+  // --- Combine original + bloom ---
+  const combine = useEffectPass({
+    fragment: combineFragment,
+    uniforms: {
+      uImage: ({ inputPass }) => inputPass.target!.texture,
+      uBloomTexture: ({ previousPass }) => previousPass.target!.texture,
+      uMix: mix,
+    },
+  });
+  passes["combine"] = combine;
+
+  const compositePass = useCompositeEffectPass(passes);
+
+  return {
+    ...compositePass,
+    initialize: (gl) => {
+      gl.getExtension("EXT_color_buffer_float");
+      compositePass.initialize(gl);
+    },
+  } as CompositeEffectPass;
+}
diff --git a/lib/src/effects/glsl/combine.frag b/lib/src/effects/glsl/combine.frag
new file mode 100644
index 0000000..08b8e80
--- /dev/null
+++ b/lib/src/effects/glsl/combine.frag
@@ -0,0 +1,22 @@
+uniform sampler2D uImage;
+uniform sampler2D uBloomTexture;
+uniform float uMix;
+
+in vec2 vUv;
+out vec4 outColor;
+
+vec3 linearToSrgb(vec3 color) {
+  vec3 a = 12.92 * color;
+  vec3 b = 1.055 * pow(color, vec3(1.0 / 2.4)) - 0.055;
+  vec3 cond = step(vec3(0.0031308), color);
+  return mix(a, b, cond);
+}
+
+void main() {
+  vec4 baseColor = texture(uImage, vUv);
+  vec4 bloomColor = texture(uBloomTexture, vUv);
+
+  outColor = max(baseColor, mix(baseColor, bloomColor, uMix));
+
+  outColor.rgb = linearToSrgb(outColor.rgb);
+}
diff --git a/lib/src/effects/glsl/downsample.frag b/lib/src/effects/glsl/downsample.frag
new file mode 100644
index 0000000..3d10bf0
--- /dev/null
+++ b/lib/src/effects/glsl/downsample.frag
@@ -0,0 +1,34 @@
+uniform sampler2D uInputTexture;
+
+in vec2 vUv;
+in vec2 vTexelSize;
+out vec4 fragColor;
+
+void main() {
+  vec2 offsets[13] = vec2[](
+    vec2(-1.0,  1.0), vec2( 1.0,  1.0),
+    vec2(-1.0, -1.0), vec2( 1.0, -1.0),
+    vec2(-2.0,  2.0), vec2( 0.0,  2.0), vec2( 2.0,  2.0),
+    vec2(-2.0,  0.0), vec2( 0.0,  0.0), vec2( 2.0,  0.0),
+    vec2(-2.0, -2.0), vec2( 0.0, -2.0), vec2( 2.0, -2.0)
+  );
+
+  float weights[13] = float[](
+    // 4 corners
+    0.125, 0.125,
+    0.125, 0.125,
+    // 9 center
+    0.0555555, 0.0555555, 0.0555555,
+    0.0555555, 0.0555555, 0.0555555,
+    0.0555555, 0.0555555, 0.0555555
+  );
+
+  vec4 color = vec4(0.0);
+
+  for (int i = 0; i < 13; i++) {
+    vec2 sampleUv = vUv + offsets[i] * vTexelSize;
+    color += weights[i] * texture(uInputTexture, sampleUv);
+  }
+
+  fragColor = texture(uInputTexture, vUv);
+}
diff --git a/lib/src/effects/glsl/sample.vert b/lib/src/effects/glsl/sample.vert
new file mode 100644
index 0000000..78d91ee
--- /dev/null
+++ b/lib/src/effects/glsl/sample.vert
@@ -0,0 +1,12 @@
+uniform sampler2D uInputTexture;
+uniform float uTexelSizeMultiplier;
+
+in vec2 aPosition;
+out vec2 vTexelSize;
+out vec2 vUv;
+
+void main() {
+  vTexelSize = uTexelSizeMultiplier / vec2(textureSize(uInputTexture, 0).xy);
+  vUv = aPosition.xy * 0.5 + 0.5;
+  gl_Position = vec4(aPosition.xy, 1.0, 1.0);
+}
diff --git a/lib/src/effects/glsl/upsample.frag b/lib/src/effects/glsl/upsample.frag
new file mode 100644
index 0000000..e22f4b0
--- /dev/null
+++ b/lib/src/effects/glsl/upsample.frag
@@ -0,0 +1,36 @@
+uniform sampler2D uCurrentTexture;  // Texture at the current (higher) resolution
+uniform sampler2D uPreviousTexture; // Texture at the lower (blurrier) resolution
+uniform float uRadius;              // Interpolation factor
+
+in vec2 vTexelSize;
+in vec2 vUv;
+out vec4 fragColor;
+
+float clampToBorder(const in vec2 uv) {
+  return (uv.s >= 0.0 && uv.s <= 1.0 && uv.t >= 0.0 && uv.t <= 1.0) ? 1.0 : 0.5;
+}
+
+void main() {
+  vec2 offsets[9] = vec2[](
+    vec2(-1.0,  1.0), vec2( 0.0,  1.0), vec2( 1.0,  1.0),
+    vec2(-1.0,  0.0), vec2( 0.0,  0.0), vec2( 1.0,  0.0),
+    vec2(-1.0, -1.0), vec2( 0.0, -1.0), vec2( 1.0, -1.0)
+  );
+  float weights[9] = float[](
+    0.0625, 0.125, 0.0625,
+    0.125,  0.25,  0.125,
+    0.0625, 0.125, 0.0625
+  );
+
+  vec4 prevColor = vec4(0.0);
+  for (int i = 0; i < 9; i++) {
+    vec2 sampleUv = vUv + offsets[i] * vTexelSize;
+    prevColor += weights[i] * clampToBorder(sampleUv) * texture(uPreviousTexture, sampleUv);
+  }
+
+  vec4 currColor = texture(uCurrentTexture, vUv);
+
+  fragColor = max(currColor, mix(currColor, prevColor, uRadius));
+}
+
+
diff --git a/lib/src/index.ts b/lib/src/index.ts
index aa3a58c..961fb81 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -18,3 +18,5 @@ export { useBoundingRect } from "./hooks/useBoundingRect";
 export { usePointerEvents } from "./hooks/usePointerEvents";
 export { usePingPongFBO } from "./hooks/usePingPongFBO";
 export { useTransformFeedback } from "./hooks/useTransformFeedback";
+
+export { bloom } from "./effects/bloom";

From 6b5fae5168ee601bc81aee9c1f06560f88781838 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Sat, 9 Aug 2025 15:55:15 +0200
Subject: [PATCH 05/15] fix: automatic uniform / attribute name recognition
 broken with minified shader code

---
 lib/src/internal/findName.ts | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/lib/src/internal/findName.ts b/lib/src/internal/findName.ts
index 99ec404..706f0ff 100644
--- a/lib/src/internal/findName.ts
+++ b/lib/src/internal/findName.ts
@@ -1,18 +1,46 @@
 function findName(source: string | undefined, keyword: string, word: string) {
-  return source
-    ?.split("\n")
-    .find((line) => new RegExp(`^${keyword}.*${word};`, "i").test(line.trim()))
-    ?.match(/(\w+);/)?.[1];
+  const re = new RegExp(`\\b${keyword}\\b\\s+\\w+\\s+(\\w*${word}\\w*)\\b`, "i");
+  return source?.match(re)?.[1];
 }
 
+/**
+ * Finds the name of a uniform variable in a GLSL shader source string.
+ *
+ * This function searches for a declaration of a uniform variable that contains the specified `word`.
+ * It returns the full name of the uniform variable if found.
+ *
+ * @param source - The GLSL shader source code as a string, or `undefined`.
+ * @param word - The substring to look for within the uniform variable's name.
+ * @returns The name of the uniform variable, or `undefined` if not found.
+ */
 export function findUniformName(source: string | undefined, word: string) {
   return findName(source, "uniform", word);
 }
 
+/**
+ * Finds the name of a varying (or 'in' in GLSL 300 ES) variable in a GLSL shader source string.
+ *
+ * This function searches for a declaration of a varying or 'in' variable that contains the specified `word`.
+ * It returns the full name of the variable if found.
+ *
+ * @param source - The GLSL shader source code as a string, or `undefined`.
+ * @param word - The substring to look for within the varying/in variable's name.
+ * @returns The name of the varying/in variable, or `undefined` if not found.
+ */
 export function findVaryingName(source: string | undefined, word: string) {
   return findName(source, "varying", word) || findName(source, "in", word);
 }
 
+/**
+ * Finds the name of an attribute (or 'in' in GLSL 300 ES) variable in a GLSL shader source string.
+ *
+ * This function searches for a declaration of an attribute or 'in' variable that contains the specified `word`.
+ * It returns the full name of the variable if found.
+ *
+ * @param source - The GLSL shader source code as a string, or `undefined`.
+ * @param word - The substring to look for within the attribute/in variable's name.
+ * @returns The name of the attribute/in variable, or `undefined` if not found.
+ */
 export function findAttributeName(source: string | undefined, word: string) {
   return findName(source, "attribute", word) || findName(source, "in", word);
 }

From fc95cde6617a73eac00e309ef6b2b5e1b32e8962 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Sat, 9 Aug 2025 16:20:30 +0200
Subject: [PATCH 06/15] refactor: use an array of passes instead of an object
 in CompositeEffectPass

---
 lib/src/effects/bloom.ts                |  6 +-----
 lib/src/hooks/useCompositeEffectPass.ts | 13 ++++++-------
 lib/src/hooks/useCompositor.ts          |  6 +++---
 lib/src/types.ts                        |  2 +-
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/lib/src/effects/bloom.ts b/lib/src/effects/bloom.ts
index 46b3270..115a1d0 100644
--- a/lib/src/effects/bloom.ts
+++ b/lib/src/effects/bloom.ts
@@ -21,7 +21,6 @@ const targetConfig = {
 export function bloom(params: BloomParams = {}) {
   const { levels = 8, radius = 0.65, mix = 0.5 } = params;
 
-  const passes: Record<string, EffectPass<any>> = {};
   const downsamplePasses: EffectPass<any>[] = [];
 
   // --- Downsample pyramid (progressively half resolution) ---
@@ -36,7 +35,6 @@ export function bloom(params: BloomParams = {}) {
       },
     });
     downsamplePasses.push(pass);
-    passes[`downsample${level}`] = pass;
   }
 
   // --- Upsample & accumulate ---
@@ -59,7 +57,6 @@ export function bloom(params: BloomParams = {}) {
       },
     });
     upsamplePasses.push(pass);
-    passes[`upsample${level}`] = pass;
   }
 
   // --- Combine original + bloom ---
@@ -71,9 +68,8 @@ export function bloom(params: BloomParams = {}) {
       uMix: mix,
     },
   });
-  passes["combine"] = combine;
 
-  const compositePass = useCompositeEffectPass(passes);
+  const compositePass = useCompositeEffectPass([...downsamplePasses, ...upsamplePasses, combine]);
 
   return {
     ...compositePass,
diff --git a/lib/src/hooks/useCompositeEffectPass.ts b/lib/src/hooks/useCompositeEffectPass.ts
index 8374b14..b1b0764 100644
--- a/lib/src/hooks/useCompositeEffectPass.ts
+++ b/lib/src/hooks/useCompositeEffectPass.ts
@@ -8,11 +8,10 @@ import type {
   UpdatedCallback,
 } from "../types";
 
-export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>>(
+export function useCompositeEffectPass<P extends EffectPass<any>[]>(
   passes: P,
 ): CompositeEffectPass<P> {
-  const effectPasses = Object.values(passes);
-  const outputPass = effectPasses.at(-1)!;
+  const outputPass = passes.at(-1)!;
 
   const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback<RenderCallback<any>>();
   const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback<RenderCallback<any>>();
@@ -20,15 +19,15 @@ export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>
 
   function render() {
     for (const callback of beforeRenderCallbacks) callback({ uniforms: {} });
-    for (const pass of effectPasses) pass.render();
+    for (const pass of passes) pass.render();
     for (const callback of afterRenderCallbacks) callback({ uniforms: {} });
   }
 
   function initialize(gl: WebGL2RenderingContext) {
-    for (const [index, pass] of effectPasses.entries()) {
+    for (const [index, pass] of passes.entries()) {
       pass.initialize(gl);
 
-      if (index < effectPasses.length - 1 && pass.target == undefined) {
+      if (index < passes.length - 1 && pass.target == undefined) {
         pass.setTarget(createRenderTarget(gl));
       }
 
@@ -41,7 +40,7 @@ export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>
   }
 
   function setSize(size: { width: number; height: number }) {
-    for (const pass of effectPasses) {
+    for (const pass of passes) {
       pass.setSize(size);
     }
   }
diff --git a/lib/src/hooks/useCompositor.ts b/lib/src/hooks/useCompositor.ts
index 0aa467a..37fc982 100644
--- a/lib/src/hooks/useCompositor.ts
+++ b/lib/src/hooks/useCompositor.ts
@@ -12,7 +12,7 @@ import type { CompositeEffectPass, EffectPass, RenderPass } from "../types";
 export function useCompositor(
   gl: WebGL2RenderingContext,
   renderPass: RenderPass<any>,
-  effects: Array<EffectPass<any> | CompositeEffectPass<Record<string, EffectPass<any>>>>,
+  effects: Array<EffectPass<any> | CompositeEffectPass<EffectPass<any>[]>>,
 ) {
   if (effects.length > 0 && renderPass.target === null) {
     renderPass.setTarget(createRenderTarget(gl));
@@ -29,7 +29,7 @@ export function useCompositor(
 
     if (isCompositeEffectPass(effect)) {
       const inputPass = previousPass;
-      for (const effectPass of Object.values(effect.passes)) {
+      for (const effectPass of effect.passes) {
         const previousPassRef = previousPass;
         setupEffectPass(effectPass, previousPassRef, inputPass);
         previousPass = effectPass;
@@ -60,7 +60,7 @@ export function useCompositor(
 function isCompositeEffectPass(
   effect: EffectPass | CompositeEffectPass<any>,
 ): effect is CompositeEffectPass<any> {
-  return typeof (effect as CompositeEffectPass).passes === "object";
+  return Array.isArray((effect as CompositeEffectPass).passes);
 }
 
 function setupEffectPass(
diff --git a/lib/src/types.ts b/lib/src/types.ts
index ac0961b..4539890 100644
--- a/lib/src/types.ts
+++ b/lib/src/types.ts
@@ -58,7 +58,7 @@ export interface RenderPass<U extends Uniforms = Record<string, never>> extends
 export type EffectPass<U extends Uniforms = Record<string, never>> = RenderPass<U>;
 
 export interface CompositeEffectPass<
-  P extends Record<string, EffectPass<any>> = Record<string, EffectPass<never>>,
+  P extends EffectPass<any>[] = EffectPass<never>[],
 > extends Omit<EffectPass, "fragment" | "vertex" | "uniforms"> {
   passes: P;
 }

From be1f1889ae25bc3dfa6a70f023730e49d9067577 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Mon, 11 Aug 2025 22:14:49 +0200
Subject: [PATCH 07/15] refactor: optimize default texture params

---
 lib/src/core/texture.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/lib/src/core/texture.ts b/lib/src/core/texture.ts
index 8765cda..9a7e92d 100644
--- a/lib/src/core/texture.ts
+++ b/lib/src/core/texture.ts
@@ -129,8 +129,8 @@ export function fillTexture(
       ? WebGL2RenderingContext.SRGB8_ALPHA8
       : WebGL2RenderingContext.RGBA,
     type = WebGL2RenderingContext.UNSIGNED_BYTE,
-    generateMipmaps = true,
-    anisotropy = navigator.hardwareConcurrency, // in most case between 4 and 12, depending on the hardware range
+    generateMipmaps = "src" in params, // no mipmap for data textures
+    anisotropy = 1,
     minFilter = generateMipmaps ? "linear-mipmap-linear" : "linear",
     magFilter = "linear",
     wrapS = "clamp-to-edge",
@@ -152,14 +152,17 @@ export function fillTexture(
     gl.generateMipmap(gl.TEXTURE_2D);
 
     // anisotropic filtering
-    const ext = gl.getExtension("EXT_texture_filter_anisotropic");
-    if (ext && anisotropy > 1) {
-      const maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
-      gl.texParameterf(
-        gl.TEXTURE_2D,
-        ext.TEXTURE_MAX_ANISOTROPY_EXT,
-        Math.min(maxAnisotropy, anisotropy),
-      );
+    if (anisotropy > 1) {
+      console.log("anisotropy", anisotropy);
+      const ext = gl.getExtension("EXT_texture_filter_anisotropic");
+      if (ext) {
+        const maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
+        gl.texParameterf(
+          gl.TEXTURE_2D,
+          ext.TEXTURE_MAX_ANISOTROPY_EXT,
+          Math.min(maxAnisotropy, anisotropy),
+        );
+      }
     }
   }
 
@@ -274,13 +277,10 @@ export function createFloatDataTexture(data: number[] | Float32Array): DataTextu
     format: WebGL2RenderingContext.RGBA,
     type: WebGL2RenderingContext.FLOAT,
     internalFormat: WebGL2RenderingContext.RGBA32F,
-    generateMipmaps: false,
     width: textureWidth,
     height: textureHeight,
     minFilter: "nearest",
     magFilter: "nearest",
     flipY: false,
-    wrapS: "clamp-to-edge",
-    wrapT: "clamp-to-edge",
   };
 }

From d095edaf93ae9aa7a11f6236edb507f903c1a12d Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Mon, 11 Aug 2025 22:17:15 +0200
Subject: [PATCH 08/15] feat: add linearToSRGB effect

---
 .../src/pages/post-processing/bloom.astro     |  4 ++--
 lib/src/effects/{ => bloom}/glsl/combine.frag |  9 --------
 .../effects/{ => bloom}/glsl/downsample.frag  |  0
 lib/src/effects/{ => bloom}/glsl/sample.vert  |  0
 .../effects/{ => bloom}/glsl/upsample.frag    |  0
 lib/src/effects/{bloom.ts => bloom/index.ts}  | 23 ++++---------------
 lib/src/effects/linearToSRGB/index.ts         |  8 +++++++
 .../effects/linearToSRGB/linearToSRGB.frag    | 14 +++++++++++
 lib/src/index.ts                              |  1 +
 9 files changed, 29 insertions(+), 30 deletions(-)
 rename lib/src/effects/{ => bloom}/glsl/combine.frag (54%)
 rename lib/src/effects/{ => bloom}/glsl/downsample.frag (100%)
 rename lib/src/effects/{ => bloom}/glsl/sample.vert (100%)
 rename lib/src/effects/{ => bloom}/glsl/upsample.frag (100%)
 rename lib/src/effects/{bloom.ts => bloom/index.ts} (73%)
 create mode 100644 lib/src/effects/linearToSRGB/index.ts
 create mode 100644 lib/src/effects/linearToSRGB/linearToSRGB.frag

diff --git a/lib/playground/src/pages/post-processing/bloom.astro b/lib/playground/src/pages/post-processing/bloom.astro
index 7e38224..d588447 100644
--- a/lib/playground/src/pages/post-processing/bloom.astro
+++ b/lib/playground/src/pages/post-processing/bloom.astro
@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-  import { useWebGLCanvas, loadTexture, bloom } from "usegl";
+  import { useWebGLCanvas, loadTexture, bloom, linearToSRGB } from "usegl";
   import { fragment } from "../../shaders/bloom";
   import { incrementRenderCount } from "../../components/renderCount";
 
@@ -21,7 +21,7 @@ import Layout from "../../layouts/Layout.astro";
         { colorSpace: "srgb" }
       ),
     },
-    postEffects: [bloom({ levels, radius, mix })],
+    postEffects: [bloom({ levels, radius, mix }), linearToSRGB()],
   });
 
   onAfterRender(incrementRenderCount);
diff --git a/lib/src/effects/glsl/combine.frag b/lib/src/effects/bloom/glsl/combine.frag
similarity index 54%
rename from lib/src/effects/glsl/combine.frag
rename to lib/src/effects/bloom/glsl/combine.frag
index 08b8e80..5e09a1e 100644
--- a/lib/src/effects/glsl/combine.frag
+++ b/lib/src/effects/bloom/glsl/combine.frag
@@ -5,18 +5,9 @@ uniform float uMix;
 in vec2 vUv;
 out vec4 outColor;
 
-vec3 linearToSrgb(vec3 color) {
-  vec3 a = 12.92 * color;
-  vec3 b = 1.055 * pow(color, vec3(1.0 / 2.4)) - 0.055;
-  vec3 cond = step(vec3(0.0031308), color);
-  return mix(a, b, cond);
-}
-
 void main() {
   vec4 baseColor = texture(uImage, vUv);
   vec4 bloomColor = texture(uBloomTexture, vUv);
 
   outColor = max(baseColor, mix(baseColor, bloomColor, uMix));
-
-  outColor.rgb = linearToSrgb(outColor.rgb);
 }
diff --git a/lib/src/effects/glsl/downsample.frag b/lib/src/effects/bloom/glsl/downsample.frag
similarity index 100%
rename from lib/src/effects/glsl/downsample.frag
rename to lib/src/effects/bloom/glsl/downsample.frag
diff --git a/lib/src/effects/glsl/sample.vert b/lib/src/effects/bloom/glsl/sample.vert
similarity index 100%
rename from lib/src/effects/glsl/sample.vert
rename to lib/src/effects/bloom/glsl/sample.vert
diff --git a/lib/src/effects/glsl/upsample.frag b/lib/src/effects/bloom/glsl/upsample.frag
similarity index 100%
rename from lib/src/effects/glsl/upsample.frag
rename to lib/src/effects/bloom/glsl/upsample.frag
diff --git a/lib/src/effects/bloom.ts b/lib/src/effects/bloom/index.ts
similarity index 73%
rename from lib/src/effects/bloom.ts
rename to lib/src/effects/bloom/index.ts
index 115a1d0..40e039b 100644
--- a/lib/src/effects/bloom.ts
+++ b/lib/src/effects/bloom/index.ts
@@ -1,6 +1,6 @@
-import { useCompositeEffectPass } from "../hooks/useCompositeEffectPass";
-import { useEffectPass } from "../hooks/useEffectPass";
-import type { CompositeEffectPass, EffectPass } from "../types";
+import { useCompositeEffectPass } from "../../hooks/useCompositeEffectPass";
+import { useEffectPass } from "../../hooks/useEffectPass";
+import type { CompositeEffectPass, EffectPass } from "../../types";
 
 import downsampleFragment from "./glsl/downsample.frag?raw";
 import sampleVertex from "./glsl/sample.vert?raw";
@@ -13,11 +13,6 @@ export type BloomParams = {
   mix?: number;
 };
 
-const targetConfig = {
-  internalFormat: WebGL2RenderingContext.RGBA16F,
-  type: WebGL2RenderingContext.FLOAT,
-};
-
 export function bloom(params: BloomParams = {}) {
   const { levels = 8, radius = 0.65, mix = 0.5 } = params;
 
@@ -29,7 +24,6 @@ export function bloom(params: BloomParams = {}) {
       fragment: downsampleFragment,
       vertex: sampleVertex,
       resolutionScale: 1 / 2 ** level,
-      target: targetConfig,
       uniforms: {
         uTexelSizeMultiplier: 0.5,
       },
@@ -45,7 +39,6 @@ export function bloom(params: BloomParams = {}) {
       fragment: upsampleFragment,
       vertex: sampleVertex,
       resolutionScale: 1 / 2 ** level,
-      target: targetConfig,
       uniforms: {
         uTexelSizeMultiplier: 1,
         uCurrentTexture: () => downsamplePasses[level].target!.texture,
@@ -69,13 +62,5 @@ export function bloom(params: BloomParams = {}) {
     },
   });
 
-  const compositePass = useCompositeEffectPass([...downsamplePasses, ...upsamplePasses, combine]);
-
-  return {
-    ...compositePass,
-    initialize: (gl) => {
-      gl.getExtension("EXT_color_buffer_float");
-      compositePass.initialize(gl);
-    },
-  } as CompositeEffectPass;
+  return useCompositeEffectPass([...downsamplePasses, ...upsamplePasses, combine]);
 }
diff --git a/lib/src/effects/linearToSRGB/index.ts b/lib/src/effects/linearToSRGB/index.ts
new file mode 100644
index 0000000..3f36166
--- /dev/null
+++ b/lib/src/effects/linearToSRGB/index.ts
@@ -0,0 +1,8 @@
+import { useEffectPass } from "../../hooks/useEffectPass";
+import linearToSRGBFrag from "./linearToSRGB.frag";
+
+export function linearToSRGB() {
+  return useEffectPass({
+    fragment: linearToSRGBFrag,
+  });
+}
diff --git a/lib/src/effects/linearToSRGB/linearToSRGB.frag b/lib/src/effects/linearToSRGB/linearToSRGB.frag
new file mode 100644
index 0000000..0076880
--- /dev/null
+++ b/lib/src/effects/linearToSRGB/linearToSRGB.frag
@@ -0,0 +1,14 @@
+uniform sampler2D uTexture;
+varying vec2 vUv;
+
+void main() {
+  vec4 color = texture(uTexture, vUv);
+  gl_FragColor = vec4(
+    mix(
+      color.rgb * 12.92,
+      pow(color.rgb, vec3(1.0 / 2.4)) * 1.055 - 0.055,
+      step(vec3(0.0031308), color.rgb)
+    ),
+    color.a
+  );
+}
diff --git a/lib/src/index.ts b/lib/src/index.ts
index 961fb81..e90cd80 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -20,3 +20,4 @@ export { usePingPongFBO } from "./hooks/usePingPongFBO";
 export { useTransformFeedback } from "./hooks/useTransformFeedback";
 
 export { bloom } from "./effects/bloom";
+export { linearToSRGB } from "./effects/linearToSRGB";

From 3e5e298cea5cf436af016db76b7b38db43226222 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Mon, 11 Aug 2025 22:17:57 +0200
Subject: [PATCH 09/15] fix: fix broken render targets on effects

---
 .../src/pages/post-processing/bloom.astro     | 21 +++++++------------
 lib/src/effects/bloom/index.ts                | 13 +++++++++++-
 lib/src/hooks/useCompositeEffectPass.ts       | 11 ++++------
 lib/src/hooks/useCompositor.ts                |  7 +++++--
 lib/src/hooks/useEffectPass.ts                |  7 ++++++-
 lib/src/hooks/usePingPongFBO.ts               |  2 +-
 .../__screenshots__/bloom/bloom-android.png   |  4 ++--
 .../__screenshots__/bloom/bloom-chromium.png  |  4 ++--
 .../__screenshots__/bloom/bloom-firefox.png   |  4 ++--
 .../__screenshots__/bloom/bloom-iphone.png    |  4 ++--
 .../__screenshots__/bloom/bloom-safari.png    |  4 ++--
 11 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/lib/playground/src/pages/post-processing/bloom.astro b/lib/playground/src/pages/post-processing/bloom.astro
index d588447..571256e 100644
--- a/lib/playground/src/pages/post-processing/bloom.astro
+++ b/lib/playground/src/pages/post-processing/bloom.astro
@@ -14,13 +14,13 @@ import Layout from "../../layouts/Layout.astro";
   const { onAfterRender } = useWebGLCanvas({
     canvas: "#glCanvas",
     fragment: fragment,
-    uniforms: {
-      uTexture: loadTexture(
-        "https://st.depositphotos.com/2300153/2648/i/950/depositphotos_26489675-stock-photo-dark-room-with-window.jpg",
-        // "https://st.depositphotos.com/8521256/56706/v/600/depositphotos_567060820-stock-video-white-picture-of-rectangle-on.jpg",
-        { colorSpace: "srgb" }
-      ),
-    },
+    // uniforms: {
+    //   uTexture: loadTexture(
+    //     "https://st.depositphotos.com/2300153/2648/i/950/depositphotos_26489675-stock-photo-dark-room-with-window.jpg",
+    //     // "https://st.depositphotos.com/8521256/56706/v/600/depositphotos_567060820-stock-video-white-picture-of-rectangle-on.jpg",
+    //     { colorSpace: "srgb" }
+    //   ),
+    // },
     postEffects: [bloom({ levels, radius, mix }), linearToSRGB()],
   });
 
@@ -30,10 +30,3 @@ import Layout from "../../layouts/Layout.astro";
 <Layout title="Bloom">
   <canvas id="glCanvas"></canvas>
 </Layout>
-
-<style>
-  canvas {
-    width: 600px;
-    height: 600px;
-  }
-</style>
diff --git a/lib/src/effects/bloom/index.ts b/lib/src/effects/bloom/index.ts
index 40e039b..df7184c 100644
--- a/lib/src/effects/bloom/index.ts
+++ b/lib/src/effects/bloom/index.ts
@@ -1,11 +1,12 @@
 import { useCompositeEffectPass } from "../../hooks/useCompositeEffectPass";
 import { useEffectPass } from "../../hooks/useEffectPass";
-import type { CompositeEffectPass, EffectPass } from "../../types";
+import type { EffectPass } from "../../types";
 
 import downsampleFragment from "./glsl/downsample.frag?raw";
 import sampleVertex from "./glsl/sample.vert?raw";
 import upsampleFragment from "./glsl/upsample.frag?raw";
 import combineFragment from "./glsl/combine.frag?raw";
+import { RenderTargetParams } from "../../core/renderTarget";
 
 export type BloomParams = {
   levels?: number;
@@ -13,6 +14,13 @@ export type BloomParams = {
   mix?: number;
 };
 
+const floatTargetConfig: RenderTargetParams = {
+  internalFormat: WebGL2RenderingContext.RGBA16F,
+  type: WebGL2RenderingContext.HALF_FLOAT,
+  minFilter: "linear",
+  magFilter: "linear",
+};
+
 export function bloom(params: BloomParams = {}) {
   const { levels = 8, radius = 0.65, mix = 0.5 } = params;
 
@@ -22,6 +30,7 @@ export function bloom(params: BloomParams = {}) {
   for (let level = 1; level <= levels; level++) {
     const pass = useEffectPass({
       fragment: downsampleFragment,
+      target: floatTargetConfig,
       vertex: sampleVertex,
       resolutionScale: 1 / 2 ** level,
       uniforms: {
@@ -37,6 +46,7 @@ export function bloom(params: BloomParams = {}) {
   for (let level = levels - 1; level >= 1; level--) {
     const pass = useEffectPass({
       fragment: upsampleFragment,
+      target: floatTargetConfig,
       vertex: sampleVertex,
       resolutionScale: 1 / 2 ** level,
       uniforms: {
@@ -55,6 +65,7 @@ export function bloom(params: BloomParams = {}) {
   // --- Combine original + bloom ---
   const combine = useEffectPass({
     fragment: combineFragment,
+    target: floatTargetConfig,
     uniforms: {
       uImage: ({ inputPass }) => inputPass.target!.texture,
       uBloomTexture: ({ previousPass }) => previousPass.target!.texture,
diff --git a/lib/src/hooks/useCompositeEffectPass.ts b/lib/src/hooks/useCompositeEffectPass.ts
index b1b0764..c430456 100644
--- a/lib/src/hooks/useCompositeEffectPass.ts
+++ b/lib/src/hooks/useCompositeEffectPass.ts
@@ -1,4 +1,3 @@
-import { createRenderTarget } from "../core/renderTarget";
 import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
 import type {
   CompositeEffectPass,
@@ -24,13 +23,9 @@ export function useCompositeEffectPass<P extends EffectPass<any>[]>(
   }
 
   function initialize(gl: WebGL2RenderingContext) {
-    for (const [index, pass] of passes.entries()) {
+    for (const pass of passes) {
       pass.initialize(gl);
 
-      if (index < passes.length - 1 && pass.target == undefined) {
-        pass.setTarget(createRenderTarget(gl));
-      }
-
       pass.onUpdated((newUniforms, oldUniforms) => {
         for (const callback of onUpdatedCallbacks) {
           callback(newUniforms, oldUniforms);
@@ -50,7 +45,9 @@ export function useCompositeEffectPass<P extends EffectPass<any>[]>(
   }
 
   return {
-    target: outputPass.target,
+    get target() {
+      return outputPass.target;
+    },
     passes,
     onBeforeRender,
     onAfterRender,
diff --git a/lib/src/hooks/useCompositor.ts b/lib/src/hooks/useCompositor.ts
index 37fc982..3bdc2d2 100644
--- a/lib/src/hooks/useCompositor.ts
+++ b/lib/src/hooks/useCompositor.ts
@@ -14,6 +14,9 @@ export function useCompositor(
   renderPass: RenderPass<any>,
   effects: Array<EffectPass<any> | CompositeEffectPass<EffectPass<any>[]>>,
 ) {
+  // add the ability to render to floating-point buffers
+  gl.getExtension("EXT_color_buffer_float");
+
   if (effects.length > 0 && renderPass.target === null) {
     renderPass.setTarget(createRenderTarget(gl));
   }
@@ -23,8 +26,8 @@ export function useCompositor(
   for (const [index, effect] of effects.entries()) {
     effect.initialize(gl);
 
-    if (index < effects.length - 1 && effect.target == undefined) {
-      effect.setTarget(createRenderTarget(gl));
+    if (index === effects.length - 1 && effect.target !== null) {
+      effect.setTarget(null);
     }
 
     if (isCompositeEffectPass(effect)) {
diff --git a/lib/src/hooks/useEffectPass.ts b/lib/src/hooks/useEffectPass.ts
index e743e6a..5837d2c 100644
--- a/lib/src/hooks/useEffectPass.ts
+++ b/lib/src/hooks/useEffectPass.ts
@@ -15,10 +15,15 @@ type EffectPassOptions<U extends EffectUniforms> = Omit<QuadPassOptions<U>, "tar
   target?: RenderTargetParams | null;
 };
 
+const effectTargetConfig: RenderTargetParams = {
+  minFilter: "nearest",
+  magFilter: "nearest",
+};
+
 export function useEffectPass<U extends EffectUniforms>(
   options: EffectPassOptions<U>,
 ): EffectPass<U> {
-  const { target, resolutionScale = 1 } = options;
+  const { target = effectTargetConfig, resolutionScale = 1 } = options;
 
   const renderPass = useQuadRenderPass(undefined, { ...options, target: null });
 
diff --git a/lib/src/hooks/usePingPongFBO.ts b/lib/src/hooks/usePingPongFBO.ts
index a1a4686..d7f1484 100644
--- a/lib/src/hooks/usePingPongFBO.ts
+++ b/lib/src/hooks/usePingPongFBO.ts
@@ -21,7 +21,7 @@ export function usePingPongFBO<U extends Uniforms>(
   gl: WebGL2RenderingContext,
   { uniforms = {} as U, dataTexture, fragment }: PingPongFBOOptions<U>,
 ) {
-  // enable the extension for float textures
+  // add the ability to render to 32-bit floating-point buffers
   gl.getExtension("EXT_color_buffer_float");
 
   const { initialData, name: dataTextureName = "tData" } = dataTexture;
diff --git a/lib/tests/__screenshots__/bloom/bloom-android.png b/lib/tests/__screenshots__/bloom/bloom-android.png
index 036369f..cb3204a 100644
--- a/lib/tests/__screenshots__/bloom/bloom-android.png
+++ b/lib/tests/__screenshots__/bloom/bloom-android.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:679112107847463eaad04c98aa6d74a6f8d74ae5cd51f071f02fdd0380a1424a
-size 35702
+oid sha256:55d783d0475db6a0fe73b4c998f53533acc0c2e6fc9d603f61150ac4095b167c
+size 35673
diff --git a/lib/tests/__screenshots__/bloom/bloom-chromium.png b/lib/tests/__screenshots__/bloom/bloom-chromium.png
index 9d7407a..4f98adc 100644
--- a/lib/tests/__screenshots__/bloom/bloom-chromium.png
+++ b/lib/tests/__screenshots__/bloom/bloom-chromium.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d8e6cba623bc0fbeda8475554b0f388f379b2227aa2410db22da8881be382120
-size 51842
+oid sha256:296350f29e9219a337dcf0a32dac5cc834b8b0a7c64321789b1811b6993611da
+size 51993
diff --git a/lib/tests/__screenshots__/bloom/bloom-firefox.png b/lib/tests/__screenshots__/bloom/bloom-firefox.png
index 114bb62..f5f3cde 100644
--- a/lib/tests/__screenshots__/bloom/bloom-firefox.png
+++ b/lib/tests/__screenshots__/bloom/bloom-firefox.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4f938184ed90d8e6c86e8b59af74c1200955c181a4819fe06f8b18555337560a
-size 79547
+oid sha256:e13018dbbf9ebc1570dadd07a052d20cc96fb0686b938e12e6514a125c1218a5
+size 73441
diff --git a/lib/tests/__screenshots__/bloom/bloom-iphone.png b/lib/tests/__screenshots__/bloom/bloom-iphone.png
index 7ad7943..7622dcd 100644
--- a/lib/tests/__screenshots__/bloom/bloom-iphone.png
+++ b/lib/tests/__screenshots__/bloom/bloom-iphone.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:01de390e08ea95a9586ab5d8b60d5838ab99f6e0422e18607d8a14e212923bdf
-size 35909
+oid sha256:7c50ef5fd882f721b42a73a6310c8011b01d13b04d1960a4fd83a1b2acd869f6
+size 39892
diff --git a/lib/tests/__screenshots__/bloom/bloom-safari.png b/lib/tests/__screenshots__/bloom/bloom-safari.png
index c820c0e..e0f7280 100644
--- a/lib/tests/__screenshots__/bloom/bloom-safari.png
+++ b/lib/tests/__screenshots__/bloom/bloom-safari.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4a94ee99d0fa423c52d0d5d619f22998337563d8dfedf4e908d985807130c099
-size 48205
+oid sha256:9a35db3a9d52894f438e45d056955f3c1284ffbedc96a90f240313dc1a518fde
+size 54746

From d974890d749540d491bc9fc57425895316b657a0 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Tue, 12 Aug 2025 21:29:16 +0200
Subject: [PATCH 10/15] chore: update the sepia effect in playground

---
 .../src/pages/post-processing/sepia.astro     | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/lib/playground/src/pages/post-processing/sepia.astro b/lib/playground/src/pages/post-processing/sepia.astro
index a03782c..1c850b9 100644
--- a/lib/playground/src/pages/post-processing/sepia.astro
+++ b/lib/playground/src/pages/post-processing/sepia.astro
@@ -39,11 +39,14 @@ import Layout from "../../layouts/Layout.astro";
 
 			#define STRENGTH .75
 
-			vec3 sepia(vec3 color) {
-				const vec3 sepiaColor = vec3(1.2, 1.0, 0.7);
-				float grayScale = dot(color, vec3(0.299, 0.587, 0.114));
-				return grayScale * sepiaColor;
-			}
+      // sepia filter from the CSS specification : https://drafts.fxtf.org/filter-effects/#sepiaEquivalent
+      vec3 sepia(vec3 c){
+        return c * mat3(
+          0.393, 0.769, 0.189,
+          0.349, 0.686, 0.168,
+          0.272, 0.534, 0.131
+        );
+      }
 
 			void main() {
 				vec3 color = texture(uTexture, vUv).rgb;
@@ -56,27 +59,27 @@ import Layout from "../../layouts/Layout.astro";
   const { onAfterRender } = useWebGLCanvas({
     canvas: "#glCanvas",
     fragment: /* glsl */ `
-				in vec2 vUv;
-				uniform sampler2D uTexture;
-				uniform vec2 uResolution;
-				out vec4 fragColor;
-
-				void main() {
-					vec2 textureResolution = vec2(textureSize(uTexture, 0));
-					float canvasRatio = uResolution.x / uResolution.y;
-					float textureRatio = textureResolution.x / textureResolution.y;
-
-					vec2 uv = vUv - 0.5;
-					uv.x *= canvasRatio / textureRatio;
-					uv += 0.5;
-
-					vec3 color = texture(uTexture, uv).rgb;
-					color *= step(0., uv.x) * (1. - step(1., uv.x));
-					color *= step(0., uv.y) * (1. - step(1., uv.y));
-
-					fragColor = vec4(color, 1.);
-				}
-				`,
+      in vec2 vUv;
+      uniform sampler2D uTexture;
+      uniform vec2 uResolution;
+      out vec4 fragColor;
+
+      void main() {
+        vec2 textureResolution = vec2(textureSize(uTexture, 0));
+        float canvasRatio = uResolution.x / uResolution.y;
+        float textureRatio = textureResolution.x / textureResolution.y;
+
+        vec2 uv = vUv - 0.5;
+        uv.x *= canvasRatio / textureRatio;
+        uv += 0.5;
+
+        vec3 color = texture(uTexture, uv).rgb;
+        color *= step(0., uv.x) * (1. - step(1., uv.x));
+        color *= step(0., uv.y) * (1. - step(1., uv.y));
+
+        fragColor = vec4(color, 1.);
+      }
+    `,
     uniforms: {
       uTexture: loadTexture("/images/lion.jpg"),
     },

From bc57ba1135d0055f3826d34350a661f20a2d03e8 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Tue, 12 Aug 2025 21:32:02 +0200
Subject: [PATCH 11/15] feat: add uniforms to CompositeEffectPass

---
 .../src/pages/post-processing/bloom.astro     |  6 +-----
 lib/src/effects/bloom/index.ts                | 21 ++++++++++++++++++-
 lib/src/hooks/useCompositeEffectPass.ts       |  9 +++++---
 lib/src/hooks/useCompositor.ts                |  2 +-
 lib/src/types.ts                              |  7 +++----
 5 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/lib/playground/src/pages/post-processing/bloom.astro b/lib/playground/src/pages/post-processing/bloom.astro
index 571256e..1d9adc2 100644
--- a/lib/playground/src/pages/post-processing/bloom.astro
+++ b/lib/playground/src/pages/post-processing/bloom.astro
@@ -7,10 +7,6 @@ import Layout from "../../layouts/Layout.astro";
   import { fragment } from "../../shaders/bloom";
   import { incrementRenderCount } from "../../components/renderCount";
 
-  const radius = 0.65;
-  const levels = 8;
-  const mix = 0.5;
-
   const { onAfterRender } = useWebGLCanvas({
     canvas: "#glCanvas",
     fragment: fragment,
@@ -21,7 +17,7 @@ import Layout from "../../layouts/Layout.astro";
     //     { colorSpace: "srgb" }
     //   ),
     // },
-    postEffects: [bloom({ levels, radius, mix }), linearToSRGB()],
+    postEffects: [bloom(), linearToSRGB()],
   });
 
   onAfterRender(incrementRenderCount);
diff --git a/lib/src/effects/bloom/index.ts b/lib/src/effects/bloom/index.ts
index df7184c..02c6186 100644
--- a/lib/src/effects/bloom/index.ts
+++ b/lib/src/effects/bloom/index.ts
@@ -73,5 +73,24 @@ export function bloom(params: BloomParams = {}) {
     },
   });
 
-  return useCompositeEffectPass([...downsamplePasses, ...upsamplePasses, combine]);
+  const bloomPasses = [...downsamplePasses, ...upsamplePasses, combine];
+
+  const bloomUniforms = {
+    get uRadius() {
+      return upsamplePasses[0].uniforms.uRadius;
+    },
+    set uRadius(value: number) {
+      upsamplePasses.forEach((pass) => {
+        pass.uniforms.uRadius = value;
+      });
+    },
+    get uMix() {
+      return combine.uniforms.uMix;
+    },
+    set uMix(value: number) {
+      combine.uniforms.uMix = value;
+    },
+  };
+
+  return useCompositeEffectPass(bloomPasses, bloomUniforms);
 }
diff --git a/lib/src/hooks/useCompositeEffectPass.ts b/lib/src/hooks/useCompositeEffectPass.ts
index c430456..d5e1c18 100644
--- a/lib/src/hooks/useCompositeEffectPass.ts
+++ b/lib/src/hooks/useCompositeEffectPass.ts
@@ -4,12 +4,14 @@ import type {
   EffectPass,
   RenderCallback,
   RenderTarget,
+  Uniforms,
   UpdatedCallback,
 } from "../types";
 
-export function useCompositeEffectPass<P extends EffectPass<any>[]>(
-  passes: P,
-): CompositeEffectPass<P> {
+export function useCompositeEffectPass<U extends Uniforms = Record<string, never>>(
+  passes: EffectPass[],
+  uniforms: U,
+): CompositeEffectPass<U> {
   const outputPass = passes.at(-1)!;
 
   const [beforeRenderCallbacks, onBeforeRender] = useLifeCycleCallback<RenderCallback<any>>();
@@ -48,6 +50,7 @@ export function useCompositeEffectPass<P extends EffectPass<any>[]>(
     get target() {
       return outputPass.target;
     },
+    uniforms,
     passes,
     onBeforeRender,
     onAfterRender,
diff --git a/lib/src/hooks/useCompositor.ts b/lib/src/hooks/useCompositor.ts
index 3bdc2d2..fa0fbde 100644
--- a/lib/src/hooks/useCompositor.ts
+++ b/lib/src/hooks/useCompositor.ts
@@ -12,7 +12,7 @@ import type { CompositeEffectPass, EffectPass, RenderPass } from "../types";
 export function useCompositor(
   gl: WebGL2RenderingContext,
   renderPass: RenderPass<any>,
-  effects: Array<EffectPass<any> | CompositeEffectPass<EffectPass<any>[]>>,
+  effects: Array<EffectPass<any> | CompositeEffectPass<any>>,
 ) {
   // add the ability to render to floating-point buffers
   gl.getExtension("EXT_color_buffer_float");
diff --git a/lib/src/types.ts b/lib/src/types.ts
index 4539890..7669d57 100644
--- a/lib/src/types.ts
+++ b/lib/src/types.ts
@@ -57,10 +57,9 @@ export interface RenderPass<U extends Uniforms = Record<string, never>> extends
 
 export type EffectPass<U extends Uniforms = Record<string, never>> = RenderPass<U>;
 
-export interface CompositeEffectPass<
-  P extends EffectPass<any>[] = EffectPass<never>[],
-> extends Omit<EffectPass, "fragment" | "vertex" | "uniforms"> {
-  passes: P;
+export interface CompositeEffectPass<U extends Uniforms = Record<string, never>>
+  extends Omit<EffectPass<U>, "fragment" | "vertex"> {
+  passes: EffectPass[];
 }
 
 export type DrawMode =

From 4878ea05bab8c33129a41c1156868058ea74b885 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Wed, 13 Aug 2025 22:23:27 +0200
Subject: [PATCH 12/15] fix issue in bloom effect

---
 lib/src/effects/bloom/glsl/downsample.frag | 2 +-
 lib/src/effects/bloom/index.ts             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/src/effects/bloom/glsl/downsample.frag b/lib/src/effects/bloom/glsl/downsample.frag
index 3d10bf0..08327b2 100644
--- a/lib/src/effects/bloom/glsl/downsample.frag
+++ b/lib/src/effects/bloom/glsl/downsample.frag
@@ -30,5 +30,5 @@ void main() {
     color += weights[i] * texture(uInputTexture, sampleUv);
   }
 
-  fragColor = texture(uInputTexture, vUv);
+  fragColor = color;
 }
diff --git a/lib/src/effects/bloom/index.ts b/lib/src/effects/bloom/index.ts
index 02c6186..c932a19 100644
--- a/lib/src/effects/bloom/index.ts
+++ b/lib/src/effects/bloom/index.ts
@@ -54,7 +54,7 @@ export function bloom(params: BloomParams = {}) {
         uCurrentTexture: () => downsamplePasses[level].target!.texture,
         uPreviousTexture:
           level === levels - 1
-            ? () => downsamplePasses[levels - 1].target!.texture
+            ? () => downsamplePasses.at(-1)!.target!.texture
             : () => upsamplePasses[levels - 1 - level - 1].target!.texture,
         uRadius: radius,
       },

From 671f16d8601992c0edce8648436588e0f70873ee Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Wed, 13 Aug 2025 22:34:50 +0200
Subject: [PATCH 13/15] fix package version in documentation examples

---
 docs/components/ExampleEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/ExampleEditor.vue b/docs/components/ExampleEditor.vue
index 47c16af..864c33f 100644
--- a/docs/components/ExampleEditor.vue
+++ b/docs/components/ExampleEditor.vue
@@ -7,7 +7,7 @@
       ...props,
       deps: {
         ...deps,
-        usegl: '*',
+        usegl: '0.6.0',
       },
     }"
   >

From ae55ea259405b9f5653adf8d742da243c20578de Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Wed, 13 Aug 2025 22:52:45 +0200
Subject: [PATCH 14/15] fix build

---
 lib/src/effects/bloom/glsl/combine.frag       | 13 -------
 lib/src/effects/bloom/glsl/combine.frag.ts    | 15 ++++++++
 lib/src/effects/bloom/glsl/downsample.frag    | 34 ------------------
 lib/src/effects/bloom/glsl/downsample.frag.ts | 36 +++++++++++++++++++
 lib/src/effects/bloom/glsl/sample.vert        | 12 -------
 lib/src/effects/bloom/glsl/sample.vert.ts     | 14 ++++++++
 lib/src/effects/bloom/glsl/upsample.frag      | 36 -------------------
 lib/src/effects/bloom/glsl/upsample.frag.ts   | 36 +++++++++++++++++++
 lib/src/effects/bloom/index.ts                | 10 +++---
 lib/src/effects/linearToSRGB/index.ts         |  4 +--
 .../effects/linearToSRGB/linearToSRGB.frag    | 14 --------
 .../effects/linearToSRGB/linearToSRGB.frag.ts | 16 +++++++++
 12 files changed, 124 insertions(+), 116 deletions(-)
 delete mode 100644 lib/src/effects/bloom/glsl/combine.frag
 create mode 100644 lib/src/effects/bloom/glsl/combine.frag.ts
 delete mode 100644 lib/src/effects/bloom/glsl/downsample.frag
 create mode 100644 lib/src/effects/bloom/glsl/downsample.frag.ts
 delete mode 100644 lib/src/effects/bloom/glsl/sample.vert
 create mode 100644 lib/src/effects/bloom/glsl/sample.vert.ts
 delete mode 100644 lib/src/effects/bloom/glsl/upsample.frag
 create mode 100644 lib/src/effects/bloom/glsl/upsample.frag.ts
 delete mode 100644 lib/src/effects/linearToSRGB/linearToSRGB.frag
 create mode 100644 lib/src/effects/linearToSRGB/linearToSRGB.frag.ts

diff --git a/lib/src/effects/bloom/glsl/combine.frag b/lib/src/effects/bloom/glsl/combine.frag
deleted file mode 100644
index 5e09a1e..0000000
--- a/lib/src/effects/bloom/glsl/combine.frag
+++ /dev/null
@@ -1,13 +0,0 @@
-uniform sampler2D uImage;
-uniform sampler2D uBloomTexture;
-uniform float uMix;
-
-in vec2 vUv;
-out vec4 outColor;
-
-void main() {
-  vec4 baseColor = texture(uImage, vUv);
-  vec4 bloomColor = texture(uBloomTexture, vUv);
-
-  outColor = max(baseColor, mix(baseColor, bloomColor, uMix));
-}
diff --git a/lib/src/effects/bloom/glsl/combine.frag.ts b/lib/src/effects/bloom/glsl/combine.frag.ts
new file mode 100644
index 0000000..fa12310
--- /dev/null
+++ b/lib/src/effects/bloom/glsl/combine.frag.ts
@@ -0,0 +1,15 @@
+export const combineFragment = /* glsl */ `
+  uniform sampler2D uImage;
+  uniform sampler2D uBloomTexture;
+  uniform float uMix;
+
+  in vec2 vUv;
+  out vec4 outColor;
+
+  void main() {
+    vec4 baseColor = texture(uImage, vUv);
+    vec4 bloomColor = texture(uBloomTexture, vUv);
+
+    outColor = max(baseColor, mix(baseColor, bloomColor, uMix));
+  }
+`;
diff --git a/lib/src/effects/bloom/glsl/downsample.frag b/lib/src/effects/bloom/glsl/downsample.frag
deleted file mode 100644
index 08327b2..0000000
--- a/lib/src/effects/bloom/glsl/downsample.frag
+++ /dev/null
@@ -1,34 +0,0 @@
-uniform sampler2D uInputTexture;
-
-in vec2 vUv;
-in vec2 vTexelSize;
-out vec4 fragColor;
-
-void main() {
-  vec2 offsets[13] = vec2[](
-    vec2(-1.0,  1.0), vec2( 1.0,  1.0),
-    vec2(-1.0, -1.0), vec2( 1.0, -1.0),
-    vec2(-2.0,  2.0), vec2( 0.0,  2.0), vec2( 2.0,  2.0),
-    vec2(-2.0,  0.0), vec2( 0.0,  0.0), vec2( 2.0,  0.0),
-    vec2(-2.0, -2.0), vec2( 0.0, -2.0), vec2( 2.0, -2.0)
-  );
-
-  float weights[13] = float[](
-    // 4 corners
-    0.125, 0.125,
-    0.125, 0.125,
-    // 9 center
-    0.0555555, 0.0555555, 0.0555555,
-    0.0555555, 0.0555555, 0.0555555,
-    0.0555555, 0.0555555, 0.0555555
-  );
-
-  vec4 color = vec4(0.0);
-
-  for (int i = 0; i < 13; i++) {
-    vec2 sampleUv = vUv + offsets[i] * vTexelSize;
-    color += weights[i] * texture(uInputTexture, sampleUv);
-  }
-
-  fragColor = color;
-}
diff --git a/lib/src/effects/bloom/glsl/downsample.frag.ts b/lib/src/effects/bloom/glsl/downsample.frag.ts
new file mode 100644
index 0000000..8468e06
--- /dev/null
+++ b/lib/src/effects/bloom/glsl/downsample.frag.ts
@@ -0,0 +1,36 @@
+export const downSampleFragment = /* glsl */ `
+  uniform sampler2D uInputTexture;
+
+  in vec2 vUv;
+  in vec2 vTexelSize;
+  out vec4 fragColor;
+
+  void main() {
+    vec2 offsets[13] = vec2[](
+      vec2(-1.0,  1.0), vec2( 1.0,  1.0),
+      vec2(-1.0, -1.0), vec2( 1.0, -1.0),
+      vec2(-2.0,  2.0), vec2( 0.0,  2.0), vec2( 2.0,  2.0),
+      vec2(-2.0,  0.0), vec2( 0.0,  0.0), vec2( 2.0,  0.0),
+      vec2(-2.0, -2.0), vec2( 0.0, -2.0), vec2( 2.0, -2.0)
+    );
+
+    float weights[13] = float[](
+      // 4 corners
+      0.125, 0.125,
+      0.125, 0.125,
+      // 9 center
+      0.0555555, 0.0555555, 0.0555555,
+      0.0555555, 0.0555555, 0.0555555,
+      0.0555555, 0.0555555, 0.0555555
+    );
+
+    vec4 color = vec4(0.0);
+
+    for (int i = 0; i < 13; i++) {
+      vec2 sampleUv = vUv + offsets[i] * vTexelSize;
+      color += weights[i] * texture(uInputTexture, sampleUv);
+    }
+
+    fragColor = color;
+  }
+`;
diff --git a/lib/src/effects/bloom/glsl/sample.vert b/lib/src/effects/bloom/glsl/sample.vert
deleted file mode 100644
index 78d91ee..0000000
--- a/lib/src/effects/bloom/glsl/sample.vert
+++ /dev/null
@@ -1,12 +0,0 @@
-uniform sampler2D uInputTexture;
-uniform float uTexelSizeMultiplier;
-
-in vec2 aPosition;
-out vec2 vTexelSize;
-out vec2 vUv;
-
-void main() {
-  vTexelSize = uTexelSizeMultiplier / vec2(textureSize(uInputTexture, 0).xy);
-  vUv = aPosition.xy * 0.5 + 0.5;
-  gl_Position = vec4(aPosition.xy, 1.0, 1.0);
-}
diff --git a/lib/src/effects/bloom/glsl/sample.vert.ts b/lib/src/effects/bloom/glsl/sample.vert.ts
new file mode 100644
index 0000000..7a7aa6b
--- /dev/null
+++ b/lib/src/effects/bloom/glsl/sample.vert.ts
@@ -0,0 +1,14 @@
+export const sampleVertex = /* glsl */ `
+  uniform sampler2D uInputTexture;
+  uniform float uTexelSizeMultiplier;
+
+  in vec2 aPosition;
+  out vec2 vTexelSize;
+  out vec2 vUv;
+
+  void main() {
+    vTexelSize = uTexelSizeMultiplier / vec2(textureSize(uInputTexture, 0).xy);
+    vUv = aPosition.xy * 0.5 + 0.5;
+    gl_Position = vec4(aPosition.xy, 1.0, 1.0);
+  }
+`;
diff --git a/lib/src/effects/bloom/glsl/upsample.frag b/lib/src/effects/bloom/glsl/upsample.frag
deleted file mode 100644
index e22f4b0..0000000
--- a/lib/src/effects/bloom/glsl/upsample.frag
+++ /dev/null
@@ -1,36 +0,0 @@
-uniform sampler2D uCurrentTexture;  // Texture at the current (higher) resolution
-uniform sampler2D uPreviousTexture; // Texture at the lower (blurrier) resolution
-uniform float uRadius;              // Interpolation factor
-
-in vec2 vTexelSize;
-in vec2 vUv;
-out vec4 fragColor;
-
-float clampToBorder(const in vec2 uv) {
-  return (uv.s >= 0.0 && uv.s <= 1.0 && uv.t >= 0.0 && uv.t <= 1.0) ? 1.0 : 0.5;
-}
-
-void main() {
-  vec2 offsets[9] = vec2[](
-    vec2(-1.0,  1.0), vec2( 0.0,  1.0), vec2( 1.0,  1.0),
-    vec2(-1.0,  0.0), vec2( 0.0,  0.0), vec2( 1.0,  0.0),
-    vec2(-1.0, -1.0), vec2( 0.0, -1.0), vec2( 1.0, -1.0)
-  );
-  float weights[9] = float[](
-    0.0625, 0.125, 0.0625,
-    0.125,  0.25,  0.125,
-    0.0625, 0.125, 0.0625
-  );
-
-  vec4 prevColor = vec4(0.0);
-  for (int i = 0; i < 9; i++) {
-    vec2 sampleUv = vUv + offsets[i] * vTexelSize;
-    prevColor += weights[i] * clampToBorder(sampleUv) * texture(uPreviousTexture, sampleUv);
-  }
-
-  vec4 currColor = texture(uCurrentTexture, vUv);
-
-  fragColor = max(currColor, mix(currColor, prevColor, uRadius));
-}
-
-
diff --git a/lib/src/effects/bloom/glsl/upsample.frag.ts b/lib/src/effects/bloom/glsl/upsample.frag.ts
new file mode 100644
index 0000000..5eb7b09
--- /dev/null
+++ b/lib/src/effects/bloom/glsl/upsample.frag.ts
@@ -0,0 +1,36 @@
+export const upsampleFragment = /* glsl */ `
+  uniform sampler2D uCurrentTexture;  // Texture at the current (higher) resolution
+  uniform sampler2D uPreviousTexture; // Texture at the lower (blurrier) resolution
+  uniform float uRadius;              // Interpolation factor
+
+  in vec2 vTexelSize;
+  in vec2 vUv;
+  out vec4 fragColor;
+
+  float clampToBorder(const in vec2 uv) {
+    return (uv.s >= 0.0 && uv.s <= 1.0 && uv.t >= 0.0 && uv.t <= 1.0) ? 1.0 : 0.5;
+  }
+
+  void main() {
+    vec2 offsets[9] = vec2[](
+      vec2(-1.0,  1.0), vec2( 0.0,  1.0), vec2( 1.0,  1.0),
+      vec2(-1.0,  0.0), vec2( 0.0,  0.0), vec2( 1.0,  0.0),
+      vec2(-1.0, -1.0), vec2( 0.0, -1.0), vec2( 1.0, -1.0)
+    );
+    float weights[9] = float[](
+      0.0625, 0.125, 0.0625,
+      0.125,  0.25,  0.125,
+      0.0625, 0.125, 0.0625
+    );
+
+    vec4 prevColor = vec4(0.0);
+    for (int i = 0; i < 9; i++) {
+      vec2 sampleUv = vUv + offsets[i] * vTexelSize;
+      prevColor += weights[i] * clampToBorder(sampleUv) * texture(uPreviousTexture, sampleUv);
+    }
+
+    vec4 currColor = texture(uCurrentTexture, vUv);
+
+    fragColor = max(currColor, mix(currColor, prevColor, uRadius));
+  }
+`;
diff --git a/lib/src/effects/bloom/index.ts b/lib/src/effects/bloom/index.ts
index c932a19..ca9a58c 100644
--- a/lib/src/effects/bloom/index.ts
+++ b/lib/src/effects/bloom/index.ts
@@ -2,11 +2,11 @@ import { useCompositeEffectPass } from "../../hooks/useCompositeEffectPass";
 import { useEffectPass } from "../../hooks/useEffectPass";
 import type { EffectPass } from "../../types";
 
-import downsampleFragment from "./glsl/downsample.frag?raw";
-import sampleVertex from "./glsl/sample.vert?raw";
-import upsampleFragment from "./glsl/upsample.frag?raw";
-import combineFragment from "./glsl/combine.frag?raw";
 import { RenderTargetParams } from "../../core/renderTarget";
+import { downSampleFragment } from "./glsl/downsample.frag";
+import { combineFragment } from "./glsl/combine.frag";
+import { sampleVertex } from "./glsl/sample.vert";
+import { upsampleFragment } from "./glsl/upsample.frag";
 
 export type BloomParams = {
   levels?: number;
@@ -29,7 +29,7 @@ export function bloom(params: BloomParams = {}) {
   // --- Downsample pyramid (progressively half resolution) ---
   for (let level = 1; level <= levels; level++) {
     const pass = useEffectPass({
-      fragment: downsampleFragment,
+      fragment: downSampleFragment,
       target: floatTargetConfig,
       vertex: sampleVertex,
       resolutionScale: 1 / 2 ** level,
diff --git a/lib/src/effects/linearToSRGB/index.ts b/lib/src/effects/linearToSRGB/index.ts
index 3f36166..79ea947 100644
--- a/lib/src/effects/linearToSRGB/index.ts
+++ b/lib/src/effects/linearToSRGB/index.ts
@@ -1,8 +1,8 @@
 import { useEffectPass } from "../../hooks/useEffectPass";
-import linearToSRGBFrag from "./linearToSRGB.frag";
+import { linearToSRGBFragment } from "./linearToSRGB.frag";
 
 export function linearToSRGB() {
   return useEffectPass({
-    fragment: linearToSRGBFrag,
+    fragment: linearToSRGBFragment,
   });
 }
diff --git a/lib/src/effects/linearToSRGB/linearToSRGB.frag b/lib/src/effects/linearToSRGB/linearToSRGB.frag
deleted file mode 100644
index 0076880..0000000
--- a/lib/src/effects/linearToSRGB/linearToSRGB.frag
+++ /dev/null
@@ -1,14 +0,0 @@
-uniform sampler2D uTexture;
-varying vec2 vUv;
-
-void main() {
-  vec4 color = texture(uTexture, vUv);
-  gl_FragColor = vec4(
-    mix(
-      color.rgb * 12.92,
-      pow(color.rgb, vec3(1.0 / 2.4)) * 1.055 - 0.055,
-      step(vec3(0.0031308), color.rgb)
-    ),
-    color.a
-  );
-}
diff --git a/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts b/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts
new file mode 100644
index 0000000..b3168fd
--- /dev/null
+++ b/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts
@@ -0,0 +1,16 @@
+export const linearToSRGBFragment = /* glsl */ `
+  uniform sampler2D uTexture;
+  varying vec2 vUv;
+
+  void main() {
+    vec4 color = texture(uTexture, vUv);
+    gl_FragColor = vec4(
+      mix(
+        color.rgb * 12.92,
+        pow(color.rgb, vec3(1.0 / 2.4)) * 1.055 - 0.055,
+        step(vec3(0.0031308), color.rgb)
+      ),
+      color.a
+    );
+  }
+`

From 83a7665708daad0bd439ccd4e83a01fb5cac9375 Mon Sep 17 00:00:00 2001
From: Julien Sulpis <code@jsulpis.dev>
Date: Wed, 13 Aug 2025 23:04:20 +0200
Subject: [PATCH 15/15] fix lint

---
 lib/eslint.config.mjs                             | 1 +
 lib/src/core/texture.ts                           | 3 +--
 lib/src/effects/bloom/index.ts                    | 6 +++---
 lib/src/effects/linearToSRGB/linearToSRGB.frag.ts | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/eslint.config.mjs b/lib/eslint.config.mjs
index a7415f9..15e846a 100644
--- a/lib/eslint.config.mjs
+++ b/lib/eslint.config.mjs
@@ -7,5 +7,6 @@ export default unjs({
     "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/triple-slash-reference": "off",
     "unicorn/prefer-top-level-await": "off",
+    "no-console": ["error", { allow: ["warn", "error", "info"] }],
   },
 });
diff --git a/lib/src/core/texture.ts b/lib/src/core/texture.ts
index 9a7e92d..3177bf4 100644
--- a/lib/src/core/texture.ts
+++ b/lib/src/core/texture.ts
@@ -129,7 +129,7 @@ export function fillTexture(
       ? WebGL2RenderingContext.SRGB8_ALPHA8
       : WebGL2RenderingContext.RGBA,
     type = WebGL2RenderingContext.UNSIGNED_BYTE,
-    generateMipmaps = "src" in params, // no mipmap for data textures
+    generateMipmaps = "src" in params && params.src != null, // no mipmap for data textures
     anisotropy = 1,
     minFilter = generateMipmaps ? "linear-mipmap-linear" : "linear",
     magFilter = "linear",
@@ -153,7 +153,6 @@ export function fillTexture(
 
     // anisotropic filtering
     if (anisotropy > 1) {
-      console.log("anisotropy", anisotropy);
       const ext = gl.getExtension("EXT_texture_filter_anisotropic");
       if (ext) {
         const maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
diff --git a/lib/src/effects/bloom/index.ts b/lib/src/effects/bloom/index.ts
index ca9a58c..2dd7456 100644
--- a/lib/src/effects/bloom/index.ts
+++ b/lib/src/effects/bloom/index.ts
@@ -2,7 +2,7 @@ import { useCompositeEffectPass } from "../../hooks/useCompositeEffectPass";
 import { useEffectPass } from "../../hooks/useEffectPass";
 import type { EffectPass } from "../../types";
 
-import { RenderTargetParams } from "../../core/renderTarget";
+import type { RenderTargetParams } from "../../core/renderTarget";
 import { downSampleFragment } from "./glsl/downsample.frag";
 import { combineFragment } from "./glsl/combine.frag";
 import { sampleVertex } from "./glsl/sample.vert";
@@ -80,9 +80,9 @@ export function bloom(params: BloomParams = {}) {
       return upsamplePasses[0].uniforms.uRadius;
     },
     set uRadius(value: number) {
-      upsamplePasses.forEach((pass) => {
+      for (const pass of upsamplePasses) {
         pass.uniforms.uRadius = value;
-      });
+      }
     },
     get uMix() {
       return combine.uniforms.uMix;
diff --git a/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts b/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts
index b3168fd..510fee8 100644
--- a/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts
+++ b/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts
@@ -13,4 +13,4 @@ export const linearToSRGBFragment = /* glsl */ `
       color.a
     );
   }
-`
+`;