npm - @brochington/shader-backgrounds - Versions diffs - 0.1.0 - Mend

@brochington/shader-backgrounds 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/.github/workflows/deploy-demo-to-pages.yml +63 -0
package/PLUGINS.md +269 -0
package/README.md +159 -0
package/demo.js +1044 -0
package/index.html +194 -0
package/package.json +23 -0
package/src/index.ts +5 -0
package/src/lib/components/web-component.ts +198 -0
package/src/lib/core/ShaderCanvas.ts +235 -0
package/src/lib/core/types.ts +26 -0
package/src/lib/plugins/AuroraWavesPlugin.ts +128 -0
package/src/lib/plugins/CausticsPlugin.ts +128 -0
package/src/lib/plugins/ContourLinesPlugin.ts +148 -0
package/src/lib/plugins/DreamyBokehPlugin.ts +191 -0
package/src/lib/plugins/GradientPlugin.ts +445 -0
package/src/lib/plugins/GrainyFogPlugin.ts +139 -0
package/src/lib/plugins/InkWashPlugin.ts +182 -0
package/src/lib/plugins/LiquidOrbPlugin.ts +140 -0
package/src/lib/plugins/RetroGridPlugin.ts +77 -0
package/src/lib/plugins/SoftStarfieldPlugin.ts +156 -0
package/src/lib/plugins/StainedGlassPlugin.ts +261 -0
package/src/lib/plugins/index.ts +11 -0
package/tsconfig.json +26 -0
package/vite.config.ts +19 -0
package/vite.demo.config.ts +13 -0

package/index.html ADDED Viewed

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Shader Library Demo</title>
+  <style>
+    body,
+    html {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .container {
+      width: 100vw;
+      height: 100vh;
+    }
+    .overlay {
+      width: 400px;
+      margin: 40px;
+      background: white;
+      padding: 20px;
+      font-family: sans-serif;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    .overlay-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+    }
+    .overlay-header h1 {
+      margin: 0;
+      font-size: 22px;
+      line-height: 1.2;
+    }
+    .overlay.collapsed {
+      width: 400px;
+      padding: 20px;
+      background: rgba(255, 255, 255, 0.92);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+    }
+    .overlay.collapsed .overlay-content {
+      display: none;
+    }
+    .overlay-toggle {
+      padding: 6px 10px;
+      font-size: 13px;
+      border-radius: 999px;
+      white-space: nowrap;
+    }
+    .controls {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      font-size: 14px;
+    }
+    .params {
+      padding: 10px;
+      border: 1px solid #eee;
+      border-radius: 6px;
+      background: #fafafa;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .params h3 {
+      margin: 0;
+      font-size: 14px;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+    select {
+      padding: 8px 10px;
+      border: 1px solid #ccc;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    input {
+      padding: 8px 10px;
+      border: 1px solid #ccc;
+      background: white;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    button {
+      padding: 8px 16px;
+      border: 1px solid #ccc;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #f5f5f5;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <shader-background id="bg">
+      <div class="overlay">
+        <div class="overlay-header">
+          <h1>Shader Backgrounds</h1>
+          <button class="overlay-toggle" id="overlayToggle" type="button">Hide</button>
+        </div>
+        <div class="overlay-content">
+          <p>Using OGL + Web Components</p>
+          <div class="controls">
+          <label class="field">
+            <span>Plugin</span>
+            <select id="pluginSelect">
+              <option value="gradient" selected>Gradient</option>
+              <option value="grainy-fog">Grainy Fog</option>
+              <option value="retro-grid">Retro Grid</option>
+              <option value="liquid-orb">Liquid Orb</option>
+              <option value="caustics">Caustics</option>
+              <option value="aurora-waves">Aurora Waves</option>
+              <option value="soft-starfield">Soft Starfield</option>
+              <option value="contour-lines">Contour Lines</option>
+              <option value="dreamy-bokeh">Dreamy Bokeh</option>
+              <option value="ink-wash">Ink Wash</option>
+              <option value="stained-glass">Stained Glass</option>
+            </select>
+          </label>
+          <label class="field">
+            <span>Canvas Filter</span>
+            <select id="filterPreset">
+              <option value="none" selected>None</option>
+              <option value="saturate(1.2) contrast(1.05)">Pop</option>
+              <option value="blur(8px) saturate(1.1) brightness(1.05)">Soft Blur</option>
+              <option value="sepia(0.25) saturate(1.3) contrast(1.05)">Warm</option>
+              <option value="hue-rotate(45deg) saturate(1.2)">Hue Shift</option>
+              <option value="grayscale(0.25) contrast(1.2)">Muted</option>
+            </select>
+          </label>
+          <label class="field">
+            <span>Custom Filter (CSS)</span>
+            <input id="filterInput" placeholder="e.g. blur(6px) saturate(1.2)" />
+          </label>
+          <button onclick="applyFilter()">Apply Filter</button>
+          <div class="params">
+            <h3>Plugin Parameters</h3>
+            <div id="pluginParams"></div>
+          </div>
+          <button onclick="changeColors()">Change Colors</button>
+          <button onclick="toggleRenderScale()">Toggle Render Scale (0.5x)</button>
+          <button onclick="toggleSingleRender()">Toggle Single Render Mode</button>
+          <button onclick="manualRender()" id="manualRenderBtn" style="display: none;">Manual Render</button>
+          </div>
+        </div>
+      </div>
+    </shader-background>
+  </div>
+  <script type="module" src="./src/index.ts"></script>
+  <script type="module" src="./demo.js"></script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "@brochington/shader-backgrounds",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/shader-backgrounds.umd.cjs",
+  "module": "./dist/shader-backgrounds.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "preview": "vite preview",
+    "preview:demo": "vite preview --config vite.demo.config.ts"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "ogl": "^1.0.11"
+  }
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export * from './lib/core/types';
+export * from './lib/core/ShaderCanvas';
+export * from './lib/plugins/GradientPlugin';
+export * from './lib/plugins';
+export * from './lib/components/web-component';

package/src/lib/components/web-component.ts ADDED Viewed

@@ -0,0 +1,198 @@
+import { ShaderCanvas } from '../core/ShaderCanvas';
+import { ShaderPlugin } from '../core/types';
+export class ShaderBackgroundElement extends HTMLElement {
+  #canvas: HTMLCanvasElement;
+  #engine: ShaderCanvas | null = null;
+  #observer: ResizeObserver;
+  #plugin: ShaderPlugin | null = null;
+  #renderScale: number = 1.0;
+  #singleRender: boolean = false;
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    // Styles
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+      canvas {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        /* Pixelated rendering for crisp upscaling of low-res buffers */
+        image-rendering: pixelated;
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+      }
+      ::slotted(*) {
+        position: relative;
+        z-index: 1;
+      }
+    `;
+    this.shadowRoot!.appendChild(style);
+    // Canvas
+    this.#canvas = document.createElement('canvas');
+    // Allow styling the internal canvas from outside the shadow root:
+    // e.g. `shader-background::part(canvas) { filter: blur(8px); }`
+    this.#canvas.setAttribute('part', 'canvas');
+    this.shadowRoot!.appendChild(this.#canvas);
+    // Slot for children
+    const slot = document.createElement('slot');
+    this.shadowRoot!.appendChild(slot);
+    // Resize Observer
+    this.#observer = new ResizeObserver((entries) => {
+      if (this.#engine && entries.length > 0) {
+        const { width, height } = entries[0].contentRect;
+        this.#engine.resize(width, height);
+      }
+    });
+  }
+  connectedCallback() {
+    // Read initial attribute values
+    const renderScaleAttr = this.getAttribute('render-scale');
+    if (renderScaleAttr) {
+      const scale = parseFloat(renderScaleAttr);
+      if (!isNaN(scale)) {
+        this.#renderScale = Math.max(0.1, Math.min(2.0, scale));
+      }
+    }
+    const singleRenderAttr = this.getAttribute('single-render');
+    if (singleRenderAttr) {
+      this.#singleRender = singleRenderAttr === 'true' || singleRenderAttr === '';
+    }
+    this.#observer.observe(this);
+    if (this.#plugin) {
+      this.init();
+    }
+    // Ensure canvas is properly sized initially
+    if (this.#engine) {
+      const rect = this.getBoundingClientRect();
+      this.#engine.resize(rect.width, rect.height);
+    }
+  }
+  disconnectedCallback() {
+    this.#observer.disconnect();
+    if (this.#engine) {
+      this.#engine.dispose();
+      this.#engine = null;
+    }
+  }
+  set plugin(plugin: ShaderPlugin) {
+    this.#plugin = plugin;
+    if (this.#engine) {
+      this.#engine.stop();
+      this.#engine.dispose();
+      this.#engine = null;
+    }
+    this.init();
+  }
+  get plugin() {
+    if (!this.#plugin) {
+      throw new Error('Plugin is required');
+    }
+    return this.#plugin;
+  }
+  set renderScale(value: number) {
+    this.#renderScale = Math.max(0.1, Math.min(2.0, value)); // Clamp between 0.1 and 2.0
+    if (this.#engine) {
+      this.#engine.stop();
+      this.#engine.dispose();
+      this.#engine = null;
+    }
+    this.init();
+  }
+  get renderScale() {
+    return this.#renderScale;
+  }
+  set singleRender(value: boolean) {
+    this.#singleRender = value;
+    if (this.#engine) {
+      this.#engine.stop();
+      this.#engine.dispose();
+      this.#engine = null;
+    }
+    this.init();
+  }
+  get singleRender() {
+    return this.#singleRender;
+  }
+  public render() {
+    if (this.#engine && this.#singleRender) {
+      this.#engine.render();
+    }
+  }
+  init() {
+    // If we haven't received a plugin yet (common during element upgrade/attribute parsing),
+    // don't throw—just defer init until `plugin` is set.
+    if (!this.#plugin) return;
+    // Clean up previous engine if resetting config
+    if (this.#engine) {
+      this.#engine.stop();
+      this.#engine.dispose();
+      this.#engine = null;
+    }
+    // Get initial dimensions from host element
+    const rect = this.getBoundingClientRect();
+    const width = rect.width > 0 ? rect.width : 300;
+    const height = rect.height > 0 ? rect.height : 300;
+    this.#engine = new ShaderCanvas(this.#canvas, this.#plugin, {
+      width,
+      height,
+      renderScale: this.#renderScale,
+      singleRender: this.#singleRender,
+    });
+    this.#engine.start();
+  }
+  static get observedAttributes() {
+    return ['render-scale', 'single-render'];
+  }
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case 'render-scale': {
+        const scale = parseFloat(newValue);
+        if (!isNaN(scale)) {
+          this.renderScale = scale;
+        }
+        break;
+      }
+      case 'single-render':
+        this.singleRender = newValue === 'true' || newValue === '';
+        break;
+    }
+  }
+}
+// Define the custom element
+customElements.define('shader-background', ShaderBackgroundElement);

package/src/lib/core/ShaderCanvas.ts ADDED Viewed

@@ -0,0 +1,235 @@
+import { Renderer, Program, Mesh, Triangle, Vec2, OGLRenderingContext } from 'ogl';
+import { ShaderPlugin } from './types';
+export class ShaderCanvas {
+  public gl: OGLRenderingContext;
+  #renderer: Renderer;
+  #mesh!: Mesh;
+  #program!: Program;
+  #plugin: ShaderPlugin;
+  #animationId: number | null = null;
+  #lastTime: number = 0;
+  #totalTime: number = 0;
+  #isPlaying: boolean = false;
+  #renderScale: number;
+  #singleRender: boolean;
+  #displayWidth: number;
+  #displayHeight: number;
+  #pendingResize: { renderWidth: number; renderHeight: number } | null = null;
+  constructor(
+    private canvas: HTMLCanvasElement,
+    plugin: ShaderPlugin,
+    options: {
+      pixelRatio?: number;
+      width?: number;
+      height?: number;
+      renderScale?: number;
+      singleRender?: boolean;
+    } = {}
+  ) {
+    this.#plugin = plugin;
+    // `pixelRatio` is an optional extra multiplier for the internal buffer size.
+    // Kept separate from `renderScale` so you can do things like: renderScale=0.5 but pixelRatio=2.
+    const pixelRatio = options.pixelRatio ?? 1;
+    const pr = Math.max(0.1, Math.min(4.0, pixelRatio));
+    this.#renderScale = (options.renderScale ?? 1.0) * pr;
+    this.#singleRender = options.singleRender ?? false;
+    // Get canvas dimensions, either from options or canvas element
+    let width = options.width || 300;
+    let height = options.height || 300;
+    if (!options.width || !options.height) {
+      const rect = this.canvas.getBoundingClientRect();
+      if (rect.width > 0) width = rect.width;
+      if (rect.height > 0) height = rect.height;
+    }
+    this.#displayWidth = width;
+    this.#displayHeight = height;
+    // Apply render scale to rendering resolution
+    const renderWidth = Math.max(1, Math.floor(width * this.#renderScale));
+    const renderHeight = Math.max(1, Math.floor(height * this.#renderScale));
+    // Initialize OGL Renderer to match canvas buffer size
+    this.#renderer = new Renderer({
+      canvas: this.canvas,
+      width: renderWidth,
+      height: renderHeight,
+      alpha: false, // Opaque background
+      dpr: 1, // Don't apply device pixel ratio since we're already scaling
+    });
+    this.gl = this.#renderer.gl;
+    // Important: OGL's internal sizing can update the canvas CSS size.
+    // We want CSS size to remain at the display size, while only the drawing buffer scales.
+    this.canvas.width = renderWidth;
+    this.canvas.height = renderHeight;
+    this.#renderer.setSize(renderWidth, renderHeight);
+    this.canvas.style.width = `${width}px`;
+    this.canvas.style.height = `${height}px`;
+    this.init();
+  }
+  private init() {
+    // Triangle creates a geometry with 3 vertices that covers the screen.
+    // It provides 'position' and 'uv' attributes automatically.
+    const geometry = new Triangle(this.gl);
+    const commonUniforms = {
+      uTime: { value: 0 },
+      uResolution: {
+        // Display-space resolution (CSS pixels); shaders typically use this for aspect-correct math.
+        value: new Vec2(this.#displayWidth, this.#displayHeight),
+      },
+    };
+    this.#program = new Program(this.gl, {
+      vertex: this.#plugin.vertexShader || defaultVertex,
+      fragment: this.#plugin.fragmentShader,
+      uniforms: {
+        ...commonUniforms,
+        ...this.#plugin.uniforms,
+      },
+      // Ensure depth test is off for background
+      depthTest: false,
+      cullFace: false,
+    });
+    this.#mesh = new Mesh(this.gl, { geometry, program: this.#program });
+    if (this.#plugin.onInit) {
+      this.#plugin.onInit(this.gl, this.#program);
+    }
+  }
+  public start() {
+    if (this.#isPlaying) return;
+    this.#isPlaying = true;
+    this.#lastTime = performance.now();
+    if (this.#singleRender) {
+      // In single render mode, just render once and stop
+      this.render();
+      this.#isPlaying = false;
+    } else {
+      // Normal animation loop
+      this.loop();
+    }
+  }
+  public stop() {
+    this.#isPlaying = false;
+    if (this.#animationId !== null) {
+      cancelAnimationFrame(this.#animationId);
+      this.#animationId = null;
+    }
+  }
+  public render() {
+    // In single-render mode we may defer buffer resizing to avoid clearing the canvas on window resize.
+    if (this.#pendingResize) {
+      const { renderWidth, renderHeight } = this.#pendingResize;
+      this.#pendingResize = null;
+      this.canvas.width = renderWidth;
+      this.canvas.height = renderHeight;
+      this.#renderer.setSize(renderWidth, renderHeight);
+      // Re-apply CSS sizing because OGL can overwrite it.
+      this.canvas.style.width = `${this.#displayWidth}px`;
+      this.canvas.style.height = `${this.#displayHeight}px`;
+    }
+    const now = performance.now();
+    const dt = now - this.#lastTime;
+    this.#lastTime = now;
+    this.#totalTime += dt * 0.001; // Convert to seconds
+    // Update global time uniform
+    this.#program.uniforms.uTime.value = this.#totalTime;
+    // Run Plugin Update Logic
+    if (this.#plugin.onRender) {
+      this.#plugin.onRender(dt, this.#totalTime);
+    }
+    this.#renderer.render({ scene: this.#mesh });
+  }
+  public resize(width?: number, height?: number) {
+    // If dimensions not provided, get from canvas element
+    if (width === undefined || height === undefined) {
+      const rect = this.canvas.getBoundingClientRect();
+      width = Math.max(1, rect.width);
+      height = Math.max(1, rect.height);
+    }
+    this.#displayWidth = width;
+    this.#displayHeight = height;
+    // Calculate scaled render dimensions
+    const renderWidth = Math.max(1, Math.floor(width * this.#renderScale));
+    const renderHeight = Math.max(1, Math.floor(height * this.#renderScale));
+    // Always update CSS size so the last rendered frame stays stretched to the element size.
+    this.canvas.style.width = `${width}px`;
+    this.canvas.style.height = `${height}px`;
+    if (this.#singleRender) {
+      // Critical: Changing canvas.width/height clears the drawing buffer.
+      // In single-render mode, defer buffer resize until the next manual render.
+      this.#pendingResize = { renderWidth, renderHeight };
+    } else {
+      // Update canvas buffer size to scaled dimensions
+      this.canvas.width = renderWidth;
+      this.canvas.height = renderHeight;
+      // Resize internal renderer to match canvas buffer size
+      // OGL may update the canvas CSS size; we re-apply CSS sizing right after.
+      this.#renderer.setSize(renderWidth, renderHeight);
+      // Re-apply CSS size (setSize may overwrite it)
+      this.canvas.style.width = `${width}px`;
+      this.canvas.style.height = `${height}px`;
+    }
+    // Update uniforms with actual display dimensions (not scaled buffer size)
+    if (this.#program) {
+      this.#program.uniforms.uResolution.value.set(width, height);
+    }
+    // Notify plugin with actual display dimensions
+    if (this.#plugin.onResize) {
+      this.#plugin.onResize(width, height);
+    }
+  }
+  private loop = () => {
+    if (!this.#isPlaying) return;
+    this.render();
+    this.#animationId = requestAnimationFrame(this.loop);
+  };
+  public dispose() {
+    this.stop();
+    // basic cleanup, more can be done here (gl deleteProgram etc)
+  }
+}
+const defaultVertex = /* glsl */ `
+  attribute vec2 uv;
+  attribute vec2 position;
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 0, 1);
+  }
+`;

package/src/lib/core/types.ts ADDED Viewed

@@ -0,0 +1,26 @@
+// src/core/types.ts
+import { Program, OGLRenderingContext } from 'ogl';
+export interface ShaderPlugin {
+  // Unique name for the plugin
+  name: string;
+  // The Fragment shader string
+  fragmentShader: string;
+  // Optional Vertex shader (defaults to a pass-through if generic)
+  vertexShader?: string;
+  // Initial Uniforms (values only, OGL handles wrapping)
+  uniforms: Record<string, { value: any }>;
+  // Lifecycle hook: Called when the OGL Program is created
+  onInit?: (gl: OGLRenderingContext, program: Program) => void;
+  // Lifecycle hook: Called every frame
+  // dt = delta time in ms, totalTime = elapsed in seconds
+  onRender?: (dt: number, totalTime: number) => void;
+  // Lifecycle hook: Called on resize
+  onResize?: (width: number, height: number) => void;
+}