feat: add linearToSRGB effect

Author: jsulpis

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

lib/src/effects/glsl/combine.frag renamed to 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);
 }

lib/src/effects/glsl/downsample.frag renamed to lib/src/effects/bloom/glsl/downsample.frag

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

lib/src/effects/glsl/sample.vert renamed to lib/src/effects/bloom/glsl/sample.vert

@@ -0,0 +1,8 @@
+import { useEffectPass } from "../../hooks/useEffectPass";
+import linearToSRGBFrag from "./linearToSRGB.frag";
+
+export function linearToSRGB() {
+  return useEffectPass({
+    fragment: linearToSRGBFrag,
+  });
+}

lib/src/effects/glsl/upsample.frag renamed to lib/src/effects/bloom/glsl/upsample.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
+  );
+}

lib/src/effects/bloom.ts renamed to lib/src/effects/bloom/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";