@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/Stage/shaders/Annotations.frag

@@ -0,0 +1,29 @@
+precision highp float;
+
+uniform sampler2D uMaskTexture;
+uniform vec3 uColor;
+uniform float uOpacity;
+uniform vec4 uClippingPlanes[NUM_CLIPPING_PLANES];
+
+varying vec2 vUv;
+varying vec3 vWorldPosition;
+
+void main() {
+
+  vec4 plane;
+
+	#pragma unroll_loop
+  for(int i = 0; i < NUM_CLIPPING_PLANES; i++) {
+    plane = uClippingPlanes[i];
+    if(dot(-vWorldPosition, plane.xyz) > plane.w) {
+      discard;
+    }
+  }
+
+  // Sample at multiple levels of detail to get a nice feathered edge
+  vec2 texSize = vec2(textureSize(uMaskTexture, 0));
+
+  float mask = texture2D(uMaskTexture, vUv).a;
+
+  gl_FragColor = vec4(uColor, mask * uOpacity);
+}

package/src/lib/components/Stage/shaders/Drawing.frag

@@ -0,0 +1,83 @@
+uniform sampler2D uPreviousState;
+uniform vec2 uStart;
+uniform vec2 uEnd;
+uniform float uBrushSize;
+uniform vec2 uTextureSize;
+uniform vec4 uBrushColor;
+uniform bool uIsRevertOperation;
+uniform bool uIsClearOperation;
+uniform bool uIsFillOperation;
+uniform int uShapeType;
+
+varying vec2 vUv;
+
+float isInsideEllipse(vec2 p, vec2 a, vec2 b) {
+    // Find center of ellipse
+  vec2 center = (a + b) / 2.0;
+
+    // Find semi-major and semi-minor axes
+  vec2 radii = abs(b - a) / 2.0;
+
+    // Translate point to origin
+  vec2 p0 = p - center;
+
+    // Calculate normalized distance from point to ellipse
+  float value = (p0.x * p0.x) / (radii.x * radii.x) + (p0.y * p0.y) / (radii.y * radii.y);
+
+    // If inside ellipse, return 0
+  if(value <= 1.0) {
+    return 0.0;
+  }
+
+    // Otherwise return approximate distance to ellipse edge
+    // Scale p0 to make the ellipse a circle, find distance to unit circle, then scale back
+  vec2 scaledP = vec2(p0.x / radii.x, p0.y / radii.y);
+  float dist = (length(scaledP) - 1.0) * min(radii.x, radii.y);
+  return dist;
+}
+
+float distanceToRectangle(vec2 p, vec2 a, vec2 b) {
+  vec2 rectMin = vec2(min(a.x, b.x), min(a.y, b.y));
+  vec2 rectMax = vec2(max(a.x, b.x), max(a.y, b.y));
+
+  // Find closest point on rectangle to p
+  vec2 closest = vec2(clamp(p.x, rectMin.x, rectMax.x), clamp(p.y, rectMin.y, rectMax.y));
+
+  // Return distance to closest point
+  return length(p - closest);
+}
+
+float distanceToLine(vec2 p, vec2 a, vec2 b) {
+  vec2 pa = p - a;
+  vec2 ba = b - a;
+  float t = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+  return length(pa - ba * t);
+}
+
+void main() {
+  if(uIsRevertOperation) {
+    gl_FragColor = texture2D(uPreviousState, vUv);
+  } else if(uIsClearOperation) {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+  } else if(uIsFillOperation) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  } else {
+    vec2 pixelPos = vUv * uTextureSize;
+    vec4 prevColor = texture2D(uPreviousState, vUv);
+
+    float brushMask = 0.0;
+
+    if(uShapeType == 1) {
+      float dist = distanceToLine(pixelPos, uStart, uEnd);
+      brushMask = step(dist, uBrushSize);
+    } else if(uShapeType == 2) {
+      float dist = distanceToRectangle(pixelPos, uStart, uEnd);
+      brushMask = dist < 1.0 ? 1.0 : 0.0;
+    } else if(uShapeType == 3) {
+      float dist = isInsideEllipse(pixelPos, uStart, uEnd);
+      brushMask = dist < 1.0 ? 1.0 : 0.0;
+    }
+
+    gl_FragColor = mix(prevColor, uBrushColor, brushMask);
+  }
+}

package/src/lib/components/Stage/shaders/Drawing.vert

@@ -0,0 +1,5 @@
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 1.0);
+}

package/src/lib/components/Stage/shaders/Fog.frag

@@ -0,0 +1,147 @@
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uBaseColor;
+uniform vec3 uFogColor1;
+uniform vec3 uFogColor2;
+uniform vec3 uFogColor3;
+uniform vec3 uFogColor4;
+uniform float uOpacity;
+
+uniform vec4 uFogSpeed;
+uniform vec4 uPersistence;
+uniform vec4 uLacunarity;
+uniform vec4 uFrequency;
+uniform vec4 uAmplitude;
+uniform vec4 uOffset;
+uniform ivec4 uLevels;
+
+uniform int uEdgeMinMipMapLevel;
+uniform int uEdgeMaxMipMapLevel;
+uniform vec4 uEdgeFrequency;
+uniform vec4 uEdgeAmplitude;
+uniform float uEdgeOffset;
+uniform float uEdgeSpeed;
+
+uniform sampler2D uMaskTexture;
+uniform vec4 uClippingPlanes[NUM_CLIPPING_PLANES];
+
+varying vec2 vUv;
+varying vec3 vWorldPosition;
+
+// Simplex noise functions from https://github.com/ashima/webgl-noise
+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 snoise(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;
+
+  float n = 130.0 * dot(m, g);
+  return n;
+}
+
+float fog(vec2 uv, vec2 size, float amplitude, float frequency, float persistence, float lacunarity, float offset, int levels, float speed) {
+  float sum = 0.0;
+
+  // Layer multiple octaves of noise with varying brightness
+  float a = 1.0;
+  for(int i = 0; i < levels; i++) {
+    sum += a * snoise(uv * size * frequency + uTime * speed);
+    a *= persistence;
+    frequency *= lacunarity;
+  }
+
+  sum /= float(levels);
+  sum = sum + 0.5 + offset;
+
+  return amplitude * clamp(sum, 0.0, 1.0);
+}
+
+float mask(vec2 uv, vec2 size, float amplitude, float frequency) {
+  // Sample the mask at multiple mipmap levels to get a feathered edge
+  float featheredMask = 0.0;
+  float totalWeight = 0.0;
+  for(int i = uEdgeMinMipMapLevel; i <= uEdgeMaxMipMapLevel; i++) {
+    featheredMask += textureLod(uMaskTexture, uv, float(i)).a;
+  }
+  featheredMask /= float(uEdgeMaxMipMapLevel - uEdgeMinMipMapLevel + 1);
+  featheredMask = clamp(featheredMask, 0.0, 1.0);
+
+  // Add noise to the edge of the mask
+  vec2 noiseUV = uv * size;
+  float edgeNoise = snoise(frequency * noiseUV + uTime * uEdgeSpeed) + uEdgeOffset;
+
+  // Create an edge mask that's only non-zero near the transition
+  float edgeWidth = 0.2;
+  float edgeMask = smoothstep(0.0, edgeWidth, featheredMask) * (1.0 - smoothstep(1.0 - edgeWidth, 1.0, featheredMask));
+
+  // Blend the noise only at the edges
+  float finalMask = featheredMask + edgeNoise * amplitude * edgeMask;
+
+  float baseMask = texture2D(uMaskTexture, vUv).a;
+  return amplitude * finalMask + (1.0 - amplitude) * baseMask;
+}
+
+void main() {
+
+  vec4 plane;
+
+	#pragma unroll_loop
+  for(int i = 0; i < NUM_CLIPPING_PLANES; i++) {
+    plane = uClippingPlanes[i];
+    if(dot(-vWorldPosition, plane.xyz) > plane.w) {
+      discard;
+    }
+  }
+
+  // Sample at multiple levels of detail to get a nice feathered edge
+  vec2 texSize = vec2(textureSize(uMaskTexture, 0));
+
+  float mask1 = mask(vUv, texSize, uEdgeAmplitude.x, uEdgeFrequency.x);
+  float mask2 = mask(vUv, texSize, uEdgeAmplitude.y, uEdgeFrequency.y);
+  float mask3 = mask(vUv, texSize, uEdgeAmplitude.z, uEdgeFrequency.z);
+  float mask4 = mask(vUv, texSize, uEdgeAmplitude.w, uEdgeFrequency.w);
+
+  vec3 fog1 = uFogColor1 * fog(vUv, texSize, uAmplitude.x, uFrequency.x, uPersistence.x, uLacunarity.x, uOffset.x, uLevels.x, uFogSpeed.x);
+  vec3 fog2 = uFogColor2 * fog(vUv, texSize, uAmplitude.y, uFrequency.y, uPersistence.y, uLacunarity.y, uOffset.y, uLevels.y, uFogSpeed.y);
+  vec3 fog3 = uFogColor3 * fog(vUv, texSize, uAmplitude.z, uFrequency.z, uPersistence.z, uLacunarity.z, uOffset.z, uLevels.z, uFogSpeed.z);
+  vec3 fog4 = uFogColor4 * fog(vUv, texSize, uAmplitude.w, uFrequency.w, uPersistence.w, uLacunarity.w, uOffset.w, uLevels.w, uFogSpeed.w);
+
+  vec4 finalFog = clamp(vec4(fog1, mask1) +
+    vec4(fog2, mask2) +
+    vec4(fog3, mask3) +
+    vec4(fog4, mask4), 0.0, 1.0);
+
+  gl_FragColor = vec4(uBaseColor + finalFog.rgb, finalFog.a * uOpacity);
+}

package/src/lib/components/Stage/shaders/FractalNoise.frag

@@ -0,0 +1,96 @@
+precision highp float;
+
+uniform float uTime;
+uniform float uAspectRatio;
+uniform vec3 uFogColor;
+uniform float uOpacity;
+
+uniform float uFogSpeed;
+uniform float uPersistence;
+uniform float uLacunarity;
+uniform float uFrequency;
+uniform float uAmplitude;
+uniform float uOffset;
+uniform int uLevels;
+
+uniform vec4 uClippingPlanes[NUM_CLIPPING_PLANES];
+
+varying vec2 vUv;
+varying vec3 vWorldPosition;
+
+// Simplex noise functions from https://github.com/ashima/webgl-noise
+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 snoise(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;
+
+  float n = 130.0 * dot(m, g);
+  return n;
+}
+
+float fog(vec2 uv, float amplitude, float frequency, float persistence, float lacunarity, float offset, int levels, float speed) {
+  float sum = 0.0;
+
+  // Layer multiple octaves of noise with varying brightness
+  float a = 1.0;
+  for(int i = 0; i < levels; i++) {
+    sum += a * snoise(uv * frequency + uTime * speed);
+    a *= persistence;
+    frequency *= lacunarity;
+  }
+
+  sum /= float(levels);
+  sum = sum + 0.5 + offset;
+
+  return amplitude * clamp(sum, 0.0, 1.0);
+}
+
+void main() {
+
+  vec4 plane;
+
+	#pragma unroll_loop
+  for(int i = 0; i < NUM_CLIPPING_PLANES; i++) {
+    plane = uClippingPlanes[i];
+    if(dot(-vWorldPosition, plane.xyz) > plane.w) {
+      discard;
+    }
+  }
+
+  vec2 uv = vec2(vUv.x * uAspectRatio, vUv.y);
+  float alpha = fog(uv, uAmplitude, uFrequency, uPersistence, uLacunarity, uOffset, uLevels, uFogSpeed);
+
+  gl_FragColor = vec4(uFogColor, alpha * uOpacity);
+}

package/src/lib/components/Stage/shaders/GridShader.frag

@@ -0,0 +1,174 @@
+uniform int uGridType;
+uniform int uGridMode;
+uniform float uSpacing_in;
+uniform float uOpacity;
+uniform vec2 uPadding_px;
+uniform float uLineThickness;
+uniform vec3 uLineColor;
+uniform float uShadowOpacity;
+uniform float uShadowBlur;
+uniform float uShadowSpread;
+uniform vec3 uShadowColor;
+uniform float uSceneScale;
+uniform vec2 uResolution_px;
+uniform vec2 uDisplaySize_in;
+uniform float uFixedGridCountX;
+uniform float uFixedGridCountY;
+
+varying vec2 vUv;
+
+#define PI 3.141592653589793
+
+const vec2 s = vec2(1.0, 1.7320508); // For hexagonal grid calculations
+
+/**
+  Returns 0 or 1 to indicate if this fragment is a grid line
+
+  Params
+    - coords: The coordinates of the fragment relative to the grid origin
+    - spacing: The grid spacing in pixels
+*/
+float squareGrid(vec2 coords, vec2 spacing, float thickness, float sharpness) {
+    // Use modulus to compute the locations of the nearest grid lines
+  vec2 gridLine_px = vec2(round(coords.x / spacing.x) * spacing.x, round(coords.y / spacing.y) * spacing.y);
+
+  // Compute distance to the grid line and modulate opacity based on line thickness
+  vec2 distanceToLine_px = abs(coords - gridLine_px);
+
+  vec2 grid = 1.0 - smoothstep(vec2(thickness / 4.0) - 50.0 * sharpness, vec2(thickness / 4.0) + 50.0 * sharpness, distanceToLine_px);
+
+  return max(grid.x, grid.y);
+}
+
+// This function maps a 2D point p to its corresponding hexagonal grid 
+// coordinates and returns information about the hexagonal cell it's in.
+// NOTE: Function and comments are AI generated using ChatGPT 4o
+vec2 getHex(vec2 p) {
+  // Step 1: Compute the approximate centers of candidate hexagons.
+  // - `vec4(p, p - vec2(0.5, 1.0))` creates two shifted versions of the input `p`.
+  //   - The first two components are `p` for direct scaling.
+  //   - The last two components are `p - vec2(0.5, 1.0)` to account for hexagonal offsets.
+  // - Divide by `s.xyxy` (grid scaling factors) to map the coordinates into a normalized hexagonal grid.
+  // - `floor(...) + 0.5` maps the point to the center of the grid cell it lies in.
+  vec4 hC = floor(vec4(p, p - vec2(0.5, 1.0)) / s.xyxy) + 0.5;
+
+  // Step 2: Calculate the two potential hexagon centers in the original space.
+  // - `hC.xy * s`: Maps the first candidate center back to the original space.
+  // - `(hC.zw + 0.5) * s`: Maps the second candidate center back, accounting for offsets.
+  // - Subtract these centers from `p` to calculate relative positions (distance vectors) to `p`.
+  vec4 h = vec4(p - hC.xy * s, p - (hC.zw + 0.5) * s);
+
+  // Step 3: Compare distances to the two candidate centers.
+  // - Use `dot(h.xy, h.xy)` and `dot(h.zw, h.zw)` to compute the squared distances (avoids expensive sqrt).
+  // - Return the center (either `h.xy` or `h.zw`) that is closer to `p`.
+  return dot(h.xy, h.xy) < dot(h.zw, h.zw) ? h.xy : h.zw;
+}
+
+// This function helps define the shape of a hexagon by transforming a 
+// 2D coordinate and determining whether the point falls inside the
+// boundaries of a hexagonal cell.
+float hexGrid(vec2 coords, vec2 spacing, float thickness, float sharpness) {
+  vec2 hexUv = getHex(coords / spacing);
+  hexUv = abs(hexUv);
+  float hexValue = max(dot(hexUv, s * 0.5), hexUv.x);
+
+  // 0 is max thickness, 0.5 is zero thickness
+  // 0 maps to spacing * 0.5 pixels
+  vec2 maxThickness = spacing * 0.5;
+
+  // When the thickness is equal to spacing * 0.5, it must be zero
+  return smoothstep(0.5 * (1.0 - thickness / spacing.x / 2.0) - sharpness, 0.5 * (1.0 - thickness / spacing.x / 2.0) + sharpness, hexValue);
+}
+
+void main() {
+  // NOTE: To make it easier to determine what units a variable is, the _px suffix is used
+  // for values measured in pixels and the _in suffix is for inches.
+
+  // Convert UV coordinates to pixels and get the coordinates of this fragment in pixels
+  vec2 displayCoord_px = vUv * uResolution_px;
+
+  // Compute the pixel pitch
+  vec2 pixelPitch_in = uDisplaySize_in / uResolution_px;
+
+  vec2 gridSpacing_px;
+  vec2 gridCount;
+  vec2 gridSize_px;
+  vec2 gridOrigin_px;
+
+  if (uGridMode == 0) {
+    // FillSpace mode - use padding-based calculation
+    vec2 safeZoneSize_px = uResolution_px - uPadding_px * 2.0 - uLineThickness;
+    gridSpacing_px = vec2(uSpacing_in) / pixelPitch_in;
+    gridCount = floor(safeZoneSize_px / gridSpacing_px);
+    gridSize_px = gridSpacing_px * gridCount + uLineThickness / 2.0;
+    gridOrigin_px = (uResolution_px - gridSize_px) / 2.0;
+  } else {
+    // MapDefined mode - use exact grid dimensions
+    gridCount = vec2(uFixedGridCountX, uFixedGridCountY);
+
+    // Calculate grid spacing to maintain 1:1 inch squares
+    gridSpacing_px = vec2(uSpacing_in) / pixelPitch_in;
+
+    // Calculate total grid size
+    gridSize_px = gridSpacing_px * gridCount + uLineThickness / 2.0;
+
+    // Position grid based on overflow:
+    // - If grid fits horizontally, center it
+    // - If grid overflows horizontally, align left
+    float originX = gridSize_px.x <= uResolution_px.x ?
+      (uResolution_px.x - gridSize_px.x) / 2.0 : 0.0;
+
+    // - If grid fits vertically, center it
+    // - If grid overflows vertically, align to top of screen (bleed goes down)
+    // In UV space: Y=0 is bottom, Y=uResolution_px.y is top
+    // To start at top when overflowing: originY = uResolution_px.y - gridSize_px.y
+    float originY = gridSize_px.y <= uResolution_px.y ?
+      (uResolution_px.y - gridSize_px.y) / 2.0 :
+      uResolution_px.y - gridSize_px.y;
+
+    gridOrigin_px = vec2(originX, originY);
+  }
+
+  vec2 gridCoords_px = displayCoord_px - gridOrigin_px;
+
+  float grid = 0.0;
+  float shadow = 0.0;
+  float t = uLineThickness * uSceneScale < 2.0 ? 2.0 / uSceneScale : uLineThickness;
+
+  if(uGridType == 0) {
+    grid = squareGrid(gridCoords_px - t / 4.0, gridSpacing_px, t, 0.0);
+    shadow = squareGrid(gridCoords_px - t / 4.0, gridSpacing_px, t * uShadowSpread, uShadowBlur);
+  } else {
+    // Subtract half the grid size so the hex grid is symmetrical on the edges
+    grid = hexGrid((gridCoords_px - (gridSize_px / 2.0)), gridSpacing_px, t, 0.0);
+    shadow = hexGrid((gridCoords_px - (gridSize_px / 2.0)), gridSpacing_px, t * uShadowSpread, uShadowBlur);
+  }
+
+  // Add border
+  vec2 topRight = gridOrigin_px + gridSize_px - displayCoord_px;
+  vec2 bottomLeft = displayCoord_px - gridOrigin_px;
+
+    // If any coordinates are inside the border zone, set isBorder to true
+  bool isBorder = (topRight.x < t / 2.0) ||
+    (topRight.y < t / 2.0) ||
+    (bottomLeft.x < t / 2.0) ||
+    (bottomLeft.y < t / 2.0);
+
+  grid = max(grid, float(isBorder));
+  shadow = max(shadow, float(isBorder));
+
+  /* Uncomment these lines to visualize the area outside the safe zone
+  float outsideSafeZone = step(uPadding_px.x, p.x) - step((uResolution_px.x - uPadding_px.x), p.x);
+  outsideSafeZone *= step(uPadding_px.y, p.y) - step((uResolution_px.y - uPadding_px.y), p.y);
+  vec4 exclusionZoneColor = vec4(1.0, 0, 0, 1.0 - outsideSafeZone);
+  */
+
+  float insideGrid = step(gridOrigin_px.x, displayCoord_px.x) - step((gridOrigin_px.x + gridSize_px.x), displayCoord_px.x);
+  insideGrid *= step(gridOrigin_px.y, displayCoord_px.y) - step((gridOrigin_px.y + gridSize_px.y), displayCoord_px.y);
+
+  vec4 lineColor = vec4(uLineColor, grid * insideGrid * uOpacity);
+  vec4 shadedScene = vec4(uShadowColor.rgb, shadow * uShadowOpacity * uOpacity);
+  vec4 finalColor = mix(shadedScene, lineColor, grid);
+
+  gl_FragColor = finalColor;
+}

package/src/lib/components/Stage/shaders/Overlay.frag

@@ -0,0 +1,23 @@
+uniform sampler2D uTexture;
+uniform float uOpacity;
+uniform float uFadeStart;
+uniform float uFadeEnd;
+uniform vec2 uResolution;
+uniform float uScale;
+
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = fract(vUv * uResolution / max(uResolution.x, uResolution.y) * uScale);
+  vec4 texColor = texture2D(uTexture, uv);
+
+        // Calculate distance from center (0.5, 0.5)
+  vec2 center = vec2(0.5, 0.5);
+  float dist = length(vUv - center);
+
+        // Fade based on distance
+  float fade = 1.0 - smoothstep(uFadeStart, uFadeEnd, dist);
+
+  gl_FragColor = texColor;
+  gl_FragColor.a *= (1.0 - fade) * uOpacity;
+}

package/src/lib/components/Stage/shaders/Particles.frag

@@ -0,0 +1,27 @@
+precision highp float;
+
+uniform sampler2D uTexture;
+
+uniform float uTime;
+
+uniform float uOpacity;
+uniform vec3 uColor;
+
+uniform float uLifetime;
+uniform float uFadeInTime;
+uniform float uFadeOutTime;
+
+varying vec2 vUv;
+varying vec3 vPos;
+varying float vAge;
+
+void main() {
+  vec4 textureColor = texture2D(uTexture, vUv);
+
+  float opacity = uOpacity * textureColor.a;
+
+  // Fade particles in and out at beginning and end of their lifetime
+  float fade = smoothstep(0.0, uFadeInTime, vAge) - (1.0 - smoothstep(uLifetime, uLifetime - uFadeOutTime, vAge));
+
+  gl_FragColor = vec4(textureColor.rgb * uColor, clamp(opacity * fade, 0.0, 1.0));
+}

package/src/lib/components/Stage/shaders/Particles.vert

@@ -0,0 +1,51 @@
+precision highp float;
+
+attribute vec2 center;
+attribute float ageOffset;
+
+uniform sampler2D uTexture;
+
+uniform float uOpacity;
+uniform float uTime;
+uniform float uLifetime;
+
+uniform vec3 uColor;
+
+uniform float uAngularVelocity;
+uniform vec3 uInitialVelocity;
+uniform vec3 uLinearForceAmplitude;
+uniform vec3 uExponentialForceAmplitude;
+uniform vec3 uSinusoidalForceAmplitude;
+uniform vec3 uSinusoidalForceFrequency;
+
+varying vec2 vUv;
+varying vec3 vPos;
+varying float vAge;
+
+void main() {
+  vAge = mod(ageOffset + uTime, uLifetime);
+
+  vec3 velocity = uInitialVelocity + vAge * uLinearForceAmplitude;
+  velocity += uExponentialForceAmplitude * exp(vAge);
+  velocity += uSinusoidalForceAmplitude * sin(vAge * uSinusoidalForceFrequency + ageOffset);
+
+  vec3 pos = position;
+
+  // Apply rotation around center point
+  vec2 toCenter = pos.xy - center;
+  float angle = uAngularVelocity * vAge;
+  float cosA = cos(angle);
+  float sinA = sin(angle);
+  mat2 rotation = mat2(cosA, -sinA, sinA, cosA);
+  vec2 rotated = rotation * toCenter;
+  pos.xy = rotated + center;
+
+  pos += vAge * velocity;
+
+  vUv = uv;
+
+  vec4 transformedPosition = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  vPos = transformedPosition.xyz;
+
+  gl_Position = transformedPosition;
+}