- full refactor of shader code, DRY, optimizations etc.

- added bitmask tests while retaining the original 1D 'bounding box' test
- removed SPLOM work seed
- due to lightening up some of the shaders, do less work on the JS side too
     -> baseline case (1 range): 1/3 times the work in the vertex shader
     -> new use (>1 ranges): still rather fast

Author: monfera

src/traces/parcoords/constants.js

@@ -16,7 +16,6 @@ module.exports = {
     tickDistance: 50,
     canvasPixelRatio: 1,
     blockLineCount: 5000,
-    scatter: false,
     layers: ['contextLineLayer', 'focusLineLayer', 'pickLineLayer'],
     axisTitleOffset: 28,
     axisExtentOffset: 10,

src/traces/parcoords/lines.js

@@ -11,6 +11,7 @@
 var glslify = require('glslify');
 var c = require('./constants');
 var vertexShaderSource = glslify('./shaders/vertex.glsl');
+var contextShaderSource = glslify('./shaders/context_vertex.glsl');
 var pickVertexShaderSource = glslify('./shaders/pick_vertex.glsl');
 var fragmentShaderSource = glslify('./shaders/fragment.glsl');
 
@@ -19,6 +20,8 @@ var depthLimitEpsilon = 1e-6; // don't change; otherwise near/far plane lines ar
 var gpuDimensionCount = 64;
 var sectionVertexCount = 2;
 var vec4NumberCount = 4;
+var bitsPerByte = 8;
+var channelCount = gpuDimensionCount / bitsPerByte; // == 8 bytes needed to have 64 bits
 
 var contextColor = [119, 119, 119]; // middle gray to not drawn the focus; looks good on a black or white background
 
@@ -165,7 +168,7 @@ function valid(i, offset, panelCount) {
     return i + offset <= panelCount;
 }
 
-module.exports = function(canvasGL, d, scatter) {
+module.exports = function(canvasGL, d) {
     var model = d.model,
         vm = d.viewModel,
         domain = model.domain;
@@ -263,7 +266,7 @@ module.exports = function(canvasGL, d, scatter) {
 
         dither: false,
 
-        vert: pick ? pickVertexShaderSource : vertexShaderSource,
+        vert: pick ? pickVertexShaderSource : context ? contextShaderSource : vertexShaderSource,
 
         frag: fragmentShaderSource,
 
@@ -291,8 +294,8 @@ module.exports = function(canvasGL, d, scatter) {
             loD: regl.prop('loD'),
             hiD: regl.prop('hiD'),
             palette: paletteTexture,
-            colorClamp: regl.prop('colorClamp'),
-            scatter: regl.prop('scatter')
+            mask: regl.prop('maskTexture'),
+            colorClamp: regl.prop('colorClamp')
         },
         offset: regl.prop('offset'),
         count: regl.prop('count')
@@ -307,7 +310,7 @@ module.exports = function(canvasGL, d, scatter) {
 
     var previousAxisOrder = [];
 
-    function makeItem(i, ii, x, y, panelSizeX, canvasPanelSizeY, crossfilterDimensionIndex, scatter, I, leftmost, rightmost) {
+    function makeItem(i, ii, x, y, panelSizeX, canvasPanelSizeY, crossfilterDimensionIndex, I, leftmost, rightmost) {
         var loHi, abcd, d, index;
         var leftRight = [i, ii];
         var filterEpsilon = c.verticalPadding / canvasPanelSizeY;
@@ -321,12 +324,16 @@ module.exports = function(canvasGL, d, scatter) {
                 for(d = 0; d < 16; d++) {
                     var dimP = d + 16 * abcd;
                     dims[loHi][abcd][d] = d + 16 * abcd === index ? 1 : 0;
-                    lims[loHi][abcd][d] = (!context && valid(d, 16 * abcd, panelCount) ? initialDims[dimP === 0 ? 0 : 1 + ((dimP - 1) % (initialDims.length - 1))].brush.filter.getBounds()[loHi] : loHi) + (2 * loHi - 1) * filterEpsilon;
+                    if(!context) {
+                        lims[loHi][abcd][d] = (valid(d, 16 * abcd, panelCount) ? initialDims[dimP === 0 ? 0 : 1 + ((dimP - 1) % (initialDims.length - 1))].brush.filter.getBounds()[loHi] : loHi) + (2 * loHi - 1) * filterEpsilon;
+                    }
                 }
             }
         }
 
-        return {
+        var mask, maskTexture;
+
+        var vm = {
             key: crossfilterDimensionIndex,
             resolution: [canvasWidth, canvasHeight],
             viewBoxPosition: [x + overdrag, y],
@@ -343,17 +350,7 @@ module.exports = function(canvasGL, d, scatter) {
             dim2C: dims[1][2],
             dim2D: dims[1][3],
 
-            loA: lims[0][0],
-            loB: lims[0][1],
-            loC: lims[0][2],
-            loD: lims[0][3],
-            hiA: lims[1][0],
-            hiB: lims[1][1],
-            hiC: lims[1][2],
-            hiD: lims[1][3],
-
             colorClamp: colorClamp,
-            scatter: scatter || 0,
 
             scissorX: (I === leftmost ? 0 : x + overdrag) + (model.pad.l - overdrag) + model.layoutWidth * domain.x[0],
             scissorWidth: (I === rightmost ? canvasWidth - x + overdrag : panelSizeX + 0.5) + (I === leftmost ? x + overdrag : 0),
@@ -365,6 +362,54 @@ module.exports = function(canvasGL, d, scatter) {
             viewportWidth: canvasWidth,
             viewportHeight: canvasHeight
         };
+
+        if(!context) {
+            mask = Array.apply(null, new Array(canvasHeight * channelCount)).map(function() {
+                return 255;
+            });
+            for(var dimIndex = 0; dimIndex < dimensionCount; dimIndex++) {
+                var bitIndex = dimIndex % bitsPerByte;
+                var byteIndex = (dimIndex - bitIndex) / bitsPerByte;
+                var bitMask = Math.pow(2, bitIndex);
+                var dim = initialDims[dimIndex];
+                var ranges = dim.brush.filter.get();
+                if(ranges.length < 2) continue; // bail if the bounding box based filter is sufficient
+                var pi, pixelRange;
+                var boundingBox = dim.brush.filter.getBounds();
+                pixelRange = boundingBox.map(dim.unitScaleInOrder);
+                for(pi = Math.max(0, Math.floor(pixelRange[0])); pi <= Math.min(canvasHeight - 1, Math.ceil(pixelRange[1])); pi++) {
+                    mask[pi * channelCount + byteIndex] &= ~bitMask; // clear bits
+                }
+                for(var r = 0; r < ranges.length; r++) {
+                    pixelRange = ranges[r].map(dim.unitScaleInOrder);
+                    for(pi = Math.max(0, Math.floor(pixelRange[0])); pi <= Math.min(canvasHeight - 1, Math.ceil(pixelRange[1])); pi++) {
+                        mask[pi * channelCount + byteIndex] |= bitMask;
+                    }
+                }
+            }
+
+            maskTexture = regl.texture({
+                shape: [channelCount, canvasHeight], // 8 units x 8 bits = 64 bits, just sufficient for the almost 64 dimensions we support
+                format: 'alpha',
+                type: 'uint8',
+                mag: 'nearest',
+                min: 'nearest',
+                data: mask
+            });
+
+            vm.maskTexture = maskTexture;
+
+            vm.loA = lims[0][0];
+            vm.loB = lims[0][1];
+            vm.loC = lims[0][2];
+            vm.loD = lims[0][3];
+            vm.hiA = lims[1][0];
+            vm.hiB = lims[1][1];
+            vm.hiC = lims[1][2];
+            vm.hiD = lims[1][3];
+        }
+
+        return vm;
     }
 
     function renderGLParcoords(panels, setChanged, clearOnly) {
@@ -402,7 +447,7 @@ module.exports = function(canvasGL, d, scatter) {
             var xTo = x + panelSizeX;
             if(setChanged || !previousAxisOrder[i] || previousAxisOrder[i][0] !== x || previousAxisOrder[i][1] !== xTo) {
                 previousAxisOrder[i] = [x, xTo];
-                var item = makeItem(i, ii, x, y, panelSizeX, panelSizeY, dim1.crossfilterDimensionIndex, scatter || dim1.scatter ? 1 : 0, I, leftmost, rightmost);
+                var item = makeItem(i, ii, x, y, panelSizeX, panelSizeY, dim1.crossfilterDimensionIndex, I, leftmost, rightmost);
                 renderState.clearOnly = clearOnly;
                 renderBlock(regl, glAes, renderState, setChanged ? lines.blockLineCount : sampleCount, sampleCount, item);
             }
@@ -435,6 +480,7 @@ module.exports = function(canvasGL, d, scatter) {
     function destroy() {
         canvasGL.style['pointer-events'] = 'none';
         paletteTexture.destroy();
+        maskTexture.destroy();
     }
 
     return {

src/traces/parcoords/parcoords.js

@@ -223,7 +223,6 @@ function viewModel(state, callbacks, model) {
             tickvals: dimension.tickvals,
             ticktext: dimension.ticktext,
             ordinal: !!dimension.tickvals,
-            scatter: c.scatter || dimension.scatter,
             xIndex: i,
             crossfilterDimensionIndex: i,
             visibleIndex: dimension._index,
@@ -400,7 +399,7 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
     var yAxis = parcoordsControlView.selectAll('.' + c.cn.yAxis)
         .data(function(vm) {return vm.dimensions;}, keyFun);
 
-    function updatePanelLayoutParcoords(yAxis, vm) {
+    function updatePanelLayout(yAxis, vm) {
         var panels = vm.panels || (vm.panels = []);
         var yAxes = yAxis.each(function(d) {return d;})[vm.key].map(function(e) {return e.__data__;});
         var panelCount = yAxes.length - 1;
@@ -421,31 +420,6 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
         }
     }
 
-    function updatePanelLayoutScatter(yAxis, vm) {
-        var panels = vm.panels || (vm.panels = []);
-        var yAxes = yAxis.each(function(d) {return d;})[vm.key].map(function(e) {return e.__data__;});
-        var panelCount = yAxes.length - 1;
-        var rowCount = panelCount;
-        for(var row = 0; row < panelCount; row++) {
-            for(var p = 0; p < panelCount; p++) {
-                var panel = panels[p + row * panelCount] || (panels[p + row * panelCount] = {});
-                var dim1 = yAxes[p];
-                var dim2 = yAxes[p + 1];
-                panel.dim1 = yAxes[row + 1];
-                panel.dim2 = dim2;
-                panel.canvasX = dim1.canvasX;
-                panel.panelSizeX = dim2.canvasX - dim1.canvasX;
-                panel.panelSizeY = vm.model.canvasHeight / rowCount;
-                panel.y = row * panel.panelSizeY;
-                panel.canvasY = vm.model.canvasHeight - panel.y - panel.panelSizeY;
-            }
-        }
-    }
-
-    function updatePanelLayout(yAxis, vm) {
-        return (c.scatter ? updatePanelLayoutScatter : updatePanelLayoutParcoords)(yAxis, vm);
-    }
-
     yAxis.enter()
         .append('g')
         .classed(c.cn.yAxis, true);
@@ -457,7 +431,7 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
     parcoordsLineLayer
         .filter(function(d) {return !!d.viewModel;})
         .each(function(d) {
-            d.lineLayer = lineLayerMaker(this, d, c.scatter);
+            d.lineLayer = lineLayerMaker(this, d);
             d.viewModel[d.key] = d.lineLayer;
             d.lineLayer.render(d.viewModel.panels, !d.context);
         });

src/traces/parcoords/shaders/context_vertex.glsl

@@ -0,0 +1,44 @@
+precision highp float;
+
+attribute vec4 p0, p1, p2, p3,
+               p4, p5, p6, p7,
+               p8, p9, pa, pb,
+               pc, pd, pe;
+
+attribute vec4 pf;
+
+uniform mat4 dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D;
+
+uniform vec2 resolution,
+             viewBoxPosition,
+             viewBoxSize;
+
+uniform sampler2D palette;
+
+uniform vec2 colorClamp;
+
+varying vec4 fragColor;
+
+#pragma glslify: unfilteredPosition = require("./unfiltered_position.glsl")
+
+void main() {
+
+    float prominence = abs(pf[3]);
+
+    mat4 p[4];
+    p[0] = mat4(p0, p1, p2, p3);
+    p[1] = mat4(p4, p5, p6, p7);
+    p[2] = mat4(p8, p9, pa, pb);
+    p[3] = mat4(pc, pd, pe, abs(pf));
+
+    gl_Position = unfilteredPosition(
+        1.0 - prominence,
+        resolution, viewBoxPosition, viewBoxSize,
+        p,
+        sign(pf[3]),
+        dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D
+    );
+
+    float clampedColorIndex = clamp((prominence - colorClamp[0]) / (colorClamp[1] - colorClamp[0]), 0.0, 1.0);
+    fragColor = texture2D(palette, vec2((clampedColorIndex * 255.0 + 0.5) / 256.0, 0.5));
+}

src/traces/parcoords/shaders/pick_vertex.glsl

@@ -14,69 +14,33 @@ uniform vec2 resolution,
              viewBoxPosition,
              viewBoxSize;
 
-uniform sampler2D palette;
+uniform sampler2D mask;
 
 uniform vec2 colorClamp;
 
-uniform float scatter;
-
 varying vec4 fragColor;
 
-vec4 zero = vec4(0, 0, 0, 0);
-vec4 unit = vec4(1, 1, 1, 1);
-vec2 xyProjection = vec2(1, 1);
-
-mat4 mclamp(mat4 m, mat4 lo, mat4 hi) {
-    return mat4(clamp(m[0], lo[0], hi[0]),
-                clamp(m[1], lo[1], hi[1]),
-                clamp(m[2], lo[2], hi[2]),
-                clamp(m[3], lo[3], hi[3]));
-}
-
-bool mshow(mat4 p, mat4 lo, mat4 hi) {
-    return mclamp(p, lo, hi) == p;
-}
-
-float val(mat4 p, mat4 v) {
-    return dot(matrixCompMult(p, v) * unit, unit);
-}
+#pragma glslify: position = require("./position.glsl")
 
 void main() {
 
-    float x = 0.5 * sign(pf[3]) + 0.5;
     float prominence = abs(pf[3]);
-    float depth = 1.0 - prominence;
-
-    mat4 pA = mat4(p0, p1, p2, p3);
-    mat4 pB = mat4(p4, p5, p6, p7);
-    mat4 pC = mat4(p8, p9, pa, pb);
-    mat4 pD = mat4(pc, pd, pe, abs(pf));
-
-    float show = float(mshow(pA, loA, hiA) &&
-                       mshow(pB, loB, hiB) &&
-                       mshow(pC, loC, hiC) &&
-                       mshow(pD, loD, hiD));
-
-    vec2 yy = show * vec2(val(pA, dim2A) + val(pB, dim2B) + val(pC, dim2C) + val(pD, dim2D),
-                          val(pA, dim1A) + val(pB, dim1B) + val(pC, dim1C) + val(pD, dim1D));
-
-    vec2 dimensionToggle = vec2(x, 1.0 - x);
-
-    vec2 scatterToggle = vec2(scatter, 1.0 - scatter);
-
-    float y = dot(yy, dimensionToggle);
-    mat2 xy = mat2(viewBoxSize * yy + dimensionToggle, viewBoxSize * vec2(x, y));
-
-    vec2 viewBoxXY = viewBoxPosition + xy * scatterToggle;
-
-    float depthOrHide = depth + 2.0 * (1.0 - show);
 
-    gl_Position = vec4(
-        xyProjection * (2.0 * viewBoxXY / resolution - 1.0),
-        depthOrHide,
-        1.0
+    mat4 p[4];
+    p[0] = mat4(p0, p1, p2, p3);
+    p[1] = mat4(p4, p5, p6, p7);
+    p[2] = mat4(p8, p9, pa, pb);
+    p[3] = mat4(pc, pd, pe, abs(pf));
+
+    gl_Position = position(
+        1.0 - prominence,
+        resolution, viewBoxPosition, viewBoxSize,
+        p,
+        sign(pf[3]),
+        dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D,
+        loA, hiA, loB, hiB, loC, hiC, loD, hiD,
+        mask
     );
 
-    // pick coloring
     fragColor = vec4(pf.rgb, 1.0);
 }