gladly-plot 0.0.5 → 0.0.6

package/src/layers/FilterbarLayer.js

@@ -3,6 +3,7 @@ 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

@@ -1,117 +1,94 @@
 // Lines mode uses instanced rendering:
-//   - Template: 2 vertices with a_endPoint in {0.0, 1.0}  (divisor=0 → interpolates)
-//   - Per-segment: a_x0/x1, a_y0/y1, a_v0/v1, a_seg0/seg1 (divisor=1 → constant per instance)
-//
-// Because a_v0 and a_v1 are instanced, they are the same at both template vertices for a given
-// segment, so varyings set from them are constant across the line (no GPU interpolation).
-// Only v_t (from a_endPoint) interpolates, giving the position along the segment.
+//   - 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 "../core/Data.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) {
-  return `
+function makeLinesVert(hasFilter, hasSegIds, hasV, hasV2, hasZ) {
+  return `#version 300 es
   precision mediump float;
-  attribute float a_endPoint;
-  attribute float a_x0, a_y0;
-  attribute float a_x1, a_y1;
-  attribute float a_v0, a_v1;
-  attribute float a_v20, a_v21;
-  attribute float a_seg0, a_seg1;
-  ${hasFilter ? 'attribute float a_f0, a_f1;\n  uniform vec4 filter_range;' : ''}
+  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;
-  varying float v_color_start;
-  varying float v_color_end;
-  varying float v_color2_start;
-  varying float v_color2_end;
-  varying float v_t;
+  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 = abs(a_seg0 - a_seg1) < 0.5 ? 1.0 : 0.0;
-    ${hasFilter ? 'if (!filter_in_range(filter_range, a_f0) || !filter_in_range(filter_range, a_f1)) same_seg = 0.0;' : ''}
+    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);
-    float nx = normalize_axis(x, xDomain, xScaleType);
-    float ny = normalize_axis(y, yDomain, yScaleType);
-    gl_Position = vec4(nx * 2.0 - 1.0, ny * 2.0 - 1.0, 0, 1);
-    v_color_start  = a_v0;
-    v_color_end    = a_v1;
-    v_color2_start = a_v20;
-    v_color2_end   = a_v21;
+    ${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;
   }
 `
 }
 
-const LINES_FRAG = `
+function makeLinesFrag(hasFirst, hasSecond) {
+  return `#version 300 es
   precision mediump float;
-
-  uniform int colorscale;
-  uniform vec2 color_range;
-  uniform float color_scale_type;
-
-  uniform int colorscale2;
-  uniform vec2 color_range2;
-  uniform float color_scale_type2;
-
-  uniform float alphaBlend;
   uniform float u_lineColorMode;
-  uniform float u_useSecondColor;
-
-  varying float v_color_start;
-  varying float v_color_end;
-  varying float v_color2_start;
-  varying float v_color2_end;
-  varying float v_t;
-
+  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);
-
-    if (u_useSecondColor > 0.5) {
-      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);
-
-      gl_FragColor = map_color_s_2d(
-        colorscale, color_range, value, color_scale_type,
-        colorscale2, color_range2, value2, color_scale_type2
-      );
-
-      if (alphaBlend > 0.5) {
-        gl_FragColor.a *= gl_FragColor.a;
-      }
-    } else {
-      gl_FragColor = map_color_s(colorscale, color_range, value, color_scale_type, alphaBlend);
-    }
+    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), frag: LINES_FRAG })
+    super({ name: "lines", vert: makeLinesVert(false, false, false, false), frag: makeLinesFrag(false, false) })
   }
 
   schema(data) {
-    const dataProperties = Data.wrap(data).columns()
+    const d = Data.wrap(data)
     return {
-      $schema: "https://json-schema.org/draft/2020-12/schema",
       type: "object",
       properties: {
-        ...this._commonSchemaProperties(dataProperties),
-        lineSegmentIdData: {
-          type: "string",
-          enum: dataProperties,
-          description: "Column for segment IDs; only consecutive points sharing the same ID are connected"
-        },
+        ...this._commonSchemaProperties(d),
+        lineSegmentIdData: EXPRESSION_REF_OPT,
         lineColorMode: {
           type: "string",
           enum: ["gradient", "midpoint"],
@@ -125,73 +102,82 @@ class LinesLayerType extends ScatterLayerTypeBase {
           description: "Line width in pixels (note: browsers may clamp values above 1)"
         }
       },
-      required: ["xData", "yData", "vData"]
+      required: ["xData", "yData", "zData", "zAxis"]
     }
   }
 
-  _createLayer(parameters, data) {
+  async _createLayer(regl, parameters, data, plot) {
     const d = Data.wrap(data)
-    const { lineSegmentIdData, lineColorMode = "gradient", lineWidth = 1.0 } = parameters
-    const { xData, yData, vData, vData2, fData, alphaBlend, xQK, yQK, vQK, vQK2, fQK, srcX, srcY, srcV, srcV2, srcF } =
-      this._resolveColorData(parameters, d)
-
-    const useSecond = vData2 ? 1.0 : 0.0
-    const domains = this._buildDomains(d, xData, yData, vData, vData2, xQK, yQK, vQK, vQK2)
-    const blendConfig = this._buildBlendConfig(alphaBlend)
-
-    const N = srcX.length
-    const segIds = lineSegmentIdData ? d.getData(lineSegmentIdData) : null
-    const zeroSegs = new Float32Array(N - 1)
-    const seg0 = segIds ? segIds.subarray(0, N - 1) : zeroSegs
-    const seg1 = segIds ? segIds.subarray(1, N) : zeroSegs
+    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: srcX.subarray(0, N - 1),
-        a_x1: srcX.subarray(1, N),
-        a_y0: srcY.subarray(0, N - 1),
-        a_y1: srcY.subarray(1, N),
-        a_v0: vData ? srcV.subarray(0, N - 1) : new Float32Array(N - 1),
-        a_v1: vData ? srcV.subarray(1, N) : new Float32Array(N - 1),
-        a_v20: vData2 ? srcV2.subarray(0, N - 1) : new Float32Array(N - 1),
-        a_v21: vData2 ? srcV2.subarray(1, N) : new Float32Array(N - 1),
-        a_seg0: seg0,
-        a_seg1: seg1,
-        ...(fData ? {
-          a_f0: srcF.subarray(0, N - 1),
-          a_f1: srcF.subarray(1, N),
-        } : {}),
-      },
-      attributeDivisors: {
-        a_x0: 1, a_x1: 1,
-        a_y0: 1, a_y1: 1,
-        a_v0: 1, a_v1: 1,
-        a_v20: 1, a_v21: 1,
-        a_seg0: 1, a_seg1: 1,
-        ...(fData ? { a_f0: 1, a_f1: 1 } : {}),
+        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: {
-        alphaBlend: alphaBlend ? 1.0 : 0.0,
         u_lineColorMode: lineColorMode === "midpoint" ? 1.0 : 0.0,
-        u_useSecondColor: useSecond,
-        ...(vData ? {} : { colorscale: 0, color_range: [0, 1], color_scale_type: 0.0 }),
-        ...(vData2 ? {} : { colorscale2: 0, color_range2: [0, 1], color_scale_type2: 0.0 })
       },
-      nameMap: this._buildNameMap(vData, vQK, vData2, vQK2, fData, fQK),
       domains,
       primitive: "lines",
       lineWidth,
       vertexCount: 2,
       instanceCount: N - 1,
-      blend: blendConfig,
     }]
   }
 
-  createDrawCommand(regl, layer) {
-    const hasFilter = layer.filterAxes.length > 0
-    this.vert = makeLinesVert(hasFilter)
-    return super.createDrawCommand(regl, layer)
+  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)
   }
 }
 

package/src/layers/PointsLayer.js

@@ -1,112 +1,116 @@
 import { ScatterLayerTypeBase } from "./ScatterShared.js"
-import { Data } from "../core/Data.js"
+import { Data } from "../data/Data.js"
 import { registerLayerType } from "../core/LayerTypeRegistry.js"
+import { resolveQuantityKind } from "../compute/ComputationRegistry.js"
 
-function makePointsVert(hasFilter) {
-  return `
+function makePointsVert(hasFilter, hasZ) {
+  return `#version 300 es
   precision mediump float;
-  attribute float x;
-  attribute float y;
-  attribute float color_data;
-  attribute float color_data2;
-  ${hasFilter ? 'attribute float filter_data;\n  uniform vec4 filter_range;' : ''}
+  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;
-  varying float value;
-  varying float value2;
+  uniform float u_pointSize;
+  out float value;
+  out float value2;
   void main() {
-    ${hasFilter ? 'if (!filter_in_range(filter_range, filter_data)) { gl_Position = vec4(2.0, 2.0, 2.0, 1.0); return; }' : ''}
-    float nx = normalize_axis(x, xDomain, xScaleType);
-    float ny = normalize_axis(y, yDomain, yScaleType);
-    gl_Position = vec4(nx*2.0-1.0, ny*2.0-1.0, 0, 1);
-    gl_PointSize = 4.0;
+    ${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;
   }
 `
 }
 
-const POINTS_FRAG = `
+function makePointsFrag(hasFirst, hasSecond) {
+  return `#version 300 es
   precision mediump float;
-  uniform int colorscale;
-  uniform vec2 color_range;
-  uniform float color_scale_type;
-
-  uniform int colorscale2;
-  uniform vec2 color_range2;
-  uniform float color_scale_type2;
-
-  uniform float alphaBlend;
-  uniform float u_useSecondColor;
-
-  varying float value;
-  varying float value2;
-
+  in float value;
+  in float value2;
   void main() {
-    if (u_useSecondColor > 0.5) {
-      gl_FragColor = map_color_s_2d(
-        colorscale, color_range, value, color_scale_type,
-        colorscale2, color_range2, value2, color_scale_type2
-      );
-      if (alphaBlend > 0.5) {
-        gl_FragColor.a *= gl_FragColor.a;
-      }
-    } else {
-      gl_FragColor = map_color_s(colorscale, color_range, value, color_scale_type, alphaBlend);
-    }
+    ${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: POINTS_FRAG })
+    super({ name: "points", vert: makePointsVert(false), frag: makePointsFrag(false) })
   }
 
   schema(data) {
-    const dataProperties = Data.wrap(data).columns()
+    const d = Data.wrap(data)
     return {
-      $schema: "https://json-schema.org/draft/2020-12/schema",
       type: "object",
-      properties: this._commonSchemaProperties(dataProperties),
-      required: ["xData", "yData", "vData"]
+      properties: {
+        ...this._commonSchemaProperties(d),
+        pointSize: { type: "integer", default: 4, minimum: 1 },
+      },
+      required: ["xData", "yData", "zData", "zAxis", "pointSize"]
     }
   }
 
-  _createLayer(parameters, data) {
+  _createLayer(regl, parameters, data, plot) {
     const d = Data.wrap(data)
-    const { xData, yData, vData, vData2, fData, alphaBlend, xQK, yQK, vQK, vQK2, fQK, srcX, srcY, srcV, srcV2, srcF } =
-      this._resolveColorData(parameters, d)
+    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 useSecond = vData2 ? 1.0 : 0.0
-    const domains = this._buildDomains(d, xData, yData, vData, vData2, xQK, yQK, vQK, vQK2)
-    const blendConfig = this._buildBlendConfig(alphaBlend)
+    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: srcX,
-        y: srcY,
-        color_data: vData ? srcV : new Float32Array(srcX.length),
-        color_data2: vData2 ? srcV2 : new Float32Array(srcX.length),
-        ...(fData ? { filter_data: srcF } : {}),
-      },
-      uniforms: {
-        alphaBlend: alphaBlend ? 1.0 : 0.0,
-        u_useSecondColor: useSecond,
-        ...(vData ? {} : { colorscale: 0, color_range: [0, 1], color_scale_type: 0.0 }),
-        ...(vData2 ? {} : { colorscale2: 0, color_range2: [0, 1], color_scale_type2: 0.0 })
+        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,
-      nameMap: this._buildNameMap(vData, vQK, vData2, vQK2, fData, fQK),
-      blend: blendConfig,
+      vertexCount,
     }]
   }
 
-  createDrawCommand(regl, layer) {
-    const hasFilter = layer.filterAxes.length > 0
-    this.vert = makePointsVert(hasFilter)
-    return super.createDrawCommand(regl, layer)
+  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)
   }
 }