gladly-plot 0.0.4 → 0.0.6

package/src/layers/BarsLayer.js

@@ -0,0 +1,168 @@
+import { LayerType } from "../core/LayerType.js"
+import { Data } from "../data/Data.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
+import { AXES } from "../axes/AxisRegistry.js"
+
+// Generic instanced bar layer. Renders `instanceCount` bars using live texture refs
+// for bin center positions and bar lengths (counts).
+//
+// Each bar is a quad drawn as a triangle strip (4 vertices).
+// Per-instance: x_center (bin centre, from texture) and a_pickId (bin index, divisor 1).
+// Per-vertex:   a_corner ∈ {0,1,2,3} — selects which corner of the rectangle.
+//   corner 0: bottom-left   corner 1: bottom-right
+//   corner 2: top-left      corner 3: top-right
+//
+// orientation "vertical"   — bins on x-axis, bars extend upward (default)
+// orientation "horizontal" — bins on y-axis, bars extend rightward
+
+const BARS_VERT = `#version 300 es
+  precision mediump float;
+
+  in float a_corner;
+  in float x_center;
+  in float count;
+
+  uniform vec2  xDomain;
+  uniform vec2  yDomain;
+  uniform float xScaleType;
+  uniform float yScaleType;
+  uniform float u_binHalfWidth;
+  uniform float u_horizontal;
+
+  void main() {
+    float side = mod(a_corner, 2.0);       // 0 = left, 1 = right
+    float vert = floor(a_corner / 2.0);    // 0 = bottom, 1 = top
+
+    float bx = mix(x_center + (side * 2.0 - 1.0) * u_binHalfWidth, side * count, u_horizontal);
+    float by = mix(vert * count, x_center + (vert * 2.0 - 1.0) * u_binHalfWidth, u_horizontal);
+
+    gl_Position = plot_pos(vec2(bx, by));
+  }
+`
+
+const BARS_FRAG = `#version 300 es
+  precision mediump float;
+  uniform vec4 u_color;
+  void main() {
+    fragColor = gladly_apply_color(u_color);
+  }
+`
+
+class BarsLayerType extends LayerType {
+  constructor() {
+    super({ name: "bars", vert: BARS_VERT, frag: BARS_FRAG })
+  }
+
+  _getAxisConfig(parameters, data) {
+    const d = Data.wrap(data)
+    const { xData, yData, xAxis = "xaxis_bottom", yAxis = "yaxis_left", orientation = "vertical" } = parameters
+    if (orientation === "horizontal") {
+      return {
+        xAxis,
+        xAxisQuantityKind: d.getQuantityKind(yData) ?? yData,
+        yAxis,
+        yAxisQuantityKind: d.getQuantityKind(xData) ?? xData,
+      }
+    }
+    return {
+      xAxis,
+      xAxisQuantityKind: d.getQuantityKind(xData) ?? xData,
+      yAxis,
+      yAxisQuantityKind: d.getQuantityKind(yData) ?? yData,
+    }
+  }
+
+  schema(data) {
+    const cols = Data.wrap(data).columns()
+    return {
+      type: "object",
+      properties: {
+        xData: {
+          type: "string",
+          enum: cols,
+          description: "Column name for bin center x positions"
+        },
+        yData: {
+          type: "string",
+          enum: cols,
+          description: "Column name for bar heights (counts)"
+        },
+        color: {
+          type: "array",
+          items: { type: "number" },
+          minItems: 4,
+          maxItems: 4,
+          default: [0.2, 0.5, 0.8, 1.0],
+          description: "Bar colour as [R, G, B, A] in [0, 1]"
+        },
+        orientation: {
+          type: "string",
+          enum: ["vertical", "horizontal"],
+          default: "vertical",
+          description: "vertical: bins on x-axis, bars extend up; horizontal: bins on y-axis, bars extend right"
+        },
+        xAxis: {
+          type: "string",
+          enum: AXES.filter(a => a.includes("x")),
+          default: "xaxis_bottom"
+        },
+        yAxis: {
+          type: "string",
+          enum: AXES.filter(a => a.includes("y")),
+          default: "yaxis_left"
+        }
+      },
+      required: ["xData", "yData"]
+    }
+  }
+
+  _createLayer(regl, parameters, data, plot) {
+    const d = Data.wrap(data)
+    const {
+      xData,
+      yData,
+      color = [0.2, 0.5, 0.8, 1.0],
+      orientation = "vertical",
+    } = parameters
+
+    const xRef = d.getData(xData)
+    const yRef = d.getData(yData)
+    if (!xRef) throw new Error(`BarsLayer: column '${xData}' not found`)
+    if (!yRef) throw new Error(`BarsLayer: column '${yData}' not found`)
+
+    const bins = xRef.length ?? 1
+
+    const xDomain = d.getDomain(xData) ?? [0, 1]
+    const yDomain = d.getDomain(yData) ?? [0, 1]
+    const binHalfWidth = (xDomain[1] - xDomain[0]) / (2 * bins)
+
+    const xQK = d.getQuantityKind(xData) ?? xData
+    const yQK = d.getQuantityKind(yData) ?? yData
+
+    // Per-vertex corner indices 0–3 (triangle-strip quad)
+    const a_corner = new Float32Array([0, 1, 2, 3])
+
+    return [{
+      attributes: {
+        a_corner,    // per-vertex, no divisor
+        x_center: xRef,  // live ref → resolved via _isLive path in resolveToGlslExpr
+        count: yRef,     // live ref → resolved via _isLive path
+      },
+      uniforms: {
+        u_binHalfWidth: binHalfWidth,
+        u_color: color,
+        u_horizontal: orientation === "horizontal" ? 1.0 : 0.0,
+      },
+      vertexCount: 4,
+      instanceCount: bins,
+      primitive: "triangle strip",
+      domains: {
+        [xQK]: xDomain,
+        [yQK]: yDomain,
+      },
+    }]
+  }
+}
+
+export const barsLayerType = new BarsLayerType()
+registerLayerType("bars", barsLayerType)

package/src/{ColorbarLayer.js → layers/ColorbarLayer.js}

@@ -1,5 +1,5 @@
-import { LayerType } from "./LayerType.js"
-import { registerLayerType } from "./LayerTypeRegistry.js"
+import { LayerType } from "../core/LayerType.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
 
 // Four vertices for a triangle-strip quad covering the entire clip space.
 const quadCx = new Float32Array([-1, 1, -1, 1])
@@ -7,6 +7,7 @@ const quadCy = new Float32Array([-1, -1, 1, 1])
 
 export const colorbarLayerType = new LayerType({
   name: "colorbar",
+  suppressWarnings: true,
 
   getAxisConfig: function(parameters) {
     const { colorAxis, orientation = "horizontal" } = parameters
@@ -15,33 +16,33 @@ export const colorbarLayerType = new LayerType({
       xAxisQuantityKind: orientation === "horizontal" ? colorAxis : undefined,
       yAxis: orientation === "vertical" ? "yaxis_left" : null,
       yAxisQuantityKind: orientation === "vertical" ? colorAxis : undefined,
-      colorAxisQuantityKinds: [colorAxis],
+      colorAxisQuantityKinds: { '': colorAxis },
     }
   },
 
-  vert: `
+  vert: `#version 300 es
     precision mediump float;
-    attribute float cx;
-    attribute float cy;
+    in float cx;
+    in float cy;
     uniform int horizontal;
-    varying float tval;
+    out float tval;
     void main() {
       gl_Position = vec4(cx, cy, 0.0, 1.0);
       tval = horizontal == 1 ? (cx + 1.0) / 2.0 : (cy + 1.0) / 2.0;
     }
   `,
 
-  frag: `
+  frag: `#version 300 es
     precision mediump float;
     uniform int colorscale;
     uniform vec2 color_range;
     uniform float color_scale_type;
-    varying float tval;
+    in float tval;
     void main() {
       float r0 = color_scale_type > 0.5 ? log(color_range.x) : color_range.x;
       float r1 = color_scale_type > 0.5 ? log(color_range.y) : color_range.y;
       float v  = r0 + tval * (r1 - r0);
-      gl_FragColor = gladly_apply_color(map_color(colorscale, vec2(r0, r1), v));
+      fragColor = gladly_apply_color(map_color(colorscale, vec2(r0, r1), v));
     }
   `,
 
@@ -55,18 +56,13 @@ export const colorbarLayerType = new LayerType({
     required: ["colorAxis"]
   }),
 
-  createLayer: function(parameters) {
+  createLayer: function(regl, parameters) {
     const { colorAxis, orientation = "horizontal" } = parameters
     return [{
       attributes: { cx: quadCx, cy: quadCy },
       uniforms: { horizontal: orientation === "horizontal" ? 1 : 0 },
       primitive: "triangle strip",
       vertexCount: 4,
-      nameMap: {
-        [`colorscale_${colorAxis}`]: 'colorscale',
-        [`color_range_${colorAxis}`]: 'color_range',
-        [`color_scale_type_${colorAxis}`]: 'color_scale_type',
-      },
     }]
   }
 })

package/src/layers/ColorbarLayer2d.js

@@ -0,0 +1,86 @@
+import { LayerType } from "../core/LayerType.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
+
+// Four vertices for a triangle-strip quad covering the entire clip space.
+const quadCx = new Float32Array([-1, 1, -1, 1])
+const quadCy = new Float32Array([-1, -1, 1, 1])
+
+export const colorbar2dLayerType = new LayerType({
+  name: "colorbar2d",
+  suppressWarnings: true,
+
+  getAxisConfig: function(parameters) {
+    const { xAxis, yAxis } = parameters
+    return {
+      xAxis: "xaxis_bottom",
+      xAxisQuantityKind: xAxis,
+      yAxis: "yaxis_left",
+      yAxisQuantityKind: yAxis,
+      colorAxisQuantityKinds: { '_a': xAxis, '_b': yAxis },
+      colorAxis2dQuantityKinds: { '': ['_a', '_b'] },
+    }
+  },
+
+  vert: `#version 300 es
+    precision mediump float;
+    in float cx;
+    in float cy;
+    out float tval_x;
+    out float tval_y;
+    void main() {
+      gl_Position = vec4(cx, cy, 0.0, 1.0);
+      tval_x = (cx + 1.0) / 2.0;
+      tval_y = (cy + 1.0) / 2.0;
+    }
+  `,
+
+  // tval_x/tval_y are [0,1] positions in the colorbar quad. We convert them to actual data
+  // values in each axis's range (undoing the log transform if needed), then pass those raw
+  // values to map_color_s_2d which re-applies the scale type internally. The exp() call
+  // is the inverse of the log() that map_color_s_2d will apply, so log-scale roundtrips
+  // correctly and linear-scale is a no-op (exp(log(v)) == v, but for linear vt == v anyway).
+  frag: `#version 300 es
+    precision mediump float;
+    uniform vec2 color_range_a;
+    uniform float color_scale_type_a;
+    uniform vec2 color_range_b;
+    uniform float color_scale_type_b;
+    in float tval_x;
+    in float tval_y;
+    void main() {
+      float r0_a = color_scale_type_a > 0.5 ? log(color_range_a.x) : color_range_a.x;
+      float r1_a = color_scale_type_a > 0.5 ? log(color_range_a.y) : color_range_a.y;
+      float vt_a = r0_a + tval_x * (r1_a - r0_a);
+      float v_a  = color_scale_type_a > 0.5 ? exp(vt_a) : vt_a;
+
+      float r0_b = color_scale_type_b > 0.5 ? log(color_range_b.x) : color_range_b.x;
+      float r1_b = color_scale_type_b > 0.5 ? log(color_range_b.y) : color_range_b.y;
+      float vt_b = r0_b + tval_y * (r1_b - r0_b);
+      float v_b  = color_scale_type_b > 0.5 ? exp(vt_b) : vt_b;
+
+      fragColor = map_color_2d_(vec2(v_a, v_b));
+    }
+  `,
+
+  schema: () => ({
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    type: "object",
+    properties: {
+      xAxis: { type: "string", description: "Quantity kind for the x axis (color axis A)" },
+      yAxis: { type: "string", description: "Quantity kind for the y axis (color axis B)" }
+    },
+    required: ["xAxis", "yAxis"]
+  }),
+
+  createLayer: function(regl, parameters) {
+    const { xAxis, yAxis } = parameters
+    return [{
+      attributes: { cx: quadCx, cy: quadCy },
+      uniforms: {},
+      primitive: "triangle strip",
+      vertexCount: 4,
+    }]
+  }
+})
+
+registerLayerType("colorbar2d", colorbar2dLayerType)

package/src/{FilterbarLayer.js → layers/FilterbarLayer.js}

@@ -1,8 +1,9 @@
-import { LayerType } from "./LayerType.js"
-import { registerLayerType } from "./LayerTypeRegistry.js"
+import { LayerType } from "../core/LayerType.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
 
 export const filterbarLayerType = new LayerType({
   name: "filterbar",
+  suppressWarnings: true,
 
   getAxisConfig: function(parameters) {
     const { filterAxis, orientation = "horizontal" } = parameters
@@ -16,15 +17,15 @@ export const filterbarLayerType = new LayerType({
 
   // Nothing is rendered — vertexCount is always 0.
   // These minimal shaders satisfy the WebGL compiler but never execute.
-  vert: `
+  vert: `#version 300 es
     precision mediump float;
     uniform vec2 xDomain;
     uniform vec2 yDomain;
     void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); }
   `,
-  frag: `
+  frag: `#version 300 es
     precision mediump float;
-    void main() { gl_FragColor = gladly_apply_color(vec4(0.0, 0.0, 0.0, 0.0)); }
+    void main() { fragColor = gladly_apply_color(vec4(0.0, 0.0, 0.0, 0.0)); }
   `,
 
   schema: () => ({

package/src/layers/LinesLayer.js

@@ -0,0 +1,185 @@
+// Lines mode uses instanced rendering:
+//   - Template: 2 vertices with a_endPoint in {0.0, 1.0}  (divisor=0 → per-vertex)
+//   - Per-segment data (x0/x1, y0/y1, v0/v1, seg0/seg1, f0/f1) sampled from GPU textures
+//     using a_pickId (= gl_InstanceID) + 0.0 or + 1.0 as the index.
+//
+// Segment boundary handling: when a_seg0 != a_seg1, collapse both template vertices to
+// (a_x0, a_y0) producing a zero-length degenerate line that the rasterizer discards.
+
+import { ScatterLayerTypeBase } from "./ScatterShared.js"
+import { Data } from "../data/Data.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
+import { EXPRESSION_REF_OPT, resolveQuantityKind, resolveExprToColumn } from "../compute/ComputationRegistry.js"
+
+function makeLinesVert(hasFilter, hasSegIds, hasV, hasV2, hasZ) {
+  return `#version 300 es
+  precision mediump float;
+  in float a_endPoint;
+  in float a_x0;
+  in float a_y0;
+  ${hasZ ? 'in float a_z0;\n  in float a_z1;' : ''}
+  in float a_x1;
+  in float a_y1;
+  ${hasV  ? 'in float a_v0;\n  in float a_v1;'   : ''}
+  ${hasV2 ? 'in float a_v20;\n  in float a_v21;' : ''}
+  ${hasSegIds ? 'in float a_seg0;\n  in float a_seg1;' : ''}
+  ${hasFilter ? 'in float a_f0;\n  in float a_f1;' : ''}
+  uniform vec2 xDomain;
+  uniform vec2 yDomain;
+  uniform float xScaleType;
+  uniform float yScaleType;
+  out float v_color_start;
+  out float v_color_end;
+  out float v_color2_start;
+  out float v_color2_end;
+  out float v_t;
+  void main() {
+    float same_seg = ${hasSegIds ? 'abs(a_seg0 - a_seg1) < 0.5 ? 1.0 : 0.0' : '1.0'};
+    ${hasFilter ? 'if (!filter_(a_f0) || !filter_(a_f1)) same_seg = 0.0;' : ''}
+    float t = same_seg * a_endPoint;
+    float x = mix(a_x0, a_x1, t);
+    float y = mix(a_y0, a_y1, t);
+    ${hasZ ? 'float z = mix(a_z0, a_z1, t);\n    gl_Position = plot_pos_3d(vec3(x, y, z));'
+           : 'gl_Position = plot_pos(vec2(x, y));'}
+    v_color_start  = ${hasV  ? 'a_v0'  : '0.0'};
+    v_color_end    = ${hasV  ? 'a_v1'  : '0.0'};
+    v_color2_start = ${hasV2 ? 'a_v20' : '0.0'};
+    v_color2_end   = ${hasV2 ? 'a_v21' : '0.0'};
+    v_t = a_endPoint;
+  }
+`
+}
+
+function makeLinesFrag(hasFirst, hasSecond) {
+  return `#version 300 es
+  precision mediump float;
+  uniform float u_lineColorMode;
+  in float v_color_start;
+  in float v_color_end;
+  in float v_color2_start;
+  in float v_color2_end;
+  in float v_t;
+  void main() {
+    ${!hasFirst ? `
+    fragColor = vec4(0.0, 0.0, 0.0, 1.0);` : hasSecond ? `
+    float value = u_lineColorMode > 0.5
+      ? (v_t < 0.5 ? v_color_start : v_color_end)
+      : mix(v_color_start, v_color_end, v_t);
+    float value2 = u_lineColorMode > 0.5
+      ? (v_t < 0.5 ? v_color2_start : v_color2_end)
+      : mix(v_color2_start, v_color2_end, v_t);
+    fragColor = map_color_2d_(vec2(value, value2));` : `
+    float value = u_lineColorMode > 0.5
+      ? (v_t < 0.5 ? v_color_start : v_color_end)
+      : mix(v_color_start, v_color_end, v_t);
+    fragColor = map_color_(value);`}
+  }
+`
+}
+
+class LinesLayerType extends ScatterLayerTypeBase {
+  constructor() {
+    super({ name: "lines", vert: makeLinesVert(false, false, false, false), frag: makeLinesFrag(false, false) })
+  }
+
+  schema(data) {
+    const d = Data.wrap(data)
+    return {
+      type: "object",
+      properties: {
+        ...this._commonSchemaProperties(d),
+        lineSegmentIdData: EXPRESSION_REF_OPT,
+        lineColorMode: {
+          type: "string",
+          enum: ["gradient", "midpoint"],
+          default: "gradient",
+          description: "Color mode for lines: gradient interpolates vData linearly; midpoint uses each endpoint's color up to the segment center"
+        },
+        lineWidth: {
+          type: "number",
+          default: 1.0,
+          minimum: 1,
+          description: "Line width in pixels (note: browsers may clamp values above 1)"
+        }
+      },
+      required: ["xData", "yData", "zData", "zAxis"]
+    }
+  }
+
+  async _createLayer(regl, parameters, data, plot) {
+    const d = Data.wrap(data)
+    const { lineSegmentIdData: lineSegmentIdDataRaw, lineColorMode = "gradient", lineWidth = 1.0 } = parameters
+    const lineSegmentIdData = (lineSegmentIdDataRaw == null || lineSegmentIdDataRaw === "none") ? null : lineSegmentIdDataRaw
+    const { xData, yData, zData: zDataOrig, vData: vDataOrig, vData2: vData2Orig, fData: fDataOrig } = parameters
+    const zData  = (zDataOrig  == null || zDataOrig  === "none") ? null : zDataOrig
+    const vData  = (vDataOrig  == null || vDataOrig  === "none") ? null : vDataOrig
+    const vData2 = (vData2Orig == null || vData2Orig === "none") ? null : vData2Orig
+    const fData  = (fDataOrig  == null || fDataOrig  === "none") ? null : fDataOrig
+
+    const xQK = resolveQuantityKind(xData, d) ?? xData
+    const yQK = resolveQuantityKind(yData, d) ?? yData
+    const zQK  = zData  ? (resolveQuantityKind(zData,  d) ?? zData)  : null
+    const vQK  = vData  ? (resolveQuantityKind(vData,  d) ?? vData)  : null
+    const vQK2 = vData2 ? (resolveQuantityKind(vData2, d) ?? vData2) : null
+
+    const colX   = await resolveExprToColumn(xData, d, regl, plot)
+    const colY   = await resolveExprToColumn(yData, d, regl, plot)
+    const colZ   = zData  ? await resolveExprToColumn(zData,  d, regl, plot) : null
+    const colV   = vData  ? await resolveExprToColumn(vData,  d, regl, plot) : null
+    const colV2  = vData2 ? await resolveExprToColumn(vData2, d, regl, plot) : null
+    const colF   = fData  ? await resolveExprToColumn(fData,  d, regl, plot) : null
+    const colSeg = lineSegmentIdData ? await resolveExprToColumn(lineSegmentIdData, d, regl, plot) : null
+
+    if (!colX) throw new Error(`Data column '${xData}' not found`)
+    if (!colY) throw new Error(`Data column '${yData}' not found`)
+
+    const N = colX.length
+    const domains = this._buildDomains(d, xData, yData, zData, vData, vData2, xQK, yQK, zQK, vQK, vQK2)
+
+    // For vData: if a string column, offset-sample start/end; if a computed expression,
+    // pass through as-is (both endpoints get the same value, matching old behaviour).
+    const vAttr0  = vData  ? (colV  ? colV.withOffset('0.0')  : vData)  : null
+    const vAttr1  = vData  ? (colV  ? colV.withOffset('1.0')  : vData)  : null
+    const vAttr20 = vData2 ? (colV2 ? colV2.withOffset('0.0') : vData2) : null
+    const vAttr21 = vData2 ? (colV2 ? colV2.withOffset('1.0') : vData2) : null
+
+    return [{
+      attributes: {
+        a_endPoint: new Float32Array([0.0, 1.0]),
+        a_x0: colX.withOffset('0.0'),
+        a_x1: colX.withOffset('1.0'),
+        a_y0: colY.withOffset('0.0'),
+        a_y1: colY.withOffset('1.0'),
+        ...(colZ   ? { a_z0: colZ.withOffset('0.0'),   a_z1: colZ.withOffset('1.0')   } : {}),
+        ...(vAttr0  !== null ? { a_v0:  vAttr0,  a_v1:  vAttr1  } : {}),
+        ...(vAttr20 !== null ? { a_v20: vAttr20, a_v21: vAttr21 } : {}),
+        ...(colSeg ? { a_seg0: colSeg.withOffset('0.0'), a_seg1: colSeg.withOffset('1.0') } : {}),
+        ...(fData  ? { a_f0:  colF.withOffset('0.0'),  a_f1:  colF.withOffset('1.0')  } : {}),
+      },
+      uniforms: {
+        u_lineColorMode: lineColorMode === "midpoint" ? 1.0 : 0.0,
+      },
+      domains,
+      primitive: "lines",
+      lineWidth,
+      vertexCount: 2,
+      instanceCount: N - 1,
+    }]
+  }
+
+  async createDrawCommand(regl, layer, plot) {
+    const hasFilter  = Object.keys(layer.filterAxes).length > 0
+    const hasFirst   = '' in layer.colorAxes
+    const hasSecond  = '2' in layer.colorAxes
+    const hasSegIds  = 'a_seg0' in layer.attributes
+    const hasV       = 'a_v0'   in layer.attributes
+    const hasV2      = 'a_v20'  in layer.attributes
+    const hasZ       = 'a_z0'   in layer.attributes
+    this.vert = makeLinesVert(hasFilter, hasSegIds, hasV, hasV2, hasZ)
+    this.frag = makeLinesFrag(hasFirst, hasSecond)
+    return await super.createDrawCommand(regl, layer, plot)
+  }
+}
+
+export const linesLayerType = new LinesLayerType()
+registerLayerType("lines", linesLayerType)

package/src/layers/PointsLayer.js

@@ -0,0 +1,118 @@
+import { ScatterLayerTypeBase } from "./ScatterShared.js"
+import { Data } from "../data/Data.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
+import { resolveQuantityKind } from "../compute/ComputationRegistry.js"
+
+function makePointsVert(hasFilter, hasZ) {
+  return `#version 300 es
+  precision mediump float;
+  in float x;
+  in float y;
+  ${hasZ ? 'in float z;' : ''}
+  in float color_data;
+  in float color_data2;
+  ${hasFilter ? 'in float filter_data;' : ''}
+  uniform vec2 xDomain;
+  uniform vec2 yDomain;
+  uniform float xScaleType;
+  uniform float yScaleType;
+  uniform float u_pointSize;
+  out float value;
+  out float value2;
+  void main() {
+    ${hasFilter ? 'if (!filter_(filter_data)) { gl_Position = vec4(2.0, 2.0, 2.0, 1.0); return; }' : ''}
+    ${hasZ ? 'gl_Position = plot_pos_3d(vec3(x, y, z));' : 'gl_Position = plot_pos(vec2(x, y));'}
+    gl_PointSize = u_pointSize;
+    value = color_data;
+    value2 = color_data2;
+  }
+`
+}
+
+function makePointsFrag(hasFirst, hasSecond) {
+  return `#version 300 es
+  precision mediump float;
+  in float value;
+  in float value2;
+  void main() {
+    ${hasFirst
+       ? (hasSecond
+           ? 'fragColor = map_color_2d_(vec2(value, value2));'
+           : 'fragColor = map_color_2d_x_(value);')
+       : (hasSecond
+           ? 'fragColor = map_color_2d_y_2(value2);'
+           : 'fragColor = vec4(0.0, 0.0, 0.0, 1.0);')}
+  }
+`
+}
+
+class PointsLayerType extends ScatterLayerTypeBase {
+  constructor() {
+    super({ name: "points", vert: makePointsVert(false), frag: makePointsFrag(false) })
+  }
+
+  schema(data) {
+    const d = Data.wrap(data)
+    return {
+      type: "object",
+      properties: {
+        ...this._commonSchemaProperties(d),
+        pointSize: { type: "integer", default: 4, minimum: 1 },
+      },
+      required: ["xData", "yData", "zData", "zAxis", "pointSize"]
+    }
+  }
+
+  _createLayer(regl, parameters, data, plot) {
+    const d = Data.wrap(data)
+    const { vData: vDataRaw, vData2: vData2Raw, fData: fDataRaw, zData: zDataRaw } = parameters
+    const vDataIn  = (vDataRaw  == null || vDataRaw  === "none") ? null : vDataRaw
+    const vData2In = (vData2Raw == null || vData2Raw === "none") ? null : vData2Raw
+    const fData    = (fDataRaw  == null || fDataRaw  === "none") ? null : fDataRaw
+    const zData    = (zDataRaw  == null || zDataRaw  === "none") ? null : zDataRaw
+    const vData  = vDataIn
+    const vData2 = vData2In
+
+    const xQK  = resolveQuantityKind(parameters.xData, d) ?? undefined
+    const yQK  = resolveQuantityKind(parameters.yData, d) ?? undefined
+    const zQK  = zData  ? (resolveQuantityKind(zData,  d) ?? undefined) : undefined
+    const vQK  = vData  ? resolveQuantityKind(vData,  d) : null
+    const vQK2 = vData2 ? resolveQuantityKind(vData2, d) : null
+
+    const domains = this._buildDomains(d, parameters.xData, parameters.yData, zData, vData, vData2, xQK, yQK, zQK, vQK, vQK2)
+
+    // Vertex count: read from data when xData is a plain column name so that
+    // Plot.render() can determine how many vertices to draw even when other
+    // attributes are computed expressions resolved at draw time.
+    const vertexCount = typeof parameters.xData === 'string'
+      ? (d.getData(parameters.xData)?.length ?? null)
+      : null
+
+    return [{
+      attributes: {
+        x: parameters.xData,
+        y: parameters.yData,
+        ...(zData !== null ? { z: zData } : {}),
+        color_data:  vData  !== null ? vData  : new Float32Array(vertexCount ?? 0).fill(NaN),
+        color_data2: vData2 !== null ? vData2 : new Float32Array(vertexCount ?? 0).fill(NaN),
+        ...(fData != null ? { filter_data: fData } : {}),
+      },
+      uniforms: { u_pointSize: () => parameters.pointSize ?? 4 },
+      domains,
+      vertexCount,
+    }]
+  }
+
+  async createDrawCommand(regl, layer, plot) {
+    const hasFilter = Object.keys(layer.filterAxes).length > 0
+    const hasFirst  = '' in layer.colorAxes
+    const hasSecond = '2' in layer.colorAxes
+    const hasZ      = 'z' in layer.attributes
+    this.vert = makePointsVert(hasFilter, hasZ)
+    this.frag = makePointsFrag(hasFirst, hasSecond)
+    return await super.createDrawCommand(regl, layer, plot)
+  }
+}
+
+export const pointsLayerType = new PointsLayerType()
+registerLayerType("points", pointsLayerType)