refactor: use fragment files

Author: mayank1513

.vscode/settings.json

@@ -13,5 +13,8 @@
 	"editor.formatOnSave": true,
 	"editor.formatOnPaste": true,
 	"editor.formatOnSaveMode": "file",
-	"mayank1513.trello-kanban.Workspace.filePath": ".tkb"
+	"mayank1513.trello-kanban.Workspace.filePath": ".tkb",
+	"[glsl]": {
+		"editor.defaultFormatter": "raczzalan.webgl-glsl-editor"
+	}
 }

lib/package.json

@@ -35,6 +35,7 @@
     "esbuild-plugin-rdi": "^0.0.0",
     "esbuild-plugin-react18": "0.2.4",
     "esbuild-plugin-react18-css": "^0.0.4",
+    "esbuild-plugin-webgl": "^0.0.1",
     "jsdom": "^24.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

lib/src/declaration.d.ts

@@ -1,2 +1,10 @@
 declare module "*.module.css";
 declare module "*.module.scss";
+declare module "*.glsl" {
+  const value: string;
+  export default value;
+}
+declare module "*.glsl?raw" {
+  const value: string;
+  export default value;
+}

lib/src/shaders/frag.glsl

@@ -0,0 +1,7 @@
+precision mediump float;
+
+uniform vec3 c;
+varying float v;
+void main() {
+  gl_FragColor = vec4(c, v);
+}

lib/src/shaders/vert.glsl

@@ -0,0 +1,7 @@
+attribute vec2 pos;
+attribute float a;
+varying float v;
+void main() {
+  gl_Position = vec4(pos, 0.0, 1.0);
+  v = a;
+}

lib/src/utils.ts

@@ -1,24 +1,8 @@
-const vertexShaderSource = `
-    attribute vec2 pos;
-    attribute float a;
-    varying float v;
-    void main() {
-        gl_Position = vec4(pos, 0.0, 1.0);
-        v = a;
-    }
-`;
-
-/** Create fragmentSource */
-const fragmentShaderSource = (rgb = [1, 0, 0]) => `
-    precision mediump float;
-    varying float v;
-    void main() {
-        gl_FragColor = vec4(${rgb.join()}, v);
-    }
-`;
+import vertexShaderSource from "./shaders/vert.glsl?raw";
+import fragmentShaderSource from "./shaders/frag.glsl?raw";
 
 /** Setup trails */
-export const trails = (gl: WebGLRenderingContext, rgb?: [number, number, number]) => {
+export const trails = (gl: WebGLRenderingContext, rgb: [number, number, number] = [1, 0, 0]) => {
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
@@ -47,7 +31,7 @@ export const trails = (gl: WebGLRenderingContext, rgb?: [number, number, number]
     return buffer;
   };
   const vertexShader = createShader(gl.VERTEX_SHADER, vertexShaderSource);
-  const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource(rgb));
+  const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
   const program = gl.createProgram();
   if (!program) throw new Error("Failed to create program");
   gl.attachShader(program, vertexShader);
@@ -76,6 +60,8 @@ export const trails = (gl: WebGLRenderingContext, rgb?: [number, number, number]
   const positionBuffer = createBuffer();
   const timeBuffer = createBuffer();
 
+  gl.uniform3f(gl.getUniformLocation(program, "c"), ...rgb);
+
   let runningAnim = false;
   let positions: number[] = [];
   let fades: number[] = [];

lib/tsup.config.ts

@@ -3,6 +3,7 @@ import { defineConfig, type Options } from "tsup";
 import react18Plugin from "esbuild-plugin-react18";
 import cssPlugin from "esbuild-plugin-react18-css";
 import { rdiPlugin } from "esbuild-plugin-rdi";
+import { webglPlugin } from "esbuild-plugin-webgl";
 
 export default defineConfig(
   (options: Options) =>
@@ -24,12 +25,12 @@ export default defineConfig(
               const contents = text
                 .replace(/if \(!gl[^}]*}/gm, "")
                 .replace(/;\s*if \(![^;]*;/gm, "!;")
-                .replace(/`[^`]*`/gm, match => match.replace(/\s+/g, " ").trim())
                 .trim();
               return { contents, loader: "ts" };
             });
           },
         },
+        webglPlugin(),
         react18Plugin({ disableJSXRequireDedup: true }),
         cssPlugin({ generateScopedName: "rt_[local]" }),
         rdiPlugin(),