@deck.gl/extensions 8.9.11 → 8.9.12

package/typed/data-filter/aggregator.js

@@ -0,0 +1,98 @@
+import { Model, Texture2D, Framebuffer, isWebGL2 } from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+const AGGREGATE_VS = `\
+#define SHADER_NAME data-filter-vertex-shader
+
+#ifdef FLOAT_TARGET
+  attribute float filterIndices;
+  attribute float filterPrevIndices;
+#else
+  attribute vec2 filterIndices;
+  attribute vec2 filterPrevIndices;
+#endif
+
+varying vec4 vColor;
+const float component = 1.0 / 255.0;
+
+void main() {
+  #ifdef FLOAT_TARGET
+    dataFilter_value *= float(filterIndices != filterPrevIndices);
+    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+    vColor = vec4(0.0, 0.0, 0.0, 1.0);
+  #else
+    // Float texture is not supported: pack result into 4 channels x 256 px x 64px
+    dataFilter_value *= float(filterIndices.x != filterPrevIndices.x);
+    float col = filterIndices.x;
+    float row = filterIndices.y * 4.0;
+    float channel = floor(row);
+    row = fract(row);
+    vColor = component * vec4(bvec4(channel == 0.0, channel == 1.0, channel == 2.0, channel == 3.0));
+    gl_Position = vec4(col * 2.0 - 1.0, row * 2.0 - 1.0, 0.0, 1.0);
+  #endif
+  gl_PointSize = 1.0;
+}
+`;
+const AGGREGATE_FS = `\
+#define SHADER_NAME data-filter-fragment-shader
+precision highp float;
+
+varying vec4 vColor;
+
+void main() {
+  if (dataFilter_value < 0.5) {
+    discard;
+  }
+  gl_FragColor = vColor;
+}
+`;
+export function supportsFloatTarget(gl) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#Support_for_float_textures_doesnt_mean_you_can_render_into_them!
+    return (gl.getExtension('EXT_float_blend') &&
+        // WebGL 2
+        (gl.getExtension('EXT_color_buffer_float') ||
+            // WebGL 1
+            gl.getExtension('WEBGL_color_buffer_float')));
+}
+// A 1x1 framebuffer object that encodes the total count of filtered items
+export function getFramebuffer(gl, useFloatTarget) {
+    if (useFloatTarget) {
+        return new Framebuffer(gl, {
+            width: 1,
+            height: 1,
+            attachments: {
+                [GL.COLOR_ATTACHMENT0]: new Texture2D(gl, {
+                    format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
+                    type: GL.FLOAT,
+                    mipmaps: false
+                })
+            }
+        });
+    }
+    return new Framebuffer(gl, {
+        width: 256,
+        height: 64,
+        depth: false
+    });
+}
+// Increments the counter based on dataFilter_value
+export function getModel(gl, shaderOptions, useFloatTarget) {
+    shaderOptions.defines.NON_INSTANCED_MODEL = 1;
+    if (useFloatTarget) {
+        shaderOptions.defines.FLOAT_TARGET = 1;
+    }
+    return new Model(gl, {
+        id: 'data-filter-aggregation-model',
+        vertexCount: 1,
+        isInstanced: false,
+        drawMode: GL.POINTS,
+        vs: AGGREGATE_VS,
+        fs: AGGREGATE_FS,
+        ...shaderOptions
+    });
+}
+export const parameters = {
+    blend: true,
+    blendFunc: [GL.ONE, GL.ONE, GL.ONE, GL.ONE],
+    blendEquation: [GL.FUNC_ADD, GL.FUNC_ADD],
+    depthTest: false
+};

package/typed/data-filter/data-filter.js

@@ -0,0 +1,159 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { LayerExtension } from '@deck.gl/core';
+import { shaderModule, shaderModule64 } from './shader-module';
+import * as aggregator from './aggregator';
+import { readPixelsToArray, clear } from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+const defaultProps = {
+    getFilterValue: { type: 'accessor', value: 0 },
+    onFilteredItemsChange: { type: 'function', value: null, compare: false },
+    filterEnabled: true,
+    filterRange: [-1, 1],
+    filterSoftRange: null,
+    filterTransformSize: true,
+    filterTransformColor: true
+};
+const DATA_TYPE_FROM_SIZE = {
+    1: 'float',
+    2: 'vec2',
+    3: 'vec3',
+    4: 'vec4'
+};
+export default class DataFilterExtension extends LayerExtension {
+    constructor({ filterSize = 1, fp64 = false, countItems = false } = {}) {
+        if (!DATA_TYPE_FROM_SIZE[filterSize]) {
+            throw new Error('filterSize out of range');
+        }
+        super({ filterSize, fp64, countItems });
+    }
+    getShaders(extension) {
+        const { filterSize, fp64 } = extension.opts;
+        return {
+            modules: [fp64 ? shaderModule64 : shaderModule],
+            defines: {
+                DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
+                DATAFILTER_DOUBLE: Boolean(fp64)
+            }
+        };
+    }
+    initializeState(context, extension) {
+        const attributeManager = this.getAttributeManager();
+        if (attributeManager) {
+            attributeManager.add({
+                filterValues: {
+                    size: extension.opts.filterSize,
+                    type: extension.opts.fp64 ? GL.DOUBLE : GL.FLOAT,
+                    accessor: 'getFilterValue',
+                    shaderAttributes: {
+                        filterValues: {
+                            divisor: 0
+                        },
+                        instanceFilterValues: {
+                            divisor: 1
+                        }
+                    }
+                }
+            });
+        }
+        const { gl } = this.context;
+        if (attributeManager && extension.opts.countItems) {
+            const useFloatTarget = aggregator.supportsFloatTarget(gl);
+            // This attribute is needed for variable-width data, e.g. Path, SolidPolygon, Text
+            // The vertex shader checks if a vertex has the same "index" as the previous vertex
+            // so that we only write one count cross multiple vertices of the same object
+            attributeManager.add({
+                filterIndices: {
+                    size: useFloatTarget ? 1 : 2,
+                    vertexOffset: 1,
+                    type: GL.UNSIGNED_BYTE,
+                    normalized: true,
+                    accessor: (object, { index }) => {
+                        const i = object && object.__source ? object.__source.index : index;
+                        return useFloatTarget ? (i + 1) % 255 : [(i + 1) % 255, Math.floor(i / 255) % 255];
+                    },
+                    shaderAttributes: {
+                        filterPrevIndices: {
+                            vertexOffset: 0
+                        },
+                        filterIndices: {
+                            vertexOffset: 1
+                        }
+                    }
+                }
+            });
+            const filterFBO = aggregator.getFramebuffer(gl, useFloatTarget);
+            const filterModel = aggregator.getModel(gl, extension.getShaders(extension), useFloatTarget);
+            this.setState({ filterFBO, filterModel });
+        }
+    }
+    updateState({ props, oldProps }) {
+        if (this.state.filterModel) {
+            const attributeManager = this.getAttributeManager();
+            const filterNeedsUpdate = attributeManager.attributes.filterValues.needsUpdate() ||
+                props.filterEnabled !== oldProps.filterEnabled ||
+                props.filterRange !== oldProps.filterRange ||
+                props.filterSoftRange !== oldProps.filterSoftRange;
+            if (filterNeedsUpdate) {
+                this.setState({ filterNeedsUpdate });
+            }
+        }
+    }
+    draw(params, extension) {
+        const { filterFBO, filterModel, filterNeedsUpdate } = this.state;
+        const { onFilteredItemsChange } = this.props;
+        if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
+            const { attributes: { filterValues, filterIndices } } = this.getAttributeManager();
+            filterModel.setVertexCount(this.getNumInstances());
+            const { gl } = this.context;
+            clear(gl, { framebuffer: filterFBO, color: [0, 0, 0, 0] });
+            filterModel
+                .updateModuleSettings(params.moduleParameters)
+                .setAttributes({
+                ...filterValues.getShaderAttributes(),
+                ...(filterIndices && filterIndices.getShaderAttributes())
+            })
+                .draw({
+                framebuffer: filterFBO,
+                parameters: {
+                    ...aggregator.parameters,
+                    viewport: [0, 0, filterFBO.width, filterFBO.height]
+                }
+            });
+            const color = readPixelsToArray(filterFBO);
+            let count = 0;
+            for (let i = 0; i < color.length; i++) {
+                count += color[i];
+            }
+            onFilteredItemsChange({ id: this.id, count });
+            this.state.filterNeedsUpdate = false;
+        }
+    }
+    finalizeState() {
+        const { filterFBO, filterModel } = this.state;
+        if (filterFBO) {
+            filterFBO.color.delete();
+            filterFBO.delete();
+            filterModel.delete();
+        }
+    }
+}
+DataFilterExtension.extensionName = 'DataFilterExtension';
+DataFilterExtension.defaultProps = defaultProps;

package/typed/data-filter/shader-module.js

@@ -0,0 +1,152 @@
+/*
+ * data filter shader module
+ */
+const vs = `
+uniform DATAFILTER_TYPE filter_min;
+uniform DATAFILTER_TYPE filter_softMin;
+uniform DATAFILTER_TYPE filter_softMax;
+uniform DATAFILTER_TYPE filter_max;
+uniform bool filter_useSoftMargin;
+uniform bool filter_enabled;
+uniform bool filter_transformSize;
+
+#ifdef NON_INSTANCED_MODEL
+  #define DATAFILTER_ATTRIB filterValues
+  #define DATAFILTER_ATTRIB_64LOW filterValues64Low
+#else
+  #define DATAFILTER_ATTRIB instanceFilterValues
+  #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
+#endif
+
+attribute DATAFILTER_TYPE DATAFILTER_ATTRIB;
+#ifdef DATAFILTER_DOUBLE
+  attribute DATAFILTER_TYPE DATAFILTER_ATTRIB_64LOW;
+
+  uniform DATAFILTER_TYPE filter_min64High;
+  uniform DATAFILTER_TYPE filter_max64High;
+#endif
+
+varying float dataFilter_value;
+
+float dataFilter_reduceValue(float value) {
+  return value;
+}
+float dataFilter_reduceValue(vec2 value) {
+  return min(value.x, value.y);
+}
+float dataFilter_reduceValue(vec3 value) {
+  return min(min(value.x, value.y), value.z);
+}
+float dataFilter_reduceValue(vec4 value) {
+  return min(min(value.x, value.y), min(value.z, value.w));
+}
+void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {
+  if (filter_enabled) {
+    if (filter_useSoftMargin) {
+      dataFilter_value = dataFilter_reduceValue(
+        smoothstep(filter_min, filter_softMin, valueFromMin) *
+        (1.0 - smoothstep(filter_softMax, filter_max, valueFromMax))
+      );
+    } else {
+      dataFilter_value = dataFilter_reduceValue(
+        step(filter_min, valueFromMin) * step(valueFromMax, filter_max)
+      );
+    }
+  } else {
+    dataFilter_value = 1.0;
+  }
+}
+`;
+const fs = `
+uniform bool filter_transformColor;
+varying float dataFilter_value;
+`;
+const getUniforms = opts => {
+    if (!opts || !opts.extensions) {
+        return {};
+    }
+    const { filterRange = [-1, 1], filterEnabled = true, filterTransformSize = true, filterTransformColor = true } = opts;
+    const filterSoftRange = opts.filterSoftRange || filterRange;
+    const uniforms = Number.isFinite(filterRange[0])
+        ? {
+            filter_min: filterRange[0],
+            filter_softMin: filterSoftRange[0],
+            filter_softMax: filterSoftRange[1],
+            filter_max: filterRange[1]
+        }
+        : {
+            filter_min: filterRange.map(r => r[0]),
+            filter_softMin: filterSoftRange.map(r => r[0]),
+            filter_softMax: filterSoftRange.map(r => r[1]),
+            filter_max: filterRange.map(r => r[1])
+        };
+    uniforms.filter_enabled = filterEnabled;
+    uniforms.filter_useSoftMargin = Boolean(opts.filterSoftRange);
+    uniforms.filter_transformSize = filterEnabled && filterTransformSize;
+    uniforms.filter_transformColor = filterEnabled && filterTransformColor;
+    return uniforms;
+};
+const getUniforms64 = opts => {
+    if (!opts || !opts.extensions) {
+        return {};
+    }
+    const uniforms = getUniforms(opts);
+    if (Number.isFinite(uniforms.filter_min)) {
+        const min64High = Math.fround(uniforms.filter_min);
+        uniforms.filter_min -= min64High;
+        uniforms.filter_softMin -= min64High;
+        uniforms.filter_min64High = min64High;
+        const max64High = Math.fround(uniforms.filter_max);
+        uniforms.filter_max -= max64High;
+        uniforms.filter_softMax -= max64High;
+        uniforms.filter_max64High = max64High;
+    }
+    else {
+        const min64High = uniforms.filter_min.map(Math.fround);
+        uniforms.filter_min = uniforms.filter_min.map((x, i) => x - min64High[i]);
+        uniforms.filter_softMin = uniforms.filter_softMin.map((x, i) => x - min64High[i]);
+        uniforms.filter_min64High = min64High;
+        const max64High = uniforms.filter_max.map(Math.fround);
+        uniforms.filter_max = uniforms.filter_max.map((x, i) => x - max64High[i]);
+        uniforms.filter_softMax = uniforms.filter_softMax.map((x, i) => x - max64High[i]);
+        uniforms.filter_max64High = max64High;
+    }
+    return uniforms;
+};
+const inject = {
+    'vs:#main-start': `
+    #ifdef DATAFILTER_DOUBLE
+      dataFilter_setValue(
+        DATAFILTER_ATTRIB - filter_min64High + DATAFILTER_ATTRIB_64LOW,
+        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW
+      );
+    #else
+      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB);
+    #endif
+  `,
+    'vs:DECKGL_FILTER_SIZE': `
+    if (filter_transformSize) {
+      size = size * dataFilter_value;
+    }
+  `,
+    'fs:DECKGL_FILTER_COLOR': `
+    if (dataFilter_value == 0.0) discard;
+    if (filter_transformColor) {
+      color.a *= dataFilter_value;
+    }
+  `
+};
+export const shaderModule = {
+    name: 'data-filter',
+    vs,
+    fs,
+    inject,
+    getUniforms
+};
+export const shaderModule64 = {
+    name: 'data-filter-fp64',
+    vs,
+    fs,
+    inject,
+    getUniforms: getUniforms64
+};

package/typed/fill-style/fill-style-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fill-style-extension.d.ts","sourceRoot":"","sources":["../../src/fill-style/fill-style-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAM7C,OAAO,KAAK,EACV,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAmBvB,oBAAY,uBAAuB,CAAC,KAAK,GAAG,GAAG,IAAI;IACjD;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,wFAAwF;IACxF,kBAAkB,CAAC,EACf,MAAM,GACN,MAAM,CACJ,MAAM,EACN;QACE,gDAAgD;QAChD,CAAC,EAAE,MAAM,CAAC;QACV,+CAA+C;QAC/C,CAAC,EAAE,MAAM,CAAC;QACV,2BAA2B;QAC3B,KAAK,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB,CACF,CAAC;IACN;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,mBAAmB,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,aAAK,yBAAyB,GAAG;IAC/B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,gHAAgH;AAChH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,cAAc,CAAC,yBAAyB,CAAC;IACvF,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAgB;IACnC,MAAM,CAAC,aAAa,SAAwB;gBAEhC,EAAC,OAAe,EAAC,GAAE,OAAO,CAAC,yBAAyB,CAAM;IAItE,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,uBAAuB,CAAC,GAAG,OAAO;IAIzD,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG;IAUtE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI;IA0D5F,WAAW,CACT,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EACpC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,EACnE,SAAS,EAAE,IAAI;IAWjB,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI;IAWvE,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC;IAMlD,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAE,MAAM;CAKnE"}
+{"version":3,"file":"fill-style-extension.d.ts","sourceRoot":"","sources":["../../src/fill-style/fill-style-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAM7C,OAAO,KAAK,EACV,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAmBvB,oBAAY,uBAAuB,CAAC,KAAK,GAAG,GAAG,IAAI;IACjD;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,wFAAwF;IACxF,kBAAkB,CAAC,EACf,MAAM,GACN,MAAM,CACJ,MAAM,EACN;QACE,gDAAgD;QAChD,CAAC,EAAE,MAAM,CAAC;QACV,+CAA+C;QAC/C,CAAC,EAAE,MAAM,CAAC;QACV,2BAA2B;QAC3B,KAAK,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB,CACF,CAAC;IACN;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,mBAAmB,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,aAAK,yBAAyB,GAAG;IAC/B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,gHAAgH;AAChH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,cAAc,CAAC,yBAAyB,CAAC;IACvF,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAgB;IACnC,MAAM,CAAC,aAAa,SAAwB;gBAEhC,EAAC,OAAe,EAAC,GAAE,OAAO,CAAC,yBAAyB,CAAM;IAItE,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,uBAAuB,CAAC,GAAG,OAAO;IAIzD,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG;IAUtE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI;IA0D5F,WAAW,CACT,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EACpC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,EACnE,SAAS,EAAE,IAAI;IAWjB,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI;IAWvE,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC;IAKlD,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAE,MAAM;CAKnE"}

package/typed/fill-style/fill-style.js

@@ -0,0 +1,152 @@
+import { LayerExtension } from '@deck.gl/core';
+import { Texture2D } from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+import { patternShaders } from './shaders.glsl';
+const defaultProps = {
+    fillPatternEnabled: true,
+    fillPatternAtlas: null,
+    fillPatternMapping: null,
+    fillPatternMask: true,
+    getFillPattern: { type: 'accessor', value: d => d.pattern },
+    getFillPatternScale: { type: 'accessor', value: 1 },
+    getFillPatternOffset: { type: 'accessor', value: [0, 0] }
+};
+const DEFAULT_TEXTURE_PARAMETERS = {
+    [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
+    // GL.LINEAR is the default value but explicitly set it here
+    [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
+    // for texture boundary artifact
+    [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+    [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
+};
+export default class FillStyleExtension extends LayerExtension {
+    constructor({ pattern = false } = {}) {
+        super({ pattern });
+    }
+    isEnabled(layer) {
+        return layer.getAttributeManager() && !layer.state.pathTesselator;
+    }
+    getShaders(extension) {
+        if (!extension.isEnabled(this)) {
+            return null;
+        }
+        return {
+            modules: [extension.opts.pattern && patternShaders].filter(Boolean)
+        };
+    }
+    initializeState(context, extension) {
+        if (!extension.isEnabled(this)) {
+            return;
+        }
+        const attributeManager = this.getAttributeManager();
+        if (extension.opts.pattern) {
+            attributeManager.add({
+                fillPatternFrames: {
+                    size: 4,
+                    accessor: 'getFillPattern',
+                    transform: extension.getPatternFrame.bind(this),
+                    shaderAttributes: {
+                        fillPatternFrames: {
+                            divisor: 0
+                        },
+                        instanceFillPatternFrames: {
+                            divisor: 1
+                        }
+                    }
+                },
+                fillPatternScales: {
+                    size: 1,
+                    accessor: 'getFillPatternScale',
+                    defaultValue: 1,
+                    shaderAttributes: {
+                        fillPatternScales: {
+                            divisor: 0
+                        },
+                        instanceFillPatternScales: {
+                            divisor: 1
+                        }
+                    }
+                },
+                fillPatternOffsets: {
+                    size: 2,
+                    accessor: 'getFillPatternOffset',
+                    shaderAttributes: {
+                        fillPatternOffsets: {
+                            divisor: 0
+                        },
+                        instanceFillPatternOffsets: {
+                            divisor: 1
+                        }
+                    }
+                }
+            });
+        }
+        this.setState({
+            emptyTexture: new Texture2D(this.context.gl, {
+                data: new Uint8Array(4),
+                width: 1,
+                height: 1
+            })
+        });
+    }
+    updateState({ props, oldProps }, extension) {
+        if (!extension.isEnabled(this)) {
+            return;
+        }
+        if (props.fillPatternAtlas && props.fillPatternAtlas !== oldProps.fillPatternAtlas) {
+            extension.loadPatternAtlas.call(this, props);
+        }
+        if (props.fillPatternMapping && props.fillPatternMapping !== oldProps.fillPatternMapping) {
+            extension.loadPatternMapping.call(this, props);
+        }
+    }
+    draw(params, extension) {
+        if (!extension.isEnabled(this)) {
+            return;
+        }
+        const { patternTexture } = this.state;
+        this.setModuleParameters({
+            fillPatternTexture: patternTexture || this.state.emptyTexture
+        });
+    }
+    finalizeState() {
+        const { patternTexture, emptyTexture } = this.state;
+        patternTexture?.delete();
+        emptyTexture?.delete();
+    }
+    async loadPatternAtlas({ fillPatternAtlas, fetch }) {
+        this.state.patternTexture?.delete();
+        this.setState({ patternTexture: null });
+        let image = fillPatternAtlas;
+        if (typeof image === 'string') {
+            image = await fetch(image, { propName: 'fillPatternAtlas', layer: this });
+        }
+        const patternTexture = image instanceof Texture2D
+            ? image
+            : new Texture2D(this.context.gl, {
+                data: image,
+                parameters: DEFAULT_TEXTURE_PARAMETERS
+            });
+        this.setState({ patternTexture });
+    }
+    async loadPatternMapping({ fillPatternMapping, fetch }) {
+        this.setState({ patternMapping: null });
+        let patternMapping = fillPatternMapping;
+        if (typeof patternMapping === 'string') {
+            patternMapping = await fetch(patternMapping, {
+                propName: 'fillPatternMapping',
+                layer: this
+            });
+        }
+        this.setState({ patternMapping });
+        this.getAttributeManager().invalidate('getFillPattern');
+        this.setNeedsUpdate();
+    }
+    getPatternFrame(name) {
+        const { patternMapping } = this.state;
+        const def = patternMapping && patternMapping[name];
+        return def ? [def.x, def.y, def.width, def.height] : [0, 0, 0, 0];
+    }
+}
+FillStyleExtension.extensionName = 'FillStyleExtension';
+FillStyleExtension.defaultProps = defaultProps;

package/typed/fill-style/shaders.glsl.js

@@ -0,0 +1,95 @@
+import { project, COORDINATE_SYSTEM } from '@deck.gl/core';
+/*
+ * fill pattern shader module
+ */
+const patternVs = `
+#ifdef NON_INSTANCED_MODEL
+  #define FILL_PATTERN_FRAME_ATTRIB fillPatternFrames
+  #define FILL_PATTERN_SCALE_ATTRIB fillPatternScales
+  #define FILL_PATTERN_OFFSET_ATTRIB fillPatternOffsets
+#else
+  #define FILL_PATTERN_FRAME_ATTRIB instanceFillPatternFrames
+  #define FILL_PATTERN_SCALE_ATTRIB instanceFillPatternScales
+  #define FILL_PATTERN_OFFSET_ATTRIB instanceFillPatternOffsets
+#endif
+
+attribute vec4 FILL_PATTERN_FRAME_ATTRIB;
+attribute float FILL_PATTERN_SCALE_ATTRIB;
+attribute vec2 FILL_PATTERN_OFFSET_ATTRIB;
+
+uniform bool fill_patternEnabled;
+uniform vec2 fill_patternTextureSize;
+
+varying vec2 fill_uv;
+varying vec4 fill_patternBounds;
+varying vec3 fill_patternPlacement;
+`;
+const patternFs = `
+uniform bool fill_patternEnabled;
+uniform bool fill_patternMask;
+uniform sampler2D fill_patternTexture;
+uniform vec2 fill_uvCoordinateOrigin;
+
+varying vec4 fill_patternBounds;
+varying vec3 fill_patternPlacement;
+varying vec2 fill_uv;
+
+const float FILL_UV_SCALE = 512.0 / 40000000.0;
+`;
+const inject = {
+    'vs:DECKGL_FILTER_GL_POSITION': `
+    fill_uv = geometry.position.xy;
+  `,
+    'vs:DECKGL_FILTER_COLOR': `
+    if (fill_patternEnabled) {
+      fill_patternBounds = FILL_PATTERN_FRAME_ATTRIB / vec4(fill_patternTextureSize, fill_patternTextureSize);
+      fill_patternPlacement.xy = FILL_PATTERN_OFFSET_ATTRIB;
+      fill_patternPlacement.z = FILL_PATTERN_SCALE_ATTRIB * FILL_PATTERN_FRAME_ATTRIB.w;
+    }
+  `,
+    'fs:DECKGL_FILTER_COLOR': `
+    if (fill_patternEnabled) {
+      float scale = FILL_UV_SCALE * fill_patternPlacement.z;
+      vec2 patternUV = mod(mod(fill_uvCoordinateOrigin, scale) + fill_uv, scale) / scale;
+      patternUV = mod(fill_patternPlacement.xy + patternUV, 1.0);
+
+      vec2 texCoords = fill_patternBounds.xy + fill_patternBounds.zw * patternUV;
+
+      vec4 patternColor = texture2D(fill_patternTexture, texCoords);
+      color.a *= patternColor.a;
+      if (!fill_patternMask) {
+        color.rgb = patternColor.rgb;
+      }
+    }
+  `
+};
+function getPatternUniforms(opts = {}, uniforms) {
+    if ('fillPatternTexture' in opts) {
+        const { fillPatternTexture } = opts;
+        return {
+            fill_patternTexture: fillPatternTexture,
+            fill_patternTextureSize: [fillPatternTexture.width, fillPatternTexture.height]
+        };
+    }
+    if (opts.viewport) {
+        const { viewport, fillPatternMask = true, fillPatternEnabled = true } = opts;
+        const { project_uCoordinateOrigin, project_uCoordinateSystem } = uniforms;
+        const coordinateOriginCommon = project_uCoordinateSystem === COORDINATE_SYSTEM.CARTESIAN
+            ? project_uCoordinateOrigin
+            : viewport.projectPosition(project_uCoordinateOrigin);
+        return {
+            fill_uvCoordinateOrigin: coordinateOriginCommon.slice(0, 2),
+            fill_patternMask: fillPatternMask,
+            fill_patternEnabled: fillPatternEnabled
+        };
+    }
+    return {};
+}
+export const patternShaders = {
+    name: 'fill-pattern',
+    vs: patternVs,
+    fs: patternFs,
+    inject,
+    dependencies: [project],
+    getUniforms: getPatternUniforms
+};