@brochington/shader-backgrounds 0.1.0

package/src/lib/plugins/InkWashPlugin.ts

@@ -0,0 +1,182 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type InkWashConfig = {
+  /** Paper/background color */
+  paperColor: string;
+  /** Ink/pigment color */
+  inkColor: string;
+
+  /** Overall pattern scale */
+  scale?: number; // default 1.4
+  /** Motion speed */
+  speed?: number; // default 0.18
+  /** Flow / warping amount */
+  flow?: number; // default 0.85
+  /** Contrast / punch of ink */
+  contrast?: number; // default 1.15
+  /** Granulation (pigment clumping) */
+  granulation?: number; // default 0.35
+  /** Vignette (0..1) */
+  vignette?: number; // default 0.35
+  /** Grain strength */
+  grainAmount?: number; // default 0.03
+};
+
+export class InkWashPlugin implements ShaderPlugin {
+  name = 'ink-wash';
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+    #ifdef GL_OES_standard_derivatives
+    #extension GL_OES_standard_derivatives : enable
+    #endif
+
+    uniform float uTimeInternal;
+    uniform vec2 uResolution;
+    uniform vec3 uPaper;
+    uniform vec3 uInk;
+    uniform float uScale;
+    uniform float uFlow;
+    uniform float uContrast;
+    uniform float uGran;
+    uniform float uVignette;
+    uniform float uGrain;
+
+    varying vec2 vUv;
+
+    float hash12(vec2 p) {
+      vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+      p3 += dot(p3, p3.yzx + 33.33);
+      return fract((p3.x + p3.y) * p3.z);
+    }
+
+    float noise(vec2 p) {
+      vec2 i = floor(p);
+      vec2 f = fract(p);
+      float a = hash12(i);
+      float b = hash12(i + vec2(1.0, 0.0));
+      float c = hash12(i + vec2(0.0, 1.0));
+      float d = hash12(i + vec2(1.0, 1.0));
+      vec2 u = f * f * (3.0 - 2.0 * f);
+      return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+    }
+
+    float fbm(vec2 p) {
+      float v = 0.0;
+      float a = 0.5;
+      mat2 rot = mat2(0.80, -0.60, 0.60, 0.80);
+      for (int i = 0; i < 6; i++) {
+        v += a * noise(p);
+        p = rot * p * 2.02 + 17.17;
+        a *= 0.55;
+      }
+      return v;
+    }
+
+    vec2 flowField(vec2 p, float t) {
+      // Curl-ish flow from two fbm samples
+      float n1 = fbm(p * 1.10 + vec2(0.0,  t * 0.12));
+      float n2 = fbm(p * 1.10 + vec2(13.1, -t * 0.10));
+      vec2 f = vec2(n1 - 0.5, n2 - 0.5);
+      return f;
+    }
+
+    float aawidth(float x) {
+      #ifdef GL_OES_standard_derivatives
+      return fwidth(x);
+      #else
+      return 1.0 / max(1.0, min(uResolution.x, uResolution.y));
+      #endif
+    }
+
+    void main() {
+      float aspect = uResolution.x / uResolution.y;
+      vec2 uv = vUv;
+      vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
+      float t = uTimeInternal;
+
+      // Base paper tone + subtle fiber texture
+      float fiber = noise(uv * vec2(uResolution.x, uResolution.y) * 0.0025);
+      float fiber2 = noise(uv * vec2(uResolution.x, uResolution.y) * 0.0060 + 19.19);
+      vec3 col = uPaper + (fiber - 0.5) * 0.05 + (fiber2 - 0.5) * 0.03;
+
+      // Domain-warped pigment field
+      vec2 q = p * uScale;
+      vec2 f = flowField(q, t) * (0.55 * uFlow);
+      vec2 r = flowField(q + f * 1.35, t + 7.7) * (0.55 * uFlow);
+      vec2 w = f + r;
+
+      float base = fbm(q + w);
+      float detail = fbm(q * 2.10 - w * 0.70 + vec2(-0.07 * t, 0.05 * t));
+      float field = base * 0.72 + detail * 0.35;
+
+      // Contrast shaping
+      field = clamp(field, 0.0, 1.0);
+      field = pow(field, 1.0 / max(0.001, uContrast));
+
+      // Pigment coverage (soft threshold)
+      float edgeW = 0.08 + 0.06 * (1.0 - uFlow);
+      float ink = smoothstep(0.38 - edgeW, 0.68 + edgeW, field);
+
+      // “Tide lines”: emphasize places where the field changes quickly
+      float grad = 0.0;
+      #ifdef GL_OES_standard_derivatives
+      grad = (abs(dFdx(field)) + abs(dFdy(field))) * 6.0;
+      #else
+      grad = aawidth(field) * 120.0;
+      #endif
+      float tide = smoothstep(0.20, 0.95, grad);
+      tide *= (1.0 - ink) * 0.55 + ink * 0.25; // strongest near transitions
+
+      // Pigment granulation: high-frequency noise visible where ink exists
+      float gran = noise(q * 10.0 + vec2(31.2, 17.8)) - 0.5;
+      float gran2 = noise(q * 18.0 + vec2(9.7, 53.1)) - 0.5;
+      float granTex = gran * 0.8 + gran2 * 0.6;
+      float granAmt = uGran * (0.35 + 0.65 * ink);
+
+      float pigment = clamp(ink + tide * 0.35 + granTex * granAmt, 0.0, 1.0);
+
+      // Mix ink into paper
+      col = mix(col, mix(col, uInk, 0.92), pigment);
+
+      // Vignette
+      float v = 1.0 - smoothstep(0.25, 1.15, length(p * vec2(1.0, 0.95)));
+      col *= mix(1.0, v, clamp(uVignette, 0.0, 1.0));
+
+      // Grain
+      float g = (hash12(uv * uResolution + t * 61.0) - 0.5) * 2.0;
+      col += g * uGrain;
+
+      gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+    }
+  `;
+
+  uniforms: any;
+  private speed: number;
+
+  constructor(config: InkWashConfig) {
+    const paper = new Color(config.paperColor);
+    const ink = new Color(config.inkColor);
+
+    this.speed = config.speed ?? 0.18;
+
+    this.uniforms = {
+      uPaper: { value: [paper.r, paper.g, paper.b] },
+      uInk: { value: [ink.r, ink.g, ink.b] },
+      uScale: { value: config.scale ?? 1.4 },
+      uFlow: { value: config.flow ?? 0.85 },
+      uContrast: { value: config.contrast ?? 1.15 },
+      uGran: { value: config.granulation ?? 0.35 },
+      uVignette: { value: config.vignette ?? 0.35 },
+      uGrain: { value: config.grainAmount ?? 0.03 },
+      uTimeInternal: { value: 0 },
+    };
+  }
+
+  onRender(dt: number) {
+    this.uniforms.uTimeInternal.value += dt * 0.001 * this.speed;
+  }
+}
+
+

package/src/lib/plugins/LiquidOrbPlugin.ts

@@ -0,0 +1,140 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type LiquidOrbConfig = {
+  color: string;
+  backgroundColor: string;
+  count?: number; // Number of blobs, max 20
+  speed?: number;
+  gooeyness?: number; // Smooth-min blending factor, default 0.3
+  edgeSoftness?: number; // Edge AA/softness, default 0.02
+};
+
+type Orb = {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  radius: number;
+};
+
+export class LiquidOrbPlugin implements ShaderPlugin {
+  name = 'liquid-orb';
+  private static MAX_ORBS = 20;
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+    uniform vec2 uResolution;
+    uniform vec3 uColor;
+    uniform vec3 uBgColor;
+    uniform float uGooeyness;
+    uniform float uEdgeSoftness;
+    
+    uniform int uCount;
+    uniform vec3 uOrbs[${LiquidOrbPlugin.MAX_ORBS}]; // x, y, radius
+
+    varying vec2 vUv;
+
+    // Smooth Minimum function (The "Goo" math)
+    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);
+    }
+
+    void main() {
+        float aspect = uResolution.x / uResolution.y;
+        vec2 uv = vUv * 2.0 - 1.0;
+        uv.x *= aspect;
+
+        // Calculate Signed Distance Field (SDF)
+        // Start with a large distance
+        float d = 100.0;
+
+        for (int i = 0; i < ${LiquidOrbPlugin.MAX_ORBS}; i++) {
+            if (i >= uCount) break;
+            
+            vec3 orb = uOrbs[i];
+            vec2 pos = orb.xy;
+            pos.x *= aspect; // Correct aspect for orb position too
+            
+            float radius = orb.z;
+            
+            // Distance from pixel to orb center minus radius
+            float dist = length(uv - pos) - radius;
+            
+            // Smoothly blend distances
+            d = smin(d, dist, uGooeyness);
+        }
+
+        // Render based on threshold
+        // If d < 0.0, we are inside the goo
+        // We use smoothstep for antialiasing the edge
+        float alpha = 1.0 - smoothstep(0.0, max(0.0001, uEdgeSoftness), d);
+
+        vec3 color = mix(uBgColor, uColor, alpha);
+
+        gl_FragColor = vec4(color, 1.0);
+    }
+  `;
+
+  uniforms: any;
+  private orbs: Orb[] = [];
+  private orbData: Array<[number, number, number]> = [];
+  private speedMultiplier: number;
+
+  constructor(config: LiquidOrbConfig) {
+    const fg = new Color(config.color);
+    const bg = new Color(config.backgroundColor);
+    const count = Math.min(config.count ?? 5, LiquidOrbPlugin.MAX_ORBS);
+    this.speedMultiplier = config.speed ?? 0.5;
+
+    // Initialize Physics
+    for (let i = 0; i < count; i++) {
+      this.orbs.push({
+        x: (Math.random() * 2 - 1) * 0.8,
+        y: (Math.random() * 2 - 1) * 0.8,
+        vx: (Math.random() - 0.5) * 0.01,
+        vy: (Math.random() - 0.5) * 0.01,
+        radius: 0.2 + Math.random() * 0.2,
+      });
+    }
+
+    // IMPORTANT: OGL expects uniform vec3[] values as an array of vec3-ish triplets,
+    // not a packed Float32Array. If we pass a packed typed array, it will not map
+    // correctly to `uniform vec3 uOrbs[MAX]` and you'll effectively see zeros.
+    this.orbData = Array.from({ length: LiquidOrbPlugin.MAX_ORBS }, () => [0, 0, 0]);
+
+    this.uniforms = {
+      uColor: { value: [fg.r, fg.g, fg.b] },
+      uBgColor: { value: [bg.r, bg.g, bg.b] },
+      uCount: { value: count },
+      uOrbs: { value: this.orbData },
+      uGooeyness: { value: config.gooeyness ?? 0.3 },
+      uEdgeSoftness: { value: config.edgeSoftness ?? 0.02 },
+    };
+  }
+
+  onRender(dt: number) {
+    // Physics Step
+    // dt is usually ~16ms.
+
+    let i = 0;
+    for (const orb of this.orbs) {
+      orb.x += orb.vx * this.speedMultiplier * (dt / 16);
+      orb.y += orb.vy * this.speedMultiplier * (dt / 16);
+
+      // Bounce off walls
+      if (orb.x < -1.0 || orb.x > 1.0) orb.vx *= -1;
+      if (orb.y < -1.0 || orb.y > 1.0) orb.vy *= -1;
+
+      // Update vec3[] triplets
+      const v = this.orbData[i];
+      v[0] = orb.x;
+      v[1] = orb.y;
+      v[2] = orb.radius;
+      i++;
+    }
+
+    // No need to reassign; values are updated in-place.
+  }
+}

package/src/lib/plugins/RetroGridPlugin.ts

@@ -0,0 +1,77 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type RetroGridConfig = {
+  gridColor: string;
+  backgroundColor: string;
+  speed?: number; // default 1.0
+};
+
+export class RetroGridPlugin implements ShaderPlugin {
+  name = 'retro-grid';
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+    uniform float uTime;
+    uniform vec3 uGridColor;
+    uniform vec3 uBgColor;
+    uniform float uSpeed;
+
+    varying vec2 vUv;
+
+    void main() {
+        // Normalize UV to -1 to 1
+        vec2 uv = vUv * 2.0 - 1.0;
+        
+        // Hoziron offset
+        float horizon = 0.0; 
+        float fov = 0.5; 
+
+        // 3D Projection Logic
+        // We only care about the bottom half for the floor
+        if (uv.y > horizon) {
+            // Sky (simple gradient or solid)
+            gl_FragColor = vec4(uBgColor, 1.0);
+            return;
+        }
+
+        // Project the 2D pixel to 3D floor coordinates
+        // x = uv.x / |y| to flare out perspective
+        // z = 1.0 / |y| to simulate depth
+        float floorY = abs(uv.y - horizon);
+        vec3 coord = vec3(uv.x / floorY, floorY, 1.0 / floorY);
+        
+        // Move the grid by time
+        coord.z += uTime * uSpeed;
+
+        // Grid Logic
+        vec2 gridUV = coord.xz * fov;
+        vec2 grid = fract(gridUV) - 0.5;
+        
+        // Thickness of lines (derivative for anti-aliasing approximation or hard coded)
+        float line = min(abs(grid.x), abs(grid.y));
+        
+        float gridVal = 1.0 - smoothstep(0.0, 0.05 * coord.z, line);
+
+        // Fade out grid near horizon (fog)
+        float fog = smoothstep(0.0, 1.5, floorY);
+
+        vec3 color = mix(uBgColor, uGridColor, gridVal * fog);
+
+        gl_FragColor = vec4(color, 1.0);
+    }
+  `;
+
+  uniforms: any;
+
+  constructor(config: RetroGridConfig) {
+    const grid = new Color(config.gridColor);
+    const bg = new Color(config.backgroundColor);
+
+    this.uniforms = {
+      uGridColor: { value: [grid.r, grid.g, grid.b] },
+      uBgColor: { value: [bg.r, bg.g, bg.b] },
+      uSpeed: { value: config.speed ?? 1.0 },
+    };
+  }
+}

package/src/lib/plugins/SoftStarfieldPlugin.ts

@@ -0,0 +1,156 @@
+import { Color } from 'ogl';
+import { ShaderPlugin } from '../core/types';
+
+export type SoftStarfieldConfig = {
+  /** Background gradient bottom/top */
+  backgroundBottom: string;
+  backgroundTop: string;
+  /** Star color (usually near-white) */
+  starColor?: string; // default "#ffffff"
+  /** Star density multiplier */
+  density?: number; // default 1.0
+  /** Star size multiplier */
+  size?: number; // default 1.0
+  /** Twinkle amount */
+  twinkle?: number; // default 0.35
+  /** Nebula tint */
+  nebulaColor?: string; // default "#6a5cff"
+  /** Nebula strength */
+  nebula?: number; // default 0.35
+  /** Motion speed */
+  speed?: number; // default 0.2
+  /** Grain 0.. */
+  grainAmount?: number; // default 0.04
+};
+
+export class SoftStarfieldPlugin implements ShaderPlugin {
+  name = 'soft-starfield';
+
+  fragmentShader = /* glsl */ `
+    precision highp float;
+    uniform float uTimeInternal;
+    uniform vec2 uResolution;
+    uniform vec3 uBg0;
+    uniform vec3 uBg1;
+    uniform vec3 uStar;
+    uniform vec3 uNebula;
+    uniform float uDensity;
+    uniform float uSize;
+    uniform float uTwinkle;
+    uniform float uNebulaAmt;
+    uniform float uGrain;
+
+    varying vec2 vUv;
+
+    float hash12(vec2 p) {
+      vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+      p3 += dot(p3, p3.yzx + 33.33);
+      return fract((p3.x + p3.y) * p3.z);
+    }
+
+    float noise(vec2 p) {
+      vec2 i = floor(p);
+      vec2 f = fract(p);
+      float a = hash12(i);
+      float b = hash12(i + vec2(1.0, 0.0));
+      float c = hash12(i + vec2(0.0, 1.0));
+      float d = hash12(i + vec2(1.0, 1.0));
+      vec2 u = f * f * (3.0 - 2.0 * f);
+      return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+    }
+
+    float fbm(vec2 p) {
+      float v = 0.0;
+      float a = 0.5;
+      mat2 rot = mat2(0.80, -0.60, 0.60, 0.80);
+      for (int i = 0; i < 5; i++) {
+        v += a * noise(p);
+        p = rot * p * 2.02 + 19.19;
+        a *= 0.55;
+      }
+      return v;
+    }
+
+    // Simple cell-star: one star candidate per cell, softly drawn.
+    float starLayer(vec2 uv, float scale, float t) {
+      vec2 p = uv * scale;
+      vec2 i = floor(p);
+      vec2 f = fract(p) - 0.5;
+      float rnd = hash12(i);
+
+      // place star within cell
+      vec2 o = vec2(hash12(i + 13.1), hash12(i + 71.7)) - 0.5;
+      vec2 d = f - o * 0.45;
+
+      // size distribution: many small, few larger
+      float sz = mix(0.012, 0.035, pow(rnd, 7.0)) * uSize;
+      float core = exp(-dot(d, d) / (sz * sz));
+
+      // twinkle: slow, subtle (avoid distracting flicker)
+      float tw = 1.0 + (sin((rnd * 12.0) + t * 1.5) * 0.5 + 0.5) * uTwinkle;
+
+      // probability via rnd threshold (density)
+      float present = step(0.55, rnd) * clamp(uDensity, 0.0, 3.0);
+      return core * tw * present;
+    }
+
+    void main() {
+      float aspect = uResolution.x / uResolution.y;
+      vec2 uv = vUv;
+      vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
+      float t = uTimeInternal;
+
+      // Background gradient
+      vec3 col = mix(uBg0, uBg1, smoothstep(-0.6, 0.8, p.y));
+
+      // Nebula: soft, low-contrast clouds
+      float n = fbm(p * 1.35 + vec2(-0.05 * t, 0.02 * t));
+      float n2 = fbm(p * 2.10 + vec2(0.03 * t, -0.04 * t));
+      float neb = smoothstep(0.25, 0.85, n * 0.75 + n2 * 0.35);
+      col += uNebula * neb * uNebulaAmt;
+
+      // Stars: 3 layers parallax-ish
+      float s1 = starLayer(uv + vec2(-0.010 * t, 0.006 * t), 55.0, t);
+      float s2 = starLayer(uv + vec2(-0.020 * t, 0.010 * t), 90.0, t + 7.7) * 0.8;
+      float s3 = starLayer(uv + vec2(-0.035 * t, 0.016 * t), 140.0, t + 13.3) * 0.6;
+      float stars = clamp(s1 + s2 + s3, 0.0, 1.75);
+      col += uStar * stars;
+
+      // Grain
+      float g = (hash12(uv * uResolution + t * 60.0) - 0.5) * 2.0;
+      col += g * uGrain;
+
+      gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+    }
+  `;
+
+  uniforms: any;
+  private speed: number;
+
+  constructor(config: SoftStarfieldConfig) {
+    const bg0 = new Color(config.backgroundBottom);
+    const bg1 = new Color(config.backgroundTop);
+    const star = new Color(config.starColor ?? '#ffffff');
+    const neb = new Color(config.nebulaColor ?? '#6a5cff');
+    this.speed = config.speed ?? 0.2;
+
+    this.uniforms = {
+      uBg0: { value: [bg0.r, bg0.g, bg0.b] },
+      uBg1: { value: [bg1.r, bg1.g, bg1.b] },
+      uStar: { value: [star.r, star.g, star.b] },
+      uNebula: { value: [neb.r, neb.g, neb.b] },
+      uDensity: { value: config.density ?? 1.0 },
+      uSize: { value: config.size ?? 1.0 },
+      uTwinkle: { value: config.twinkle ?? 0.35 },
+      uNebulaAmt: { value: config.nebula ?? 0.35 },
+      uGrain: { value: config.grainAmount ?? 0.04 },
+      uTimeInternal: { value: 0 },
+    };
+  }
+
+  onRender(dt: number) {
+    this.uniforms.uTimeInternal.value += dt * 0.001 * this.speed;
+  }
+}
+
+