@clypra/shader-library 1.0.0

package/.releaserc.json

@@ -0,0 +1,16 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/github"
+  ]
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@clypra/shader-library",
+  "version": "1.0.0",
+  "description": "Reusable GLSL shader library for video effects",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./color": "./dist/color/index.js",
+    "./blur": "./dist/blur/index.js",
+    "./distortion": "./dist/distortion/index.js",
+    "./composite": "./dist/composite/index.js",
+    "./noise": "./dist/noise/index.js",
+    "./utils": "./dist/utils/index.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "tsup": "^8.3.5",
+    "typescript": "~5.8.2",
+    "vitest": "^3.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AIEraDev/clypra-studio.git",
+    "directory": "packages/shader-library"
+  },
+  "homepage": "https://github.com/AIEraDev/clypra-studio/tree/main/packages/shader-library#readme",
+  "bugs": {
+    "url": "https://github.com/AIEraDev/clypra-studio/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @clypra/shader-library
+ *
+ * Reusable GLSL shader library for video effects.
+ * All shaders are organized by category for easy reuse across effects.
+ */
+
+// Utilities
+export * from "./utils";
+
+// Noise functions
+export * from "./noise";
+
+// Note: Other shader categories will be added in subsequent phases
+// export * from './color';
+// export * from './blur';
+// export * from './distortion';
+// export * from './composite';

package/src/noise/index.ts

@@ -0,0 +1,167 @@
+/**
+ * @clypra/shader-library — Noise Shaders
+ *
+ * Various noise generation functions for procedural effects
+ */
+
+/**
+ * Film grain shader
+ */
+export const filmGrainShader = `
+uniform sampler2D uTexture;
+uniform float uIntensity;
+uniform float uSize;
+uniform float uTime;
+
+float filmGrain(vec2 uv, float time) {
+  vec2 p = uv * uSize;
+  p += time * 1000.0;
+  
+  float n = hash(p);
+  n = n * 2.0 - 1.0;
+  
+  return n * uIntensity;
+}
+
+void main() {
+  vec2 uv = vTextureCoord;
+  vec4 color = texture2D(uTexture, uv);
+  
+  float grain = filmGrain(uv, uTime);
+  color.rgb += grain;
+  
+  gl_FragColor = color;
+}
+`;
+
+/**
+ * Perlin noise shader
+ */
+export const perlinNoiseShader = `
+vec2 fade(vec2 t) {
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+float perlinNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  
+  vec2 u = fade(f);
+  
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  
+  return mix(
+    mix(a, b, u.x),
+    mix(c, d, u.x),
+    u.y
+  );
+}
+
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amplitude = 0.5;
+  float frequency = 1.0;
+  
+  for (int i = 0; i < 5; i++) {
+    value += amplitude * perlinNoise(p * frequency);
+    amplitude *= 0.5;
+    frequency *= 2.0;
+  }
+  
+  return value;
+}
+`;
+
+/**
+ * Simplex noise (approximation)
+ */
+export const simplexNoiseShader = `
+vec3 mod289(vec3 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec2 mod289(vec2 x) {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec3 permute(vec3 x) {
+  return mod289(((x * 34.0) + 1.0) * x);
+}
+
+float simplexNoise(vec2 v) {
+  const vec4 C = vec4(
+    0.211324865405187,  // (3.0-sqrt(3.0))/6.0
+    0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
+    -0.577350269189626, // -1.0 + 2.0 * C.x
+    0.024390243902439   // 1.0 / 41.0
+  );
+
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+
+  i = mod289(i);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
+    + i.x + vec3(0.0, i1.x, 1.0));
+
+  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+  m = m * m;
+  m = m * m;
+
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+
+  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+`;
+
+/**
+ * Cellular/Worley noise
+ */
+export const cellularNoiseShader = `
+vec2 random2(vec2 p) {
+  return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);
+}
+
+float cellularNoise(vec2 p) {
+  vec2 i_p = floor(p);
+  vec2 f_p = fract(p);
+  
+  float minDist = 1.0;
+  
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 neighbor = vec2(float(x), float(y));
+      vec2 point = random2(i_p + neighbor);
+      
+      vec2 diff = neighbor + point - f_p;
+      float dist = length(diff);
+      
+      minDist = min(minDist, dist);
+    }
+  }
+  
+  return minDist;
+}
+`;
+
+export const noiseShaders = {
+  filmGrain: filmGrainShader,
+  perlin: perlinNoiseShader,
+  simplex: simplexNoiseShader,
+  cellular: cellularNoiseShader,
+};

package/src/utils/index.ts

@@ -0,0 +1,109 @@
+/**
+ * @clypra/shader-library — GLSL Utility Functions
+ *
+ * Common utility functions used across shaders
+ */
+
+/**
+ * Common GLSL utility functions as a string
+ */
+export const glslUtils = `
+// Hash function for random number generation
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+}
+
+// 2D noise function
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  
+  f = f * f * (3.0 - 2.0 * f);
+  
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+// Smooth minimum
+float smin(float a, float b, float k) {
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+// Smooth step with adjustable edge
+float smootherstep(float edge0, float edge1, float x) {
+  x = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+  return x * x * x * (x * (x * 6.0 - 15.0) + 10.0);
+}
+
+// Luminance calculation
+float luminance(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+// RGB to HSV
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+// HSV to RGB
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+// Vignette effect
+float vignette(vec2 uv, float intensity, float extent) {
+  vec2 center = uv * 2.0 - 1.0;
+  float dist = length(center);
+  return 1.0 - smoothstep(extent, extent + intensity, dist);
+}
+
+// Posterize
+vec3 posterize(vec3 color, float levels) {
+  return floor(color * levels) / levels;
+}
+`;
+
+/**
+ * Create a complete fragment shader with utilities
+ */
+export function createFragmentShader(mainCode: string): string {
+  return `
+precision highp float;
+
+varying vec2 vTextureCoord;
+
+${glslUtils}
+
+${mainCode}
+`;
+}
+
+/**
+ * Standard vertex shader
+ */
+export const standardVertexShader = `
+attribute vec2 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+uniform mat3 projectionMatrix;
+
+varying vec2 vTextureCoord;
+
+void main() {
+  gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
+  vTextureCoord = aTextureCoord;
+}
+`;

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022"],
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}

package/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+    "utils/index": "src/utils/index.ts",
+    "noise/index": "src/noise/index.ts",
+  },
+  format: ["esm"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  splitting: false,
+  treeshake: true,
+});