gladly-plot 0.0.3 → 0.0.5

package/src/compute/filter.js

@@ -0,0 +1,227 @@
+import { registerTextureComputation, TextureComputation, EXPRESSION_REF } from "./ComputationRegistry.js"
+
+function toTexture(regl, input, length) {
+  if (input instanceof Float32Array) {
+    return regl.texture({ data: input, shape: [length, 1], type: 'float', format: 'rgba' });
+  }
+  return input; // already a texture
+}
+
+function subtractTextures(regl, texA, texB) {
+  const length = texA.width;
+  const outputTex = regl.texture({ width: length, height: 1, type: 'float', format: 'rgba' });
+  const outputFBO = regl.framebuffer({ color: outputTex });
+
+  const drawSub = regl({
+    framebuffer: outputFBO,
+    vert: `
+      precision highp float;
+      attribute float bin;
+      void main() {
+        float x = (bin + 0.5)/${length}.0*2.0 - 1.0;
+        gl_Position = vec4(x,0.0,0.0,1.0);
+      }
+    `,
+    frag: `
+      precision highp float;
+      uniform sampler2D texA;
+      uniform sampler2D texB;
+      out vec4 fragColor;
+      void main() {
+        int idx = int(gl_FragCoord.x-0.5);
+        float a = texelFetch(texA, ivec2(idx,0),0).r;
+        float b = texelFetch(texB, ivec2(idx,0),0).r;
+        fragColor = vec4(a-b,0.0,0.0,1.0);
+      }
+    `,
+    attributes: { bin: Array.from({ length }, (_, i) => i) },
+    uniforms: { texA, texB },
+    count: length,
+    primitive: 'points'
+  });
+
+  drawSub();
+  return outputTex;
+}
+
+/**
+ * Generic 1D convolution filter
+ * @param {regl} regl - regl context
+ * @param {Float32Array | Texture} input - CPU array or GPU texture
+ * @param {Float32Array} kernel - 1D kernel
+ * @returns {Texture} - filtered output texture
+ */
+function filter1D(regl, input, kernel) {
+  const length = input instanceof Float32Array ? input.length : input.width;
+  const inputTex = toTexture(regl, input, length);
+
+  const kernelTex = regl.texture({ data: kernel, shape: [kernel.length, 1], type: 'float' });
+
+  const outputTex = regl.texture({ width: length, height: 1, type: 'float', format: 'rgba' });
+  const outputFBO = regl.framebuffer({ color: outputTex });
+
+  const radius = Math.floor(kernel.length / 2);
+
+  const drawFilter = regl({
+    framebuffer: outputFBO,
+    vert: `
+      precision highp float;
+      attribute float bin;
+      void main() {
+        float x = (bin + 0.5)/${length}.0*2.0 - 1.0;
+        gl_Position = vec4(x, 0.0, 0.0, 1.0);
+      }
+    `,
+    frag: `
+      #version 300 es
+      precision highp float;
+      uniform sampler2D inputTex;
+      uniform sampler2D kernelTex;
+      uniform int radius;
+      uniform int length;
+      out vec4 fragColor;
+
+      void main() {
+        float idx = gl_FragCoord.x - 0.5;
+        float sum = 0.0;
+        for (int i=-16; i<=16; i++) { // max kernel radius 16
+          if (i+16 >= radius*2+1) break;
+          int sampleIdx = int(clamp(idx + float(i), 0.0, float(length-1)));
+          float val = texelFetch(inputTex, ivec2(sampleIdx,0),0).r;
+          float w = texelFetch(kernelTex, ivec2(i+radius,0),0).r;
+          sum += val * w;
+        }
+        fragColor = vec4(sum,0.0,0.0,1.0);
+      }
+    `,
+    attributes: {
+      bin: Array.from({ length }, (_, i) => i)
+    },
+    uniforms: {
+      inputTex,
+      kernelTex,
+      radius,
+      length
+    },
+    count: length,
+    primitive: 'points'
+  });
+
+  drawFilter();
+  return outputTex;
+}
+
+// Gaussian kernel helper
+function gaussianKernel(size, sigma) {
+  const radius = Math.floor(size / 2);
+  const kernel = new Float32Array(size);
+  let sum = 0;
+  for (let i = -radius; i <= radius; i++) {
+    const v = Math.exp(-0.5 * (i / sigma) ** 2);
+    kernel[i + radius] = v;
+    sum += v;
+  }
+  for (let i = 0; i < size; i++) kernel[i] /= sum;
+  return kernel;
+}
+
+/**
+ * Low-pass filter
+ */
+function lowPass(regl, input, sigma = 3, kernelSize = null) {
+  const size = kernelSize || Math.ceil(sigma*6)|1; // ensure odd
+  const kernel = gaussianKernel(size, sigma);
+  return filter1D(regl, input, kernel);
+}
+
+/**
+ * High-pass filter: subtract low-pass
+ */
+function highPass(regl, input, sigma = 3, kernelSize = null) {
+  const low = lowPass(regl, input, sigma, kernelSize);
+  // high = input - low (using a shader)
+  return subtractTextures(regl, input, low);
+}
+
+/**
+ * Band-pass filter: difference of low-pass filters
+ */
+function bandPass(regl, input, sigmaLow, sigmaHigh) {
+  const lowHigh = lowPass(regl, input, sigmaHigh);
+  const lowLow = lowPass(regl, input, sigmaLow);
+  return subtractTextures(regl, lowHigh, lowLow);
+}
+
+export { filter1D, gaussianKernel, lowPass, highPass, bandPass }
+
+class Filter1DComputation extends TextureComputation {
+  compute(regl, params) {
+    return filter1D(regl, params.input, params.kernel)
+  }
+  schema(data) {
+    return {
+      type: 'object',
+      properties: {
+        input: EXPRESSION_REF,
+        kernel: EXPRESSION_REF
+      },
+      required: ['input', 'kernel']
+    }
+  }
+}
+
+class LowPassComputation extends TextureComputation {
+  compute(regl, params) {
+    return lowPass(regl, params.input, params.sigma, params.kernelSize)
+  }
+  schema(data) {
+    return {
+      type: 'object',
+      properties: {
+        input: EXPRESSION_REF,
+        sigma: { type: 'number' },
+        kernelSize: { type: 'number' }
+      },
+      required: ['input']
+    }
+  }
+}
+
+class HighPassComputation extends TextureComputation {
+  compute(regl, params) {
+    return highPass(regl, params.input, params.sigma, params.kernelSize)
+  }
+  schema(data) {
+    return {
+      type: 'object',
+      properties: {
+        input: EXPRESSION_REF,
+        sigma: { type: 'number' },
+        kernelSize: { type: 'number' }
+      },
+      required: ['input']
+    }
+  }
+}
+
+class BandPassComputation extends TextureComputation {
+  compute(regl, params) {
+    return bandPass(regl, params.input, params.sigmaLow, params.sigmaHigh)
+  }
+  schema(data) {
+    return {
+      type: 'object',
+      properties: {
+        input: EXPRESSION_REF,
+        sigmaLow: { type: 'number' },
+        sigmaHigh: { type: 'number' }
+      },
+      required: ['input', 'sigmaLow', 'sigmaHigh']
+    }
+  }
+}
+
+registerTextureComputation('filter1D', new Filter1DComputation())
+registerTextureComputation('lowPass',  new LowPassComputation())
+registerTextureComputation('highPass', new HighPassComputation())
+registerTextureComputation('bandPass', new BandPassComputation())

package/src/compute/hist.js

@@ -0,0 +1,180 @@
+import { registerTextureComputation, TextureComputation, EXPRESSION_REF } from "./ComputationRegistry.js"
+
+/**
+ * Auto-select number of histogram bins using Scott's rule.
+ * For large datasets, uses a random subset to estimate std for speed.
+ * @param {Float32Array | Array} data - input array
+ * @param {Object} options
+ *   - sampleCutoff: max points to use for std estimation (default 50000)
+ * @returns {number} - suggested number of bins
+ */
+function autoBinsScott(data, options = {}) {
+  const N = data.length;
+  const sampleCutoff = options.sampleCutoff || 50000;
+
+  let sampleData;
+
+  if (N > sampleCutoff) {
+    // Randomly sample sampleCutoff points
+    sampleData = new Float32Array(sampleCutoff);
+    for (let i = 0; i < sampleCutoff; i++) {
+      const idx = Math.floor(Math.random() * N);
+      sampleData[i] = data[idx];
+    }
+  } else {
+    sampleData = data;
+  }
+
+  const n = sampleData.length;
+
+  // Compute mean
+  const mean = sampleData.reduce((a, b) => a + b, 0) / n;
+
+  // Compute standard deviation
+  let std;
+  if (N <= sampleCutoff) {
+    // small dataset: population std
+    const variance = sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / n;
+    std = Math.sqrt(variance);
+  } else {
+    // large dataset: sample std
+    const variance = sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / (n - 1);
+    std = Math.sqrt(variance);
+  }
+
+  // Compute bin width
+  const binWidth = 3.5 * std / Math.cbrt(N);
+
+  // Determine number of bins
+  let min = data[0], max = data[0];
+  for (let i = 1; i < data.length; i++) {
+    if (data[i] < min) min = data[i];
+    if (data[i] > max) max = data[i];
+  }
+  const bins = Math.max(1, Math.ceil((max - min) / binWidth));
+
+  return bins;
+}
+
+/**
+ * Automatically determine number of bins using Freedman–Diaconis or Sturges
+ * @param {Float32Array} data - input array
+ * @param {Object} options
+ *   - maxBins: maximum bins allowed (GPU-friendly)
+ * @returns {number} - number of bins
+ */
+function autoBins(data, options = {}) {
+  const N = data.length;
+  const maxBins = options.maxBins || 2048;
+
+  if (N < 30) {
+    // Small dataset → use Sturges
+    return Math.min(Math.ceil(Math.log2(N) + 1), maxBins);
+  }
+
+  return autoBinsScott(data, options)
+}
+
+/**
+ * Create a histogram texture from CPU array or GPU texture.
+ * @param {regl} regl - regl context
+ * @param {Float32Array | Texture} input - CPU array in [0,1] or GPU texture
+ * @param {Object} options
+ *   - bins: number of bins (optional, overrides auto)
+ *   - useGPU: force GPU histogram
+ *   - maxBins: max number of bins for auto calculation
+ * @returns {Texture} - histogram texture
+ */
+export default function makeHistogram(regl, input, options = {}) {
+  let bins = options.bins;
+  const useGPU = options.useGPU || false;
+
+  // Auto bins if not provided and input is CPU array
+  if (!bins && input instanceof Float32Array) {
+    bins = autoBins(input, { maxBins: options.maxBins || 2048 });
+  } else if (!bins) {
+    bins = options.maxBins || 1024; // default for GPU textures
+  }
+
+  // Allocate histogram texture and framebuffer
+  const histTex = regl.texture({
+    width: bins,
+    height: 1,
+    type: 'float',
+    format: 'rgba'
+  });
+  const histFBO = regl.framebuffer({ color: histTex });
+
+  // Clear histogram
+  regl.clear({ color: [0, 0, 0, 0], framebuffer: histFBO });
+
+  if (input instanceof Float32Array && !useGPU) {
+    // CPU histogram — pack counts into the R channel of each RGBA texel
+    const histData = new Float32Array(bins);
+    const N = input.length;
+    for (let i = 0; i < N; i++) {
+      const b = Math.floor(input[i] * bins);
+      histData[Math.min(b, bins - 1)] += 1;
+    }
+    // RGBA format: 4 floats per texel. Store count in R, leave G/B/A as 0.
+    const packedData = new Float32Array(bins * 4);
+    for (let i = 0; i < bins; i++) packedData[i * 4] = histData[i];
+    histTex.subimage({ data: packedData, width: bins, height: 1 });
+
+  } else {
+    // GPU histogram
+    const dataTex = (input instanceof Float32Array)
+      ? regl.texture({ data: input, shape: [input.length, 1], type: 'float' })
+      : input;
+
+    const N = (input instanceof Float32Array) ? input.length : dataTex.width;
+
+    const drawPoints = regl({
+      framebuffer: histFBO,
+      blend: { enable: true, func: { src: 'one', dst: 'one' } },
+      vert: `
+        precision highp float;
+        attribute float value;
+        void main() {
+          float x = (floor(value * ${bins}.0) + 0.5)/${bins}.0*2.0 - 1.0;
+          gl_Position = vec4(x, 0.0, 0.0, 1.0);
+          gl_PointSize = 1.0;
+        }
+      `,
+      frag: `
+        precision highp float;
+        out vec4 fragColor;
+        void main() { fragColor = vec4(1.0, 0.0, 0.0, 1.0); }
+      `,
+      attributes: {
+        value: () => (input instanceof Float32Array)
+          ? input
+          : Array.from({ length: N }, (_, i) => i / (N - 1))
+      },
+      count: N,
+      primitive: 'points'
+    });
+
+    drawPoints();
+  }
+
+  return histTex;
+}
+
+class HistogramComputation extends TextureComputation {
+  compute(regl, params) {
+    return makeHistogram(regl, params.input, { bins: params.bins })
+  }
+  schema(data) {
+    return {
+      type: 'object',
+      properties: {
+        input: EXPRESSION_REF,
+        bins: { type: 'number' }
+      },
+      required: ['input']
+    }
+  }
+}
+
+registerTextureComputation('histogram', new HistogramComputation())

package/src/compute/kde.js

@@ -0,0 +1,102 @@
+import { registerTextureComputation, TextureComputation, EXPRESSION_REF } from "./ComputationRegistry.js"
+
+/**
+ * Smooth a histogram to produce a KDE texture
+ * @param {regl} regl - regl context
+ * @param {Float32Array | Texture} histInput - histogram data
+ * @param {Object} options
+ *   - bandwidth: Gaussian sigma in bins (default 5)
+ *   - bins: output bins (default same as input)
+ * @returns {Texture} - smoothed KDE texture
+ */
+export default function smoothKDE(regl, histInput, options = {}) {
+  const bins = options.bins || (histInput instanceof Float32Array ? histInput.length : histInput.width);
+  const bandwidth = options.bandwidth || 5.0;
+
+  const histTex = (histInput instanceof Float32Array)
+    ? regl.texture({ data: histInput, shape: [bins, 1], type: 'float' })
+    : histInput;
+
+  const kdeTex = regl.texture({ width: bins, height: 1, type: 'float', format: 'rgba' });
+  const kdeFBO = regl.framebuffer({ color: kdeTex });
+
+  const kernelRadius = Math.ceil(bandwidth * 3);
+  const kernelSize = kernelRadius * 2 + 1;
+  const kernel = new Float32Array(kernelSize);
+  let sum = 0;
+  for (let i = -kernelRadius; i <= kernelRadius; i++) {
+    const w = Math.exp(-0.5 * (i / bandwidth) ** 2);
+    kernel[i + kernelRadius] = w;
+    sum += w;
+  }
+  for (let i = 0; i < kernel.length; i++) kernel[i] /= sum;
+
+  const kernelTex = regl.texture({ data: kernel, shape: [kernelSize, 1], type: 'float' });
+
+  const drawKDE = regl({
+    framebuffer: kdeFBO,
+    vert: `
+      precision highp float;
+      attribute float bin;
+      void main() {
+        float x = (bin + 0.5)/${bins}.0*2.0 - 1.0;
+        gl_Position = vec4(x, 0.0, 0.0, 1.0);
+      }
+    `,
+    frag: `
+      #version 300 es
+      precision highp float;
+      uniform sampler2D histTex;
+      uniform sampler2D kernelTex;
+      uniform int kernelRadius;
+      uniform int bins;
+      out vec4 fragColor;
+      void main() {
+        float idx = gl_FragCoord.x - 0.5;
+        float sum = 0.0;
+        for (int i=-16; i<=16; i++) {
+          if (i+16 >= kernelRadius*2+1) break;
+          int sampleIdx = int(clamp(idx + float(i), 0.0, float(bins-1)));
+          float h = texelFetch(histTex, ivec2(sampleIdx,0),0).r;
+          float w = texelFetch(kernelTex, ivec2(i+kernelRadius,0),0).r;
+          sum += h * w;
+        }
+        fragColor = vec4(sum, 0.0, 0.0, 1.0);
+      }
+    `,
+    attributes: {
+      bin: Array.from({ length: bins }, (_, i) => i)
+    },
+    uniforms: {
+      histTex,
+      kernelTex,
+      kernelRadius,
+      bins
+    },
+    count: bins,
+    primitive: 'points'
+  });
+
+  drawKDE();
+
+  return kdeTex;
+}
+
+class KdeComputation extends TextureComputation {
+  compute(regl, params) {
+    return smoothKDE(regl, params.input, { bins: params.bins, bandwidth: params.bandwidth })
+  }
+  schema(data) {
+    return {
+      type: 'object',
+      properties: {
+        input: EXPRESSION_REF,
+        bins: { type: 'number' },
+        bandwidth: { type: 'number' }
+      },
+      required: ['input']
+    }
+  }
+}
+
+registerTextureComputation('kde', new KdeComputation())

package/src/{Layer.js → core/Layer.js}

@@ -1,9 +1,10 @@
 export class Layer {
   constructor({ type, attributes, uniforms, nameMap = {}, domains = {}, lineWidth = 1, primitive = "points", xAxis = "xaxis_bottom", yAxis = "yaxis_left", xAxisQuantityKind, yAxisQuantityKind, colorAxes = [], filterAxes = [], vertexCount = null, instanceCount = null, attributeDivisors = {}, blend = null }) {
-    // Validate that all attributes are typed arrays
+    // Validate that all attributes are non-null/undefined
+    // (Float32Array, regl textures, numbers, and expression objects are all valid)
     for (const [key, value] of Object.entries(attributes)) {
-      if (!(value instanceof Float32Array)) {
-        throw new Error(`Attribute '${key}' must be Float32Array`)
+      if (value == null) {
+        throw new Error(`Attribute '${key}' must not be null or undefined`)
       }
     }
 

package/src/{LayerType.js → core/LayerType.js}

@@ -1,6 +1,7 @@
 import { Layer } from "./Layer.js"
-import { buildColorGlsl } from "./ColorscaleRegistry.js"
-import { buildFilterGlsl } from "./FilterAxisRegistry.js"
+import { buildColorGlsl } from "../colorscales/ColorscaleRegistry.js"
+import { buildFilterGlsl } from "../axes/FilterAxisRegistry.js"
+import { resolveAttributeExpr } from "../compute/ComputationRegistry.js"
 
 function buildSpatialGlsl() {
   return `float normalize_axis(float v, vec2 domain, float scaleType) {
@@ -30,6 +31,22 @@ vec4 gladly_apply_color(vec4 color) {
 }`
 }
 
+// Removes `attribute [precision] type varName;` from GLSL source.
+function removeAttributeDecl(src, varName) {
+  return src.replace(
+    new RegExp(`[ \\t]*attribute\\s+(?:(?:lowp|mediump|highp)\\s+)?\\w+\\s+${varName}\\s*;[ \\t]*\\n?`, 'g'),
+    ''
+  )
+}
+
+// Injects code immediately after `void main() {`.
+function injectIntoMainStart(src, code) {
+  return src.replace(
+    /void\s+main\s*\(\s*(?:void\s*)?\)\s*\{/,
+    match => `${match}\n  ${code}`
+  )
+}
+
 function injectPickIdAssignment(src) {
   const lastBrace = src.lastIndexOf('}')
   if (lastBrace === -1) return src
@@ -79,29 +96,75 @@ export class LayerType {
     if (createDrawCommand) this.createDrawCommand = createDrawCommand
   }
 
-  createDrawCommand(regl, layer) {
+  createDrawCommand(regl, layer, plot) {
     const nm = layer.nameMap
     // Rename an internal name to the shader-visible name via nameMap (identity if absent).
     const shaderName = (internalName) => nm[internalName] ?? internalName
     // Build a single-entry uniform object with renamed key reading from the internal prop name.
     const u = (internalName) => ({ [shaderName(internalName)]: regl.prop(internalName) })
 
+    // --- Resolve computed attributes ---
+    let vertSrc = this.vert
+    const originalBufferAttrs = {}   // internal_name → Float32Array
+    const computedBufferAttrs = {}   // shader_name   → Float32Array  (from context.bufferAttrs)
+    const allTextureUniforms = {}
+    const allScalarUniforms = {}
+    const allGlobalDecls = []
+    const mainInjections = []
+    const allAxisUpdaters = []
+
+    for (const [key, expr] of Object.entries(layer.attributes)) {
+      const result = resolveAttributeExpr(regl, expr, shaderName(key), plot)
+      if (result.kind === 'buffer') {
+        originalBufferAttrs[key] = result.value
+      } else {
+        vertSrc = removeAttributeDecl(vertSrc, shaderName(key))
+        Object.assign(computedBufferAttrs, result.context.bufferAttrs)
+        Object.assign(allTextureUniforms, result.context.textureUniforms)
+        Object.assign(allScalarUniforms, result.context.scalarUniforms)
+        allGlobalDecls.push(...result.context.globalDecls)
+        mainInjections.push(`float ${shaderName(key)} = ${result.glslExpr};`)
+        allAxisUpdaters.push(...result.context.axisUpdaters)
+      }
+    }
+
+    layer._axisUpdaters = allAxisUpdaters
+
+    if (mainInjections.length > 0) {
+      vertSrc = injectIntoMainStart(vertSrc, mainInjections.join('\n  '))
+    }
+
+    // Merged buffer attrs by shader name — used for vertex count fallback.
+    const allShaderBuffers = {
+      ...Object.fromEntries(Object.entries(originalBufferAttrs).map(([k, v]) => [shaderName(k), v])),
+      ...computedBufferAttrs
+    }
+
     const isInstanced = layer.instanceCount !== null
-    const pickCount = isInstanced ? layer.instanceCount : (layer.vertexCount ?? layer.attributes.x?.length ?? 0)
+    const pickCount = isInstanced ? layer.instanceCount :
+      (layer.vertexCount ?? allShaderBuffers[shaderName('x')]?.length
+        ?? Object.values(layer.attributes).find(v => v instanceof Float32Array)?.length ?? 0)
     const pickIds = new Float32Array(pickCount)
     for (let i = 0; i < pickCount; i++) pickIds[i] = i
 
+    // --- Build regl attributes ---
     const attributes = {
+      // Original buffer attrs with possible divisors
       ...Object.fromEntries(
-        Object.entries(layer.attributes).map(([key, buffer]) => {
+        Object.entries(originalBufferAttrs).map(([key, buffer]) => {
           const divisor = layer.attributeDivisors[key]
           const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
           return [shaderName(key), attrObj]
         })
       ),
+      // Computed buffer attrs (no divisors; already shader-named)
+      ...Object.fromEntries(
+        Object.entries(computedBufferAttrs).map(([shaderKey, buffer]) => [shaderKey, { buffer }])
+      ),
       a_pickId: isInstanced ? { buffer: regl.buffer(pickIds), divisor: 1 } : regl.buffer(pickIds)
     }
 
+    // --- Build uniforms ---
     const uniforms = {
       ...u("xDomain"),
       ...u("yDomain"),
@@ -111,7 +174,9 @@ export class LayerType {
       u_pickLayerIndex: regl.prop('u_pickLayerIndex'),
       ...Object.fromEntries(
         Object.entries(layer.uniforms).map(([key, value]) => [shaderName(key), value])
-      )
+      ),
+      ...allTextureUniforms,
+      ...allScalarUniforms
     }
 
     // Add per-color-axis uniforms (colorscale index + range + scale type), keyed by quantity kind
@@ -131,7 +196,7 @@ export class LayerType {
     const pickVertDecls = `attribute float a_pickId;\nvarying float v_pickId;`
 
     const drawConfig = {
-      vert: injectPickIdAssignment(injectInto(this.vert, [spatialGlsl, filterGlsl, pickVertDecls])),
+      vert: injectPickIdAssignment(injectInto(vertSrc, [spatialGlsl, filterGlsl, pickVertDecls, ...allGlobalDecls])),
       frag: injectInto(this.frag, [buildApplyColorGlsl(), colorGlsl, filterGlsl]),
       attributes,
       uniforms,