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',
       },
     }"
   >
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/playground/src/pages/post-processing/bloom.astro b/lib/playground/src/pages/post-processing/bloom.astro
index a1164bc..1d9adc2 100644
--- a/lib/playground/src/pages/post-processing/bloom.astro
+++ b/lib/playground/src/pages/post-processing/bloom.astro
@@ -3,78 +3,21 @@ 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, linearToSRGB } 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 { 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(), linearToSRGB()],
   });
 
   onAfterRender(incrementRenderCount);
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"),
     },
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/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/core/texture.ts b/lib/src/core/texture.ts
index 39647a9..3177bf4 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,11 +123,14 @@ 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
+    generateMipmaps = "src" in params && params.src != null, // no mipmap for data textures
+    anisotropy = 1,
     minFilter = generateMipmaps ? "linear-mipmap-linear" : "linear",
     magFilter = "linear",
     wrapS = "clamp-to-edge",
@@ -144,14 +152,16 @@ 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) {
+      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),
+        );
+      }
     }
   }
 
@@ -266,13 +276,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",
   };
 }
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.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.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.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
new file mode 100644
index 0000000..2dd7456
--- /dev/null
+++ b/lib/src/effects/bloom/index.ts
@@ -0,0 +1,96 @@
+import { useCompositeEffectPass } from "../../hooks/useCompositeEffectPass";
+import { useEffectPass } from "../../hooks/useEffectPass";
+import type { EffectPass } from "../../types";
+
+import type { 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;
+  radius?: number;
+  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;
+
+  const downsamplePasses: EffectPass<any>[] = [];
+
+  // --- Downsample pyramid (progressively half resolution) ---
+  for (let level = 1; level <= levels; level++) {
+    const pass = useEffectPass({
+      fragment: downSampleFragment,
+      target: floatTargetConfig,
+      vertex: sampleVertex,
+      resolutionScale: 1 / 2 ** level,
+      uniforms: {
+        uTexelSizeMultiplier: 0.5,
+      },
+    });
+    downsamplePasses.push(pass);
+  }
+
+  // --- Upsample & accumulate ---
+  const upsamplePasses: EffectPass<any>[] = [];
+
+  for (let level = levels - 1; level >= 1; level--) {
+    const pass = useEffectPass({
+      fragment: upsampleFragment,
+      target: floatTargetConfig,
+      vertex: sampleVertex,
+      resolutionScale: 1 / 2 ** level,
+      uniforms: {
+        uTexelSizeMultiplier: 1,
+        uCurrentTexture: () => downsamplePasses[level].target!.texture,
+        uPreviousTexture:
+          level === levels - 1
+            ? () => downsamplePasses.at(-1)!.target!.texture
+            : () => upsamplePasses[levels - 1 - level - 1].target!.texture,
+        uRadius: radius,
+      },
+    });
+    upsamplePasses.push(pass);
+  }
+
+  // --- Combine original + bloom ---
+  const combine = useEffectPass({
+    fragment: combineFragment,
+    target: floatTargetConfig,
+    uniforms: {
+      uImage: ({ inputPass }) => inputPass.target!.texture,
+      uBloomTexture: ({ previousPass }) => previousPass.target!.texture,
+      uMix: mix,
+    },
+  });
+
+  const bloomPasses = [...downsamplePasses, ...upsamplePasses, combine];
+
+  const bloomUniforms = {
+    get uRadius() {
+      return upsamplePasses[0].uniforms.uRadius;
+    },
+    set uRadius(value: number) {
+      for (const pass of upsamplePasses) {
+        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/effects/linearToSRGB/index.ts b/lib/src/effects/linearToSRGB/index.ts
new file mode 100644
index 0000000..79ea947
--- /dev/null
+++ b/lib/src/effects/linearToSRGB/index.ts
@@ -0,0 +1,8 @@
+import { useEffectPass } from "../../hooks/useEffectPass";
+import { linearToSRGBFragment } from "./linearToSRGB.frag";
+
+export function linearToSRGB() {
+  return useEffectPass({
+    fragment: linearToSRGBFragment,
+  });
+}
diff --git a/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts b/lib/src/effects/linearToSRGB/linearToSRGB.frag.ts
new file mode 100644
index 0000000..510fee8
--- /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
+    );
+  }
+`;
diff --git a/lib/src/hooks/useCompositeEffectPass.ts b/lib/src/hooks/useCompositeEffectPass.ts
index 81ddd13..d5e1c18 100644
--- a/lib/src/hooks/useCompositeEffectPass.ts
+++ b/lib/src/hooks/useCompositeEffectPass.ts
@@ -1,18 +1,18 @@
-import { createRenderTarget } from "../core/renderTarget";
 import { useLifeCycleCallback } from "../internal/useLifeCycleCallback";
 import type {
   CompositeEffectPass,
   EffectPass,
   RenderCallback,
   RenderTarget,
+  Uniforms,
   UpdatedCallback,
 } from "../types";
 
-export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>>(
-  passes: P,
-): CompositeEffectPass<P> {
-  const effectPasses = Object.values(passes);
-  const outputPass = effectPasses.at(-1)!;
+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>>();
   const [afterRenderCallbacks, onAfterRender] = useLifeCycleCallback<RenderCallback<any>>();
@@ -20,18 +20,14 @@ 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 pass of passes) {
       pass.initialize(gl);
 
-      if (index < effectPasses.length - 1) {
-        pass.setTarget(createRenderTarget(gl));
-      }
-
       pass.onUpdated((newUniforms, oldUniforms) => {
         for (const callback of onUpdatedCallbacks) {
           callback(newUniforms, oldUniforms);
@@ -41,7 +37,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);
     }
   }
@@ -51,7 +47,10 @@ export function useCompositeEffectPass<P extends Record<string, EffectPass<any>>
   }
 
   return {
-    target: outputPass.target,
+    get target() {
+      return outputPass.target;
+    },
+    uniforms,
     passes,
     onBeforeRender,
     onAfterRender,
diff --git a/lib/src/hooks/useCompositor.ts b/lib/src/hooks/useCompositor.ts
index b59722a..fa0fbde 100644
--- a/lib/src/hooks/useCompositor.ts
+++ b/lib/src/hooks/useCompositor.ts
@@ -6,15 +6,17 @@ 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
  */
 export function useCompositor(
   gl: WebGL2RenderingContext,
   renderPass: RenderPass<any>,
-  effects: Array<EffectPass<any> | CompositeEffectPass<Record<string, EffectPass<any>>>>,
+  effects: Array<EffectPass<any> | CompositeEffectPass<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,11 +25,14 @@ 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 !== null) {
+      effect.setTarget(null);
+    }
 
     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;
@@ -58,7 +63,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/hooks/useEffectPass.ts b/lib/src/hooks/useEffectPass.ts
index ed5641d..5837d2c 100644
--- a/lib/src/hooks/useEffectPass.ts
+++ b/lib/src/hooks/useEffectPass.ts
@@ -1,9 +1,47 @@
+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;
+};
+
+const effectTargetConfig: RenderTargetParams = {
+  minFilter: "nearest",
+  magFilter: "nearest",
+};
+
 export function useEffectPass<U extends EffectUniforms>(
-  options: QuadPassOptions<U>,
+  options: EffectPassOptions<U>,
 ): EffectPass<U> {
-  return useQuadRenderPass(undefined, options);
+  const { target = effectTargetConfig, 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/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/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
    */
 
diff --git a/lib/src/index.ts b/lib/src/index.ts
index aa3a58c..e90cd80 100644
--- a/lib/src/index.ts
+++ b/lib/src/index.ts
@@ -18,3 +18,6 @@ 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";
+export { linearToSRGB } from "./effects/linearToSRGB";
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);
 }
diff --git a/lib/src/types.ts b/lib/src/types.ts
index ac0961b..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 Record<string, EffectPass<any>> = Record<string, 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 =
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