Use glsl files

.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"
+	}
 }

README.md

@@ -1,4 +1,4 @@
-# React Mouse Trail <img src="https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true" style="height: 40px"/>
+# React WebGL Trails <img src="https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true" style="height: 40px"/>
 
 [![test](https://github.com/react18-tools/react-mouse-trail/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react-mouse-trail/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/4bb3a3316ff4ecd2a9eb/maintainability)](https://codeclimate.com/github/react18-tools/react-mouse-trail/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react-mouse-trail/graph/badge.svg)](https://codecov.io/gh/react18-tools/react-mouse-trail) [![Version](https://img.shields.io/npm/v/react-mouse-trails.svg?colorB=green)](https://www.npmjs.com/package/react-mouse-trails) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-mouse-trails.svg)](https://www.npmjs.com/package/react-mouse-trails) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-mouse-trails) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
 
@@ -21,19 +21,19 @@ A lightweight WebGL-based React component for creating an interactive mouse trai
 ### Installation
 
 ```bash
-$ pnpm add react-mouse-trails
+$ pnpm add react-webgl-trails
 ```
 
 **_or_**
 
 ```bash
-$ npm install react-mouse-trails
+$ npm install react-webgl-trails
 ```
 
 **_or_**
 
 ```bash
-$ yarn add react-mouse-trails
+$ yarn add react-webgl-trails
 ```
 
 ## Usage

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-mouse-trails
 
+## 0.0.4
+
+### Patch Changes
+
+- b3e0277: Refactor: use glsl shader files.
+
 ## 0.0.3
 
 ### Patch Changes

lib/package.json

@@ -2,15 +2,15 @@
   "name": "react-mouse-trails",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A lightweight WebGL-based React component for creating a mouse trail effect.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "repository": "github:react18-tools/react-mouse-trail",
-  "bugs": "https://github.com/react18-tools/react-mouse-trail/issues",
-  "homepage": "https://github.com/react18-tools/react-mouse-trail/#readme",
+  "repository": "github:react18-tools/react-webgl-trails",
+  "bugs": "https://github.com/react18-tools/react-webgl-trails/issues",
+  "homepage": "https://github.com/react18-tools/react-webgl-trails/#readme",
   "sideEffects": false,
   "files": [
     "dist/**"
@@ -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(),

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [b3e0277]
+  - react-mouse-trails@0.0.4
+
 ## 0.0.3
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",