refactor: use vite-plugin-glsl to load shaders

Author: jsulpis

lib/astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
 import { resolve, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
+import glsl from "vite-plugin-glsl";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -14,6 +15,7 @@ export default defineConfig({
         usegl: resolve(__dirname, "./src/index.ts"),
       },
     },
+    plugins: [glsl({ minify: true })],
   },
   devToolbar: {
     enabled: false,

lib/package.json

@@ -41,7 +41,8 @@
     "eslint-config-unjs": "0.5.0",
     "prettier": "3.6.2",
     "tsdown": "0.14.1",
-    "typescript": "5.8.3"
+    "typescript": "5.8.3",
+    "vite-plugin-glsl": "1.5.1"
   },
   "changelog": {
     "excludeAuthors": [

lib/playground/tsconfig.json

@@ -3,6 +3,7 @@
   "include": ["../src", "src"],
   "compilerOptions": {
     "strict": true,
+    "types": ["vite-plugin-glsl/ext"],
     "paths": {
       "usegl": ["../src/index.ts"]
     }

lib/src/effects/bloom/glsl/combine.frag

@@ -0,0 +1,13 @@
+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));
+}

lib/src/effects/bloom/glsl/combine.frag.ts

@@ -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 = color;
+}

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

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

lib/src/effects/bloom/glsl/downsample.frag.ts

@@ -0,0 +1,34 @@
+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));
+}