docs: add an example of multi-pass post-processing effect (bloom)

Author: jsulpis

docs/examples/post-processing/multi-pass/blur.frag

@@ -0,0 +1,25 @@
+uniform sampler2D uImage;
+uniform vec2 uResolution;
+uniform vec2 uDirection;
+in vec2 vUv;
+out vec4 outColor;
+
+const float weights[5] = float[](0.19638062, 0.29675293, 0.09442139, 0.01037598, 0.00025940);
+const float offsets[5] = float[](0.0, 1.41176471, 3.29411765, 5.17647059, 7.05882353);
+
+void main() {
+  vec3 color = texture(uImage, vUv).rgb * weights[0];
+  float weightSum = weights[0];
+
+  if (vUv.x < 0.52) {
+    for(int i = 1; i < 5; i++) {
+      vec2 offset = (offsets[i] / uResolution) * 0.5 * uDirection;
+      color += texture(uImage, vUv + offset).rgb * weights[i];
+      color += texture(uImage, vUv - offset).rgb * weights[i];
+      weightSum += 2.0 * weights[i];
+    }
+    color /= weightSum;
+  }
+
+  outColor = vec4(color, 1.0);
+}

docs/examples/post-processing/multi-pass/circles.frag

@@ -0,0 +1,19 @@
+uniform float uTime;
+in vec2 vUv;
+out vec4 outColor;
+
+float sdCircle(vec2 p, float r) {
+    return length(p) - r;
+  }
+
+vec3 drawCircle(vec2 pos, float radius, vec3 color) {
+  return smoothstep(radius * 1.01, radius * .99, sdCircle(pos, radius)) * color;
+}
+
+void main() {
+  vec3 color = vec3(0, 0.07, 0.15);
+  color += drawCircle(vUv - vec2(.4), .1 * (1. + sin(uTime/2.)/10.), vec3(vUv, 1.));
+  color += drawCircle(vUv - vec2(.65, .65), .015  * (1. + sin(uTime/2.-1.5)/4.), vec3(vUv, 1.));
+  color += drawCircle(vUv - vec2(.75, .4), .04  * (1. + sin(uTime/2.-1.)/4.), vec3(vUv, 1.));
+  outColor = vec4(color, 1.);
+}

docs/examples/post-processing/multi-pass/combine.frag

@@ -0,0 +1,39 @@
+uniform sampler2D uBaseImage;
+uniform sampler2D uBloomTexture;
+uniform vec2 uResolution;
+uniform float uMix;
+
+in vec2 vUv;
+out vec4 outColor;
+
+vec2 offset(float octave) {
+  vec2 padding = 10.0 / uResolution;
+  float octaveFloor = min(1.0, floor(octave / 3.0));
+  vec2 offset = vec2(
+    -octaveFloor * (0.25 + padding.x),
+    -(1.0 - (1.0 / exp2(octave))) - padding.y * octave + octaveFloor * (0.35 + padding.y)
+  );
+  return offset + 0.5 / uResolution;
+}
+
+vec3 blurredMipmapLevel(float octave) {
+  vec2 offset = offset(octave - 1.0);
+  return texture(uBloomTexture, vUv / exp2(octave) - offset).rgb;
+}
+
+vec3 bloomColor() {
+  return blurredMipmapLevel(1.0) * 0.8
+       + blurredMipmapLevel(3.0) * 0.5
+       + blurredMipmapLevel(4.0) * 1.2;
+}
+
+void main() {
+  vec4 baseColor = texture(uBaseImage, vUv);
+  float baseColorGreyscale = dot(baseColor.rgb, vec3(0.299, 0.587, 0.114));
+  float mixFactor = (1.0 - baseColorGreyscale * baseColor.a) * uMix;
+
+  vec4 combinedColor = baseColor;
+  combinedColor.rgb += bloomColor() * mixFactor;
+
+  outColor = combinedColor;
+}

docs/examples/post-processing/multi-pass/index.md

@@ -0,0 +1,15 @@
+---
+title: "Multi pass (bloom)"
+---
+
+::: example-editor {deps=tweakpane@^4.0.5}
+
+<<< ./index.ts
+<<< ./circles.frag
+<<< ./mipmap.frag
+<<< ./blur.frag
+<<< ./combine.frag
+<<< ./styles.css
+<<< @/snippets/default/index.html
+
+:::

docs/examples/post-processing/multi-pass/index.ts

@@ -0,0 +1,91 @@
+import { useEffectPass, useWebGLCanvas, useCompositeEffectPass } from "usegl";
+import fragment from "./circles.frag?raw";
+import mipmapsShader from "./mipmap.frag?raw";
+import blurShader from "./blur.frag?raw";
+import combineShader from "./combine.frag?raw";
+import { Pane } from "tweakpane";
+import "./styles.css";
+
+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: {
+    uBaseImage: ({ inputPass }) => inputPass.target!.texture,
+    uBloomTexture: () => verticalBlur.target!.texture,
+    uMix: 1,
+  },
+});
+
+const bloomEffect = useCompositeEffectPass({
+  mipmaps,
+  horizontalBlur,
+  verticalBlur,
+  combine,
+});
+
+const vignetteEffect = useEffectPass({
+  fragment: /* glsl */ `
+    uniform sampler2D uTexture;
+    uniform float uSize;      // (0.0 - 1.0)
+    uniform float uRoundness; // (0.0 = rectangle, 1.0 = round)
+    uniform float uStrength;  // (0.0 - 1.0)
+    varying vec2 vUv;
+
+    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, uRoundness);
+      return 1. - smoothstep(uSize, uSize * 2., dist) * uStrength;
+    }
+
+    void main() {
+      vec4 color = texture(uTexture, vUv);
+      color.rgb *= vignette();
+      gl_FragColor = color;
+    }
+  `,
+  uniforms: {
+    uStrength: 0.5,
+    uSize: 0.6,
+    uRoundness: 0.7,
+  },
+});
+
+useWebGLCanvas({
+  canvas: "#glCanvas",
+  fragment: fragment,
+  postEffects: [vignetteEffect, bloomEffect],
+});
+
+const pane = new Pane({ title: "Uniforms" });
+
+// You can update the uniforms of each individual pass, which will trigger a re-render
+const bloom = pane.addFolder({ title: "Bloom" });
+bloom.addBinding(bloomEffect.passes.mipmaps.uniforms, "uThreshold", { min: 0, max: 1 });
+bloom.addBinding(combine.uniforms, "uMix", { min: 0, max: 1 });
+
+const vignette = pane.addFolder({ title: "Vignette" });
+vignette.addBinding(vignetteEffect.uniforms, "uStrength", { min: 0, max: 1 });
+vignette.addBinding(vignetteEffect.uniforms, "uSize", { min: 0, max: 1 });
+vignette.addBinding(vignetteEffect.uniforms, "uRoundness", { min: 0, max: 1 });

docs/examples/post-processing/multi-pass/mipmap.frag

@@ -0,0 +1,41 @@
+uniform sampler2D uImage;
+uniform vec2 uResolution;
+uniform float uThreshold;
+
+in vec2 vUv;
+out vec4 outColor;
+
+vec2 offset(float octave) {
+  vec2 padding = 10.0 / uResolution;
+  float octaveFloor = min(1.0, floor(octave / 3.0));
+  return vec2(
+    -octaveFloor * (0.25 + padding.x),
+    -(1.0 - (1.0 / exp2(octave))) - padding.y * octave + octaveFloor * (0.35 + padding.y)
+  );
+}
+
+vec3 mipmapLevel(float octave) {
+  float scale = exp2(octave);
+  vec2 coord = (vUv + offset(octave - 1.0)) * scale;
+
+  if (any(lessThan(coord, vec2(0.0))) || any(greaterThan(coord, vec2(1.0)))) {
+    return vec3(0.0);
+  }
+
+  vec3 color = vec3(0.0);
+  int spread = int(scale);
+
+  for (int i = 0; i < spread; i++) {
+    for (int j = 0; j < spread; j++) {
+      vec2 offset = (vec2(i, j) / uResolution) * scale / float(spread);
+      vec3 imageColor = texture(uImage, coord + offset).rgb;
+      color += max(vec3(0.0), imageColor - vec3(uThreshold));
+    }
+  }
+
+  return color / float(spread * spread);
+}
+
+void main() {
+  outColor = vec4(mipmapLevel(1.0) + mipmapLevel(3.0) + mipmapLevel(4.0), 1.0);
+}

docs/examples/post-processing/multi-pass/styles.css

@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+  background: black;
+  height: 100svh;
+  display: grid;
+  place-items: center;
+}
+
+canvas {
+  width: min(90svmin, 900px);
+  aspect-ratio: 1;
+  display: block;
+  border-radius: 8px;
+  border: 1px solid #555;
+}
+
+.tp-dfwv {
+  width: 260px !important;
+}

docs/types.d.ts

@@ -0,0 +1,19 @@
+declare module "*.glsl" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.vert" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.frag" {
+  const content: string;
+  export default content;
+}
+
+declare module "*?raw" {
+  const content: string;
+  export default content;
+}