@vitessce/gl 2.0.3-beta.0 → 2.0.3

package/src/PaddedExpressionHeatmapBitmapLayer.js

@@ -0,0 +1,154 @@
+/* eslint-disable no-underscore-dangle */
+import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
+import { _mergeShaders, project32, picking } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
+import { BitmapLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
+import { Texture2D } from '@luma.gl/core';
+import { PIXELATED_TEXTURE_PARAMETERS, TILE_SIZE, DATA_TEXTURE_SIZE } from './heatmap-constants';
+import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER } from './constants';
+import { vertexShader, fragmentShader } from './padded-expression-heatmap-bitmap-layer-shaders';
+
+const defaultProps = {
+  image: { type: 'object', value: null, async: true },
+  colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
+  bounds: { type: 'array', value: [1, 0, 0, 1], compare: true },
+  aggSizeX: { type: 'number', value: 8.0, compare: true },
+  aggSizeY: { type: 'number', value: 8.0, compare: true },
+  colorScaleLo: { type: 'number', value: 0.0, compare: true },
+  colorScaleHi: { type: 'number', value: 1.0, compare: true },
+};
+
+/**
+ * A BitmapLayer that performs aggregation in the fragment shader,
+ * and renders its texture from a Uint8Array rather than an ImageData.
+ */
+export default class PaddedExpressionHeatmapBitmapLayer extends BitmapLayer {
+  /**
+   * Copy of getShaders from Layer (grandparent, parent of BitmapLayer).
+   * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/core/src/lib/layer.js#L302
+   * @param {object} shaders
+   * @returns {object} Merged shaders.
+   */
+  _getShaders(shaders) {
+    this.props.extensions.forEach((extension) => {
+      // eslint-disable-next-line no-param-reassign
+      shaders = _mergeShaders(
+        shaders,
+        extension.getShaders.call(this, extension),
+      );
+    });
+    return shaders;
+  }
+
+  /**
+   * Need to override to provide custom shaders.
+   */
+  getShaders() {
+    const { colormap } = this.props;
+    const fragmentShaderWithColormap = GLSL_COLORMAPS.includes(colormap)
+      ? fragmentShader.replace(COLORMAP_SHADER_PLACEHOLDER, colormap)
+      : fragmentShader.replace(
+        COLORMAP_SHADER_PLACEHOLDER,
+        GLSL_COLORMAP_DEFAULT,
+      );
+    return this._getShaders({
+      vs: vertexShader,
+      fs: fragmentShaderWithColormap,
+      modules: [project32, picking],
+    });
+  }
+
+  updateState(args) {
+    super.updateState(args);
+    const { props, oldProps } = args;
+    if (props.colormap !== oldProps.colormap) {
+      const { gl } = this.context;
+      // eslint-disable-next-line no-unused-expressions
+      this.state.model?.delete();
+      this.state.model = this._getModel(gl);
+      this.getAttributeManager().invalidateAll();
+    }
+    if (props.image !== oldProps.image) {
+      this.loadTexture(this.props.image);
+    }
+  }
+
+  /**
+   * Need to override to provide additional uniform values.
+   * Simplified by removing video-related code.
+   * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L173
+   * @param {*} opts
+   */
+  draw(opts) {
+    const { uniforms } = opts;
+    const { bitmapTexture, model } = this.state;
+    const {
+      aggSizeX,
+      aggSizeY,
+      colorScaleLo,
+      colorScaleHi,
+      origDataSize,
+      tileI,
+      tileJ,
+      numXTiles,
+      numYTiles,
+    } = this.props;
+    // Render the image
+    if (bitmapTexture && model) {
+      model
+        .setUniforms(
+          Object.assign({}, uniforms, {
+            uBitmapTexture: bitmapTexture,
+            uOrigDataSize: origDataSize,
+            uReshapedDataSize: [DATA_TEXTURE_SIZE, DATA_TEXTURE_SIZE],
+            uTextureSize: [TILE_SIZE, TILE_SIZE],
+            uAggSize: [aggSizeX, aggSizeY],
+            uColorScaleRange: [colorScaleLo, colorScaleHi],
+            tileIJ: [tileI, tileJ],
+            dataIJ: [0, 0],
+            numTiles: [numXTiles, numYTiles],
+            numData: [1, 1],
+          }),
+        )
+        .draw();
+    }
+  }
+
+  /**
+   * Need to override to provide the custom DEFAULT_TEXTURE_PARAMETERS
+   * object.
+   * Simplified by removing video-related code.
+   * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L218
+   * @param {Array<Uint8Array>} images
+   */
+  loadTexture(image) {
+    const { gl } = this.context;
+
+    if (this.state.bitmapTexture) {
+      this.state.bitmapTexture.delete();
+    }
+
+    if (image && image instanceof Texture2D) {
+      this.setState({
+        bitmapTexture: image,
+      });
+    } else if (image) {
+      this.setState({
+        bitmapTexture: new Texture2D(gl, {
+          data: image,
+          mipmaps: false,
+          parameters: PIXELATED_TEXTURE_PARAMETERS,
+          // Each color contains a single luminance value.
+          // When sampled, rgb are all set to this luminance, alpha is 1.0.
+          // Reference: https://luma.gl/docs/api-reference/webgl/texture#texture-formats
+          format: GL.LUMINANCE,
+          dataFormat: GL.LUMINANCE,
+          type: GL.UNSIGNED_BYTE,
+          width: DATA_TEXTURE_SIZE,
+          height: DATA_TEXTURE_SIZE,
+        }),
+      });
+    }
+  }
+}
+PaddedExpressionHeatmapBitmapLayer.layerName = 'PaddedExpressionHeatmapBitmapLayer';
+PaddedExpressionHeatmapBitmapLayer.defaultProps = defaultProps;

package/src/PixelatedBitmapLayer.js

@@ -0,0 +1,30 @@
+import { BitmapLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
+import { CompositeLayer } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
+import { PIXELATED_TEXTURE_PARAMETERS } from './heatmap-constants';
+
+
+// These are the same defaultProps as for BitmapLayer.
+const defaultProps = {
+  ...BitmapLayer.defaultProps,
+  image: { type: 'object', value: null, async: true },
+  bounds: { type: 'array', value: [1, 0, 0, 1], compare: true },
+  desaturate: {
+    type: 'number', min: 0, max: 1, value: 0,
+  },
+  transparentColor: { type: 'color', value: [0, 0, 0, 0] },
+  tintColor: { type: 'color', value: [255, 255, 255] },
+};
+
+export default class PixelatedBitmapLayer extends CompositeLayer {
+  renderLayers() {
+    const { image } = this.props;
+    return new BitmapLayer(this.props, {
+      id: `${this.props.id}-wrapped`,
+      image,
+      textureParameters: PIXELATED_TEXTURE_PARAMETERS,
+    });
+  }
+}
+
+PixelatedBitmapLayer.layerName = 'PixelatedBitmapLayer';
+PixelatedBitmapLayer.defaultProps = defaultProps;

package/src/ScaledExpressionExtension/ScaledExpressionExtension.js

@@ -0,0 +1,117 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable import/no-extraneous-dependencies */
+import GL from '@luma.gl/constants';
+import { LayerExtension } from '@deck.gl/core';
+import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER } from '../constants';
+import module from './shader-module';
+
+const defaultProps = {
+  colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
+  colorScaleLo: { type: 'number', value: 0.0, compare: true },
+  colorScaleHi: { type: 'number', value: 1.0, compare: true },
+  isExpressionMode: false,
+  getExpressionValue: { type: 'accessor', value: 0 },
+  getSelectionState: { type: 'accessor', value: 0.0 },
+};
+
+export default class ScaledExpressionExtension extends LayerExtension {
+  getShaders() {
+    const { colormap } = this.props;
+    return {
+      modules: [module],
+      defines: {
+        [COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap)
+          ? colormap
+          : GLSL_COLORMAP_DEFAULT,
+      },
+    };
+  }
+
+  updateState({ props, oldProps }) {
+    if (props.colormap !== oldProps.colormap) {
+      const { gl } = this.context;
+      // Normal single model layers, like ScatterplotLayer
+      if (this.state.model) {
+        // eslint-disable-next-line no-unused-expressions
+        this.state.model?.delete();
+        this.state.model = this._getModel(gl);
+      } else {
+        // Special handling for PolygonLayer sublayer models.
+        if (this.state.models) {
+          // eslint-disable-next-line no-unused-expressions
+          this.state.models?.forEach(model => model?.delete());
+        }
+        if (this.state.topModel) {
+          // eslint-disable-next-line no-unused-expressions
+          this.state.topModel?.delete();
+        }
+        if (this.state.sideModel) {
+          // eslint-disable-next-line no-unused-expressions
+          this.state.sideModel?.delete();
+        }
+        if (this._getModels) {
+          this.setState(this._getModels(this.context.gl));
+        }
+      }
+      const attributeManager = this.getAttributeManager();
+      if (attributeManager) {
+        this.getAttributeManager().invalidateAll();
+      }
+    }
+  }
+
+  initializeState() {
+    const layer = this.getCurrentLayer();
+    // No need to run this on layers that don't have a `draw` call.
+    if (layer.isComposite) {
+      return;
+    }
+    const attributeManager = this.getAttributeManager();
+    if (attributeManager) {
+      // This attributes is the array of expression data needed for
+      // coloring cells against the colormap.
+      attributeManager.add({
+        expressionValue: {
+          type: GL.FLOAT,
+          size: 1,
+          transition: true,
+          accessor: 'getExpressionValue',
+          defaultValue: 1,
+          // PolygonLayer fill needs not-intsanced attribute but
+          // ScatterplotLayer and the PolygonLayer stroke needs instanced.
+          // So use another attribute's divisor property as a proxy for this divisor.
+          divisor: Object.values(attributeManager.attributes)[0].settings.divisor,
+        },
+      });
+    }
+  }
+
+  draw() {
+    const {
+      colorScaleLo,
+      colorScaleHi,
+      isExpressionMode,
+    } = this.props;
+    const {
+      topModel, sideModel, models, model,
+    } = this.state;
+    const uniforms = {
+      uColorScaleRange: [colorScaleLo, colorScaleHi],
+      uIsExpressionMode: isExpressionMode,
+    };
+    // ScatterplotLayer model
+    // eslint-disable-next-line no-unused-expressions
+    model?.setUniforms(uniforms);
+
+    // PolygonLayer models from sublayers
+    // eslint-disable-next-line no-unused-expressions
+    models?.forEach(m => m.setUniforms(uniforms));
+    // eslint-disable-next-line no-unused-expressions
+    topModel?.setUniforms(uniforms);
+    // eslint-disable-next-line no-unused-expressions
+    sideModel?.setUniforms(uniforms);
+  }
+}
+
+ScaledExpressionExtension.extensionName = 'ScaledExpressionExtension';
+ScaledExpressionExtension.defaultProps = defaultProps;

package/{dist → src}/ScaledExpressionExtension/index.js

@@ -1,2 +1,3 @@
 import ScaledExpressionExtension from './ScaledExpressionExtension';
+
 export default ScaledExpressionExtension;

package/{dist → src}/ScaledExpressionExtension/shader-module.js

@@ -1,4 +1,5 @@
 import { colormaps } from '../glsl/index';
+
 /**
  *
  * Reference: https://github.com/visgl/deck.gl/blob/8.4-release/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
@@ -16,8 +17,9 @@ uniform vec2 uColorScaleRange;
 uniform bool uIsExpressionMode;
 
 `;
+
 const inject = {
-    'vs:DECKGL_FILTER_COLOR': `
+  'vs:DECKGL_FILTER_COLOR': `
     if(uIsExpressionMode) {
       float normalizedExpressionValue = expressionValue / 255.0;
       float scaledExpressionValue = (normalizedExpressionValue - uColorScaleRange[0]) / max(0.005, (uColorScaleRange[1] - uColorScaleRange[0]));
@@ -25,8 +27,9 @@ const inject = {
     }
   `,
 };
+
 export default {
-    name: 'scaled-expression',
-    vs,
-    inject,
+  name: 'scaled-expression',
+  vs,
+  inject,
 };

package/src/SelectionExtension/SelectionExtension.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable import/no-extraneous-dependencies */
+import GL from '@luma.gl/constants';
+import { LayerExtension } from '@deck.gl/core';
+import module from './shader-module';
+
+export default class SelectionExtension extends LayerExtension {
+  // eslint-disable-next-line class-methods-use-this
+  getShaders() {
+    return {
+      modules: [module],
+    };
+  }
+
+  initializeState(context, extension) {
+    const attributeManager = this.getAttributeManager();
+    if (attributeManager) {
+      attributeManager.add({
+        isSelected: {
+          type: GL.FLOAT,
+          size: 1,
+          transition: true,
+          accessor: 'getCellIsSelected',
+          defaultValue: 1,
+          // PolygonLayer needs not-intsanced attribute but
+          // ScatterplotLayer needs instanced.
+          divisor: Number(extension.opts.instanced),
+        },
+      });
+    }
+  }
+}
+
+SelectionExtension.extensionName = 'SelectionExtension';

package/{dist → src}/SelectionExtension/index.js

@@ -1,2 +1,3 @@
 import SelectionExtension from './SelectionExtension';
+
 export default SelectionExtension;

package/{dist → src}/SelectionExtension/shader-module.js

@@ -1,11 +1,12 @@
 const vs = `
 attribute float isSelected;
 `;
+
 const inject = {
-    'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': `
     position.z += (1. - isSelected) * .00005; // Add a small z offset for unselected points in the positive direction i.e into the screen.
   `,
-    'fs:#main-start': ` // Gets rid of bad border effects (active after deck.gl 8.5): https://github.com/visgl/deck.gl/pull/6081
+  'fs:#main-start': ` // Gets rid of bad border effects (active after deck.gl 8.5): https://github.com/visgl/deck.gl/pull/6081
     float distToCenterNew = length(unitPosition) * outerRadiusPixels;
     float inCircleNew = step(distToCenterNew, outerRadiusPixels);
     if (inCircleNew == 0.0) {
@@ -13,8 +14,9 @@ const inject = {
     }
   `,
 };
+
 export default {
-    name: 'selection',
-    vs,
-    inject,
+  name: 'selection',
+  vs,
+  inject,
 };

package/src/SelectionLayer.js

@@ -0,0 +1,198 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-underscore-dangle */
+// File adopted from nebula.gl's SelectionLayer
+// https://github.com/uber/nebula.gl/blob/8e9c2ec8d7cf4ca7050909ed826eb847d5e2cd9c/modules/layers/src/layers/selection-layer.js
+import { CompositeLayer } from 'deck.gl';
+import { polygon as turfPolygon, point as turfPoint } from '@turf/helpers';
+import booleanWithin from '@turf/boolean-within';
+import booleanContains from '@turf/boolean-contains';
+import booleanOverlap from '@turf/boolean-overlap';
+import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
+import { ScatterplotLayer } from '@deck.gl/layers';
+import { SELECTION_TYPE } from 'nebula.gl';
+import { EditableGeoJsonLayer } from '@nebula.gl/layers';
+import { DrawRectangleMode, DrawPolygonByDraggingMode, ViewMode } from '@nebula.gl/edit-modes';
+
+const EDIT_TYPE_ADD = 'addFeature';
+const EDIT_TYPE_CLEAR = 'clearFeatures';
+
+// Customize the click handlers for the rectangle and polygon tools,
+// so that clicking triggers the `onEdit` callback.
+class ClickableDrawRectangleMode extends DrawRectangleMode {
+  // eslint-disable-next-line class-methods-use-this
+  handleClick(event, props) {
+    props.onEdit({ editType: EDIT_TYPE_CLEAR });
+  }
+}
+
+class ClickableDrawPolygonByDraggingMode extends DrawPolygonByDraggingMode {
+  // eslint-disable-next-line class-methods-use-this
+  handleClick(event, props) {
+    props.onEdit({ editType: EDIT_TYPE_CLEAR });
+  }
+}
+
+const MODE_MAP = {
+  [SELECTION_TYPE.RECTANGLE]: ClickableDrawRectangleMode,
+  [SELECTION_TYPE.POLYGON]: ClickableDrawPolygonByDraggingMode,
+};
+
+const defaultProps = {
+  selectionType: SELECTION_TYPE.RECTANGLE,
+  layerIds: [],
+  onSelect: () => {},
+};
+
+const EMPTY_DATA = {
+  type: 'FeatureCollection',
+  features: [],
+};
+
+const LAYER_ID_GEOJSON = 'selection-geojson';
+
+const PASS_THROUGH_PROPS = [
+  'lineWidthScale',
+  'lineWidthMinPixels',
+  'lineWidthMaxPixels',
+  'lineWidthUnits',
+  'lineJointRounded',
+  'lineMiterLimit',
+  'pointRadiusScale',
+  'pointRadiusMinPixels',
+  'pointRadiusMaxPixels',
+  'lineDashJustified',
+  'getLineColor',
+  'getFillColor',
+  'getPointRadius',
+  'getLineWidth',
+  'getLineDashArray',
+  'getTentativeLineDashArray',
+  'getTentativeLineColor',
+  'getTentativeFillColor',
+  'getTentativeLineWidth',
+  'editHandlePointRadiusScale',
+  'editHandlePointRadiusMinPixels',
+  'editHandlePointRadiusMaxPixels',
+  'getEditHandlePointColor',
+  'getEditHandlePointRadius',
+  'modeHandlers',
+];
+
+export default class SelectionLayer extends CompositeLayer {
+  _selectPolygonObjects(coordinates) {
+    const {
+      onSelect,
+      getCellCoords,
+      cellsQuadTree,
+      flipY,
+    } = this.props;
+
+    const flippedCoordinates = (flipY
+      ? coordinates.map(poly => poly.map(p => ([p[0], -p[1]])))
+      : coordinates);
+
+    // Convert the selection to a turf polygon object.
+    const selectedPolygon = turfPolygon(flippedCoordinates);
+
+    // Create an array to store the results.
+    const pickingInfos = [];
+
+    // quadtree.visit() takes a callback that returns a boolean:
+    // If true returned, then the children of the node are _not_ visited.
+    // If false returned, then the children of the node are visited.
+    // Reference: https://github.com/d3/d3-quadtree#quadtree_visit
+    cellsQuadTree.visit((node, x0, y0, x1, y1) => {
+      const nodePoints = [[[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0]]];
+      const nodePolygon = turfPolygon(nodePoints);
+
+      const nodePolygonContainsSelectedPolygon = booleanContains(nodePolygon, selectedPolygon);
+      const nodePolygonWithinSelectedPolygon = booleanWithin(nodePolygon, selectedPolygon);
+      const nodePolygonOverlapsSelectedPolgyon = booleanOverlap(nodePolygon, selectedPolygon);
+
+      if (!nodePolygonContainsSelectedPolygon
+        && !nodePolygonWithinSelectedPolygon
+        && !nodePolygonOverlapsSelectedPolgyon) {
+        // We are not interested in anything below this node,
+        // so return true because we are done with this node.
+        return true;
+      }
+
+      // This node made it past the above return statement, so it must either
+      // contain, be within, or overlap with the selected polygon.
+
+      // Check if this is a leaf node.
+      if (node.data
+        && booleanPointInPolygon(
+          turfPoint([].slice.call(getCellCoords(node.data))), selectedPolygon,
+        )
+      ) {
+        // This node has data, so it is a leaf node representing one data point,
+        // and we have verified that the point is in the selected polygon.
+        pickingInfos.push(node.data);
+      }
+
+      // Return false because we are not done.
+      // We want to visit the children of this node.
+      return false;
+    });
+
+    onSelect({ pickingInfos });
+  }
+
+  renderLayers() {
+    const { onSelect } = this.props;
+    const mode = MODE_MAP[this.props.selectionType] || ViewMode;
+
+    const inheritedProps = {};
+    PASS_THROUGH_PROPS.forEach((p) => {
+      if (this.props[p] !== undefined) inheritedProps[p] = this.props[p];
+    });
+    const layers = [
+      new EditableGeoJsonLayer(
+        this.getSubLayerProps({
+          id: LAYER_ID_GEOJSON,
+          pickable: true,
+          mode,
+          modeConfig: {
+            dragToDraw: true,
+          },
+          selectedFeatureIndexes: [],
+          data: EMPTY_DATA,
+          onEdit: ({ updatedData, editType }) => {
+            if (editType === EDIT_TYPE_ADD) {
+              const { coordinates } = updatedData.features[0].geometry;
+              this._selectPolygonObjects(coordinates);
+            } else if (editType === EDIT_TYPE_CLEAR) {
+              // We want to select an empty array to clear any previous selection.
+              onSelect({ pickingInfos: [] });
+            }
+          },
+          _subLayerProps: {
+            guides: {
+              pointType: 'circle',
+              _subLayerProps: {
+                'points-circle': {
+                  // Styling for editHandles goes here.
+                  // Reference: https://github.com/uber/nebula.gl/issues/618#issuecomment-898466319
+                  type: ScatterplotLayer,
+                  radiusScale: 1,
+                  stroked: true,
+                  getLineWidth: 1,
+                  radiusMinPixels: 1,
+                  radiusMaxPixels: 3,
+                  getPointRadius: 2,
+                },
+              },
+            },
+          },
+          ...inheritedProps,
+        }),
+      ),
+    ];
+
+    return layers;
+  }
+}
+
+SelectionLayer.layerName = 'SelectionLayer';
+SelectionLayer.defaultProps = defaultProps;

package/{dist → src}/bitmask-layer-shaders.js

@@ -1,4 +1,5 @@
 import { colormaps } from './glsl/index';
+
 export const vs = `
 #define SHADER_NAME bitmask-layer-vertex-shader
 
@@ -20,6 +21,7 @@ void main(void) {
   DECKGL_FILTER_COLOR(color, geometry);
 }
 `;
+
 export const fs = `
 #define SHADER_NAME bitmask-layer-fragment-shader
 precision highp float;

package/{dist → src}/constants.js

@@ -1,11 +1,13 @@
 // List of the GLSL colormaps available,
 // to validate against before string replacing.
 export const GLSL_COLORMAPS = [
-    'plasma',
-    'viridis',
-    'jet',
+  'plasma',
+  'viridis',
+  'jet',
 ];
 export const GLSL_COLORMAP_DEFAULT = 'plasma';
 export const COLORMAP_SHADER_PLACEHOLDER = 'COLORMAP_FUNC';
+
 export const DEFAULT_GL_OPTIONS = { webgl2: true };
+
 export { SELECTION_TYPE } from 'nebula.gl';

package/src/glsl/README.md

@@ -0,0 +1,8 @@
+The `.out.glsl` files in this directory must be generated by running
+
+```sh
+pnpm run glslify
+```
+in the root of the package.
+
+Then, the outputs can be copied into JS files and exported.

package/src/glsl/colormaps.in.glsl

@@ -0,0 +1,15 @@
+#pragma glslify: plasma = require("glsl-colormap/plasma")
+#pragma glslify: viridis = require("glsl-colormap/viridis")
+#pragma glslify: greys = require("glsl-colormap/greys")
+#pragma glslify: magma = require("glsl-colormap/magma")
+#pragma glslify: jet = require("glsl-colormap/jet")
+#pragma glslify: bone = require("glsl-colormap/bone")
+#pragma glslify: copper = require("glsl-colormap/copper")
+#pragma glslify: density = require("glsl-colormap/density")
+#pragma glslify: inferno = require("glsl-colormap/inferno")
+#pragma glslify: cool = require("glsl-colormap/cool")
+#pragma glslify: hot = require("glsl-colormap/hot")
+#pragma glslify: spring = require("glsl-colormap/spring")
+#pragma glslify: summer = require("glsl-colormap/summer")
+#pragma glslify: autumn = require("glsl-colormap/autumn")
+#pragma glslify: winter = require("glsl-colormap/winter")

package/{dist → src}/glsl/index.js

@@ -1,3 +1,4 @@
+
 export const colormaps = `#define GLSLIFY 1
 vec4 plasma (float x_4) {
   const float e0 = 0.0;

package/{dist → src}/heatmap-bitmap-layer-shaders.js

@@ -1,4 +1,5 @@
 import { colormaps } from './glsl';
+
 /**
  * No change to the vertex shader from the base BitmapLayer.
  * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
@@ -28,6 +29,7 @@ void main(void) {
   DECKGL_FILTER_COLOR(color, geometry);
 }
 `;
+
 /**
  * Fragment shader adapted to perform aggregation and
  * take color scale functions + sliders into account.