@flowmap.gl/layers 8.0.0-alpha.0

package/src/AnimatedFlowLinesLayer/AnimatedFlowLinesLayerFragment.glsl.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 FlowmapBlue
+ * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export default `\
+#define SHADER_NAME animated-flow-lines-layer-fragment-shader
+
+precision highp float;
+
+uniform float animationTailLength;
+
+varying vec4 vColor;
+varying float sourceToTarget;
+varying vec2 uv;
+                                   
+void main(void) {
+  geometry.uv = uv;
+
+  gl_FragColor = vec4(vColor.xyz, vColor.w * smoothstep(1.0 - animationTailLength, 1.0, fract(sourceToTarget)));
+
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

package/src/AnimatedFlowLinesLayer/AnimatedFlowLinesLayerVertex.glsl.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright 2022 FlowmapBlue
+ * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+export default `\
+#define SHADER_NAME animated-flow-lines-layer-vertex-shader
+#define SPEED 0.015
+#define NUM_PARTS 5.0
+
+attribute vec3 positions;
+attribute vec3 instanceSourcePositions;
+attribute vec3 instanceTargetPositions;
+attribute vec3 instanceSourcePositions64Low;
+attribute vec3 instanceTargetPositions64Low;
+attribute vec4 instanceColors;
+attribute vec3 instancePickingColors;
+attribute float instanceWidths;
+attribute float instancePickable;
+attribute float instanceStaggering;
+
+uniform float opacity;
+uniform float currentTime;
+uniform float thicknessUnit;
+    
+varying vec4 vColor;
+varying float sourceToTarget;
+varying vec2 uv;
+
+// offset vector by strokeWidth pixels
+// offset_direction is -1 (left) or 1 (right)
+vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction, float width) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace * project_uViewportSize);
+  // rotate by 90 degrees
+  dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+
+  return dir_screenspace * offset_direction * width / 2.0;
+}
+
+void main(void) {
+  geometry.worldPosition = instanceSourcePositions;
+  geometry.worldPositionAlt = instanceTargetPositions;
+
+  // Position
+  vec4 source_commonspace;
+  vec4 target_commonspace;
+  vec4 source = project_position_to_clipspace(instanceSourcePositions, instanceSourcePositions64Low, vec3(0.), source_commonspace);
+  vec4 target = project_position_to_clipspace(instanceTargetPositions, instanceTargetPositions64Low, vec3(0.), target_commonspace);
+
+  float widthPixels = instanceWidths * thicknessUnit;
+  
+  
+  // linear interpolation of source & target to pick right coord
+  float segmentIndex = positions.x;
+  vec4 p = mix(source, target, segmentIndex);
+  geometry.position = mix(source_commonspace, target_commonspace, segmentIndex);
+  uv = positions.xy;
+  geometry.uv = uv;
+  if (instancePickable > 0.5) {
+    geometry.pickingColor = instancePickingColors;
+  }
+  
+  // extrude
+  vec3 offset = vec3(
+    getExtrusionOffset(target.xy - source.xy, positions.y, widthPixels),
+    0.0);
+  DECKGL_FILTER_SIZE(offset, geometry);
+  gl_Position = p + vec4(project_pixel_size_to_clipspace(offset.xy), 0.0, 0.0);
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+
+  // Color
+  vColor = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;
+  DECKGL_FILTER_COLOR(vColor, geometry);
+
+  sourceToTarget = positions.x * length(source - target) * NUM_PARTS - currentTime * SPEED + instanceStaggering; 
+}
+`;

package/src/AnimatedFlowLinesLayer/index.ts

@@ -0,0 +1,3 @@
+import AnimatedFlowLinesLayer from './AnimatedFlowLinesLayer';
+
+export default AnimatedFlowLinesLayer;

package/src/FlowCirclesLayer/FlowCirclesLayer.ts

@@ -0,0 +1,150 @@
+/*
+ * Copyright 2022 FlowmapBlue
+ * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Layer, picking, project32} from '@deck.gl/core';
+import GL from '@luma.gl/constants';
+import {Geometry, Model} from '@luma.gl/core';
+import FragmentShader from './FlowCirclesLayerFragment.glsl';
+import VertexShader from './FlowCirclesLayerVertex.glsl';
+import {FlowCirclesLayerAttributes, RGBA} from '@flowmap.gl/data';
+import {LayerProps} from '../types';
+
+export type FlowCirclesDatum = Record<string, unknown>;
+
+export interface Props extends LayerProps {
+  id: string;
+  opacity?: number;
+  pickable?: boolean;
+  emptyColor?: RGBA;
+  emptyOutlineColor?: RGBA;
+  getColor?: (d: FlowCirclesDatum) => RGBA;
+  getPosition?: (d: FlowCirclesDatum) => [number, number];
+  getInRadius?: (d: FlowCirclesDatum) => number;
+  getOutRadius?: (d: FlowCirclesDatum) => number;
+  data: FlowCirclesDatum[] | FlowCirclesLayerAttributes;
+  updateTriggers?: {[key: string]: Record<string, unknown>};
+}
+
+const DEFAULT_COLOR = [0, 0, 0, 255];
+const DEFAULT_EMPTY_COLOR = [255, 255, 255, 255];
+const DEFAULT_EMPTY_OUTLINE_COLOR = [180, 180, 180, 255];
+
+class FlowCirclesLayer extends Layer {
+  static layerName = 'FlowCirclesLayer';
+
+  static defaultProps = {
+    getColor: {type: 'accessor', value: DEFAULT_COLOR},
+    emptyColor: {type: 'accessor', value: DEFAULT_EMPTY_COLOR},
+    emptyOutlineColor: {type: 'accessor', value: DEFAULT_EMPTY_OUTLINE_COLOR},
+    getPosition: {type: 'accessor', value: (d: FlowCirclesDatum) => d.position},
+    getInRadius: {type: 'accessor', value: 1},
+    getOutRadius: {type: 'accessor', value: 1},
+    parameters: {
+      depthTest: false,
+    },
+  };
+  // props!: Props;
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  getShaders() {
+    return super.getShaders({
+      vs: VertexShader,
+      fs: FragmentShader,
+      modules: [project32, picking],
+    });
+  }
+
+  initializeState() {
+    this.getAttributeManager().addInstanced({
+      instancePositions: {
+        size: 3,
+        type: GL.DOUBLE,
+        fp64: this.use64bitPositions(),
+        transition: true,
+        accessor: 'getPosition',
+      },
+      instanceInRadius: {
+        size: 1,
+        transition: true,
+        accessor: 'getInRadius',
+        defaultValue: 1,
+      },
+      instanceOutRadius: {
+        size: 1,
+        transition: true,
+        accessor: 'getOutRadius',
+        defaultValue: 1,
+      },
+      instanceColors: {
+        size: 4,
+        transition: true,
+        type: GL.UNSIGNED_BYTE,
+        accessor: 'getColor',
+        defaultValue: DEFAULT_COLOR,
+      },
+    });
+  }
+
+  updateState({props, oldProps, changeFlags}: any) {
+    super.updateState({props, oldProps, changeFlags});
+    if (changeFlags.extensionsChanged) {
+      const {gl} = this.context;
+      if (this.state.model) {
+        this.state.model.delete();
+      }
+      this.setState({model: this._getModel(gl)});
+      this.getAttributeManager().invalidateAll();
+    }
+  }
+
+  draw({uniforms}: any) {
+    const {emptyColor, emptyOutlineColor} = this.props;
+    this.state.model
+      .setUniforms({
+        ...uniforms,
+        emptyColor,
+        emptyOutlineColor,
+      })
+      .draw();
+  }
+
+  _getModel(gl: WebGLRenderingContext) {
+    // a square that minimally cover the unit circle
+    const positions = [-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0];
+
+    return new Model(
+      gl,
+      Object.assign(this.getShaders(), {
+        id: this.props.id,
+        geometry: new Geometry({
+          drawMode: GL.TRIANGLE_FAN,
+          vertexCount: 4,
+          attributes: {
+            positions: {size: 3, value: new Float32Array(positions)},
+          },
+        }),
+        isInstanced: true,
+      }),
+    );
+  }
+}
+
+export default FlowCirclesLayer;

package/src/FlowCirclesLayer/FlowCirclesLayerFragment.glsl.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2022 FlowmapBlue
+ * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+export default `\
+#define SHADER_NAME flow-circles-layer-fragment-shader
+#define SOFT_OUTLINE 0.1
+#define EPS 0.05
+precision highp float;
+
+uniform vec4 emptyColor;
+uniform vec4 emptyOutlineColor;
+
+varying vec4 vColor;
+varying vec2 unitPosition;
+varying float unitInRadius;
+varying float unitOutRadius;
+
+float when_gt(float x, float y) {
+  return max(sign(x - y), 0.0);
+}
+
+void main(void) {
+  geometry.uv = unitPosition;
+  float distToCenter = length(unitPosition);
+  if (distToCenter > 1.0) {
+    discard;
+  }
+
+  // See https://stackoverflow.com/questions/47285778
+  vec4 ringColor = mix(
+    emptyColor / 255., vColor,
+    when_gt(unitInRadius, unitOutRadius)
+  );
+  vec4 outlineColor = mix(
+    emptyOutlineColor / 255., vColor,
+    when_gt(unitInRadius, unitOutRadius)
+  );
+  
+  float innerR = min(unitInRadius, unitOutRadius) * (1.0 - SOFT_OUTLINE);
+  
+  // Inner circle
+  float step2 = innerR - EPS; 
+  float step3 = innerR;
+  
+  // Ring
+  float step4 = innerR + EPS;
+  float step5 = 1.0 - SOFT_OUTLINE - EPS*2.0;
+  float step6 = 1.0 - SOFT_OUTLINE;
+  
+  gl_FragColor = vColor;
+  gl_FragColor = mix(gl_FragColor, emptyColor / 255., smoothstep(step2, step3, distToCenter));
+  gl_FragColor = mix(gl_FragColor, ringColor, smoothstep(step3, step4, distToCenter));
+  gl_FragColor = mix(gl_FragColor, outlineColor, smoothstep(step5, step6, distToCenter));
+  gl_FragColor = mix(gl_FragColor, emptyColor / 255., smoothstep(step6, 1.0, distToCenter));
+  gl_FragColor.a *= smoothstep(0.0, SOFT_OUTLINE, 1.0 - distToCenter);
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

package/src/FlowCirclesLayer/FlowCirclesLayerVertex.glsl.ts

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2022 FlowmapBlue
+ * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+export default `\
+#define SHADER_NAME flow-circles-layer-vertex-shader
+#define radiusScale 100
+
+attribute vec3 positions;
+
+attribute vec3 instancePositions;
+attribute vec3 instancePositions64Low;
+attribute float instanceInRadius;
+attribute float instanceOutRadius;
+attribute vec4 instanceColors;
+attribute vec3 instancePickingColors;
+
+uniform float opacity;
+uniform vec4 emptyColor;
+uniform vec4 emptyOutlineColor;
+
+varying vec4 vColor;
+varying vec2 unitPosition;
+varying float unitInRadius;
+varying float unitOutRadius;
+
+void main(void) {
+  geometry.worldPosition = instancePositions;
+
+  float outerRadiusPixels = max(instanceInRadius, instanceOutRadius);
+  unitInRadius = instanceInRadius / outerRadiusPixels; 
+  unitOutRadius = instanceOutRadius / outerRadiusPixels; 
+
+  // position on the containing square in [-1, 1] space
+  unitPosition = positions.xy;
+  geometry.uv = unitPosition;
+  geometry.pickingColor = instancePickingColors;
+                                                                                                    
+  // Find the center of the point and add the current vertex
+  vec3 offset = positions * project_pixel_size(outerRadiusPixels);
+  DECKGL_FILTER_SIZE(offset, geometry);
+  gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset, geometry.position);
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+                            
+  // Apply opacity to instance color, or return instance picking color
+  vColor = vec4(instanceColors.rgb / 255., instanceColors.a / 255. * opacity);
+  DECKGL_FILTER_COLOR(vColor, geometry);
+}
+`;

package/src/FlowCirclesLayer/index.ts

@@ -0,0 +1,3 @@
+import FlowCirclesLayer from './FlowCirclesLayer';
+
+export default FlowCirclesLayer;

package/src/FlowLinesLayer/FlowLinesLayer.ts

@@ -0,0 +1,238 @@
+/*
+ * Copyright 2022 FlowmapBlue
+ * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Layer, picking, project32} from '@deck.gl/core';
+import GL from '@luma.gl/constants';
+import {Geometry, Model} from '@luma.gl/core';
+import FragmentShader from './FlowLinesLayerFragment.glsl';
+import VertexShader from './FlowLinesLayerVertex.glsl';
+import {FlowLinesLayerAttributes, RGBA} from '@flowmap.gl/data';
+import {LayerProps} from '../types';
+
+export interface Props<F> extends LayerProps {
+  id: string;
+  opacity?: number;
+  pickable?: boolean;
+  updateTriggers?: {[key: string]: Record<string, unknown>};
+  data: F[] | FlowLinesLayerAttributes;
+  drawOutline: boolean;
+  outlineColor?: RGBA;
+  outlineThickness?: number;
+  thicknessUnit?: number;
+  getSourcePosition?: (d: F) => [number, number];
+  getTargetPosition?: (d: F) => [number, number];
+  getColor?: (d: F) => RGBA;
+  getThickness?: (d: F) => number;
+  getPickable?: (d: F, {index}: {index: number}) => number; // >= 1.0 -> true
+  getEndpointOffsets?: (d: F) => [number, number];
+}
+
+const DEFAULT_COLOR: RGBA = [0, 132, 193, 255];
+const INNER_SIDE_OUTLINE_THICKNESS = 1;
+
+class FlowLinesLayer<F> extends Layer {
+  static layerName = 'FlowLinesLayer';
+  static defaultProps = {
+    getSourcePosition: {type: 'accessor', value: (d: any) => [0, 0]},
+    getTargetPosition: {type: 'accessor', value: (d: any) => [0, 0]},
+    getColor: {type: 'accessor', value: DEFAULT_COLOR},
+    getThickness: {type: 'accessor', value: (d: any) => d.count}, // 0..0.5
+    getPickable: {type: 'accessor', value: (d: any) => 1.0},
+    drawOutline: true,
+    thicknessUnit: 12,
+    outlineThickness: 1,
+    outlineColor: [255, 255, 255, 255],
+    parameters: {
+      depthTest: false,
+    },
+  };
+  // props!: Props;
+
+  constructor(props: Props<F>) {
+    super(props);
+  }
+
+  getShaders(): Record<string, unknown> {
+    return super.getShaders({
+      vs: VertexShader,
+      fs: FragmentShader,
+      modules: [project32, picking],
+      shaderCache: this.context.shaderCache,
+    });
+  }
+
+  initializeState(): void {
+    const {attributeManager} = this.state;
+
+    attributeManager.addInstanced({
+      instanceSourcePositions: {
+        accessor: 'getSourcePosition',
+        size: 3,
+        transition: false,
+        type: GL.DOUBLE,
+      },
+      instanceTargetPositions: {
+        accessor: 'getTargetPosition',
+        size: 3,
+        transition: false,
+        type: GL.DOUBLE,
+      },
+      instanceThickness: {
+        accessor: 'getThickness',
+        size: 1,
+        transition: false,
+      },
+      instanceEndpointOffsets: {
+        accessor: 'getEndpointOffsets',
+        size: 2,
+        transition: false,
+      },
+      instanceColors: {
+        accessor: 'getColor',
+        size: 4,
+        type: GL.UNSIGNED_BYTE,
+        transition: false,
+      },
+      instancePickable: {
+        accessor: 'getPickable',
+        size: 1,
+        transition: false,
+      },
+    });
+  }
+
+  updateState({props, oldProps, changeFlags}: Record<string, any>): void {
+    super.updateState({props, oldProps, changeFlags});
+
+    if (changeFlags.extensionsChanged) {
+      const {gl} = this.context;
+      if (this.state.model) {
+        this.state.model.delete();
+      }
+      this.setState({model: this._getModel(gl)});
+      this.getAttributeManager().invalidateAll();
+    }
+  }
+
+  draw({uniforms}: Record<string, any>): void {
+    const {gl} = this.context;
+    const {outlineColor, thicknessUnit} = this.props;
+    gl.lineWidth(1);
+    this.state.model
+      .setUniforms({
+        ...uniforms,
+        outlineColor: outlineColor.map((x: number) => x / 255),
+        thicknessUnit: thicknessUnit * 2.0,
+        gap: 0.5,
+      })
+      .draw();
+  }
+
+  _getModel(gl: WebGLRenderingContext): Record<string, any> {
+    let positions: number[] = [];
+    let pixelOffsets: number[] = [];
+
+    const {drawOutline, outlineThickness} = this.props;
+    if (drawOutline) {
+      // source_target_mix, perpendicular_offset_in_thickness_units, direction_of_travel_offset_in_thickness_units
+      // prettier-ignore
+      positions = positions.concat([
+          // Outline
+          0, 0, 0,
+          0, 1, 0,
+          1, 0, 0,
+
+          0, 1, 0,
+          1, 0, -3,
+          1, 1, -3,
+
+          1, 0, 0,
+          1, 2, -3,
+          1, 0, -3,
+        ],
+      );
+
+      const tout = outlineThickness;
+      const tin = INNER_SIDE_OUTLINE_THICKNESS; // the outline shouldn't cover the opposite arrow
+      // perpendicular_offset_in_pixels, direction_of_travel_offset_in_pixels, fill_outline_color_mix
+      // prettier-ignore
+      pixelOffsets = pixelOffsets.concat([
+        // Outline
+        -tin, -tout, 1,
+        tout, -tout, 1,
+        -tin, tout, 1,
+
+        tout, -tout, 1,
+        -tin, 0, 1,
+        tout, 0, 1,
+
+        -tin, 3 * tout, 1,
+        2 * tout, -tout, 1,
+        -tin, -tout, 1,
+      ]);
+    }
+
+    // prettier-ignore
+    positions = positions.concat([
+      // Fill
+      0, 0, 0,
+      0, 1, 0,
+      1, 0, 0,
+
+      0, 1, 0,
+      1, 0, -3,
+      1, 1, -3,
+
+      1, 0, 0,
+      1, 2, -3,
+      1, 0, -3,
+    ]);
+
+    // prettier-ignore
+    pixelOffsets = pixelOffsets.concat([
+      // Fill
+      0, 0, 0,
+      0, 0, 0,
+      0, 0, 0,
+
+      0, 0, 0,
+      0, 0, 0,
+      0, 0, 0,
+
+      0, 0, 0,
+      0, 0, 0,
+      0, 0, 0,
+    ]);
+
+    return new Model(gl, {
+      id: this.props.id,
+      ...this.getShaders(),
+      geometry: new Geometry({
+        drawType: GL.TRIANGLES,
+        attributes: {
+          positions: new Float32Array(positions),
+          normals: new Float32Array(pixelOffsets),
+        },
+      }),
+      isInstanced: true,
+      shaderCache: this.context.shaderCache,
+    });
+  }
+}
+
+export default FlowLinesLayer;

package/src/FlowLinesLayer/FlowLinesLayerFragment.glsl.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2022 FlowmapBlue
+ * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+export default `\
+#define SHADER_NAME flow-line-layer-fragment-shader
+
+precision highp float;
+
+varying vec4 vColor;
+varying vec2 uv;
+
+void main(void) {
+  if (vColor.a == 0.0) {
+    discard;
+  }
+
+  geometry.uv = uv;
+  gl_FragColor = vColor;
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;