@deck.gl/extensions 9.0.0-beta.1 → 9.0.0-beta.11

package/src/data-filter/data-filter-extension.ts

@@ -18,32 +18,39 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {readPixelsToArray, clear, withGLParameters} from '@luma.gl/webgl';
-import {GL} from '@luma.gl/constants';
 import type {Framebuffer} from '@luma.gl/core';
 import type {Model} from '@luma.gl/engine';
 import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
-import {LayerExtension} from '@deck.gl/core';
-import {shaderModule, shaderModule64} from './shader-module';
+import {_deepEqual as deepEqual, LayerExtension, log} from '@deck.gl/core';
+import {Defines, shaderModule, shaderModule64} from './shader-module';
 import * as aggregator from './aggregator';
 
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
+  getFilterCategory: {type: 'accessor', value: 0},
   onFilteredItemsChange: {type: 'function', value: null, optional: true},
 
   filterEnabled: true,
   filterRange: [-1, 1],
   filterSoftRange: null,
+  filterCategories: [0],
   filterTransformSize: true,
   filterTransformColor: true
 };
 
+type FilterCategory = number | string;
+
 export type DataFilterExtensionProps<DataT = any> = {
   /**
    * Accessor to retrieve the value for each object that it will be filtered by.
    * Returns either a number (if `filterSize: 1`) or an array of numbers.
    */
   getFilterValue?: Accessor<DataT, number | number[]>;
+  /**
+   * Accessor to retrieve the category (`number | string`) for each object that it will be filtered by.
+   * Returns either a single category (if `filterSize: 1`) or an array of categories.
+   */
+  getFilterCategory?: Accessor<DataT, FilterCategory | FilterCategory[]>;
   /**
    * Enable/disable the data filter. If the data filter is disabled, all objects are rendered.
    * @default true
@@ -71,6 +78,11 @@ export type DataFilterExtensionProps<DataT = any> = {
    * @default true
    */
   filterTransformColor?: boolean;
+  /**
+   * The categories which define whether an object should be rendered.
+   * @default []
+   */
+  filterCategories: FilterCategory[] | FilterCategory[][];
   /**
    * Only called if the `countItems` option is enabled.
    */
@@ -84,76 +96,110 @@ export type DataFilterExtensionProps<DataT = any> = {
 
 type DataFilterExtensionOptions = {
   /**
-   * The size of the filter (number of columns to filter by). The data filter can show/hide data based on 1-4 numeric properties of each object.
+   * The size of the category filter (number of columns to filter by). The category filter can show/hide data based on 1-4 properties of each object. Set to `0` to disable category filtering.
+   * @default 0
+   */
+  categorySize?: 0 | 1 | 2 | 3 | 4;
+  /**
+   * The size of the filter (number of columns to filter by). The data filter can show/hide data based on 1-4 numeric properties of each object. Set to `0` to disable numeric filtering.
    * @default 1
    */
-  filterSize: number;
+  filterSize?: 0 | 1 | 2 | 3 | 4;
   /**
    * Use 64-bit precision instead of 32-bit.
    * @default false
    */
-  fp64: boolean;
+  fp64?: boolean;
   /**
    * If `true`, reports the number of filtered objects with the `onFilteredItemsChange` callback.
    * @default `false`.
    */
-  countItems: boolean;
+  countItems?: boolean;
+};
+
+const defaultOptions: Required<DataFilterExtensionOptions> = {
+  categorySize: 0,
+  filterSize: 1,
+  fp64: false,
+  countItems: false
 };
 
 const DATA_TYPE_FROM_SIZE = {
-  1: 'float',
-  2: 'vec2',
-  3: 'vec3',
-  4: 'vec4'
+  1: 'float' as const,
+  2: 'vec2' as const,
+  3: 'vec3' as const,
+  4: 'vec4' as const
 };
 
 /** Adds GPU-based data filtering functionalities to layers. It allows the layer to show/hide objects based on user-defined properties. */
-export default class DataFilterExtension extends LayerExtension<DataFilterExtensionOptions> {
+export default class DataFilterExtension extends LayerExtension<
+  Required<DataFilterExtensionOptions>
+> {
   static defaultProps = defaultProps;
   static extensionName = 'DataFilterExtension';
 
-  constructor({
-    filterSize = 1,
-    fp64 = false,
-    countItems = false
-  }: Partial<DataFilterExtensionOptions> = {}) {
-    if (!DATA_TYPE_FROM_SIZE[filterSize]) {
-      throw new Error('filterSize out of range');
-    }
-
-    super({filterSize, fp64, countItems});
+  constructor(opts: DataFilterExtensionOptions = {}) {
+    super({...defaultOptions, ...opts});
   }
 
   getShaders(this: Layer<DataFilterExtensionProps>, extension: this): any {
-    const {filterSize, fp64} = extension.opts;
+    const {categorySize, filterSize, fp64} = extension.opts;
+    const defines: Defines = {};
+    if (categorySize) {
+      defines.DATACATEGORY_TYPE = DATA_TYPE_FROM_SIZE[categorySize];
+      defines.DATACATEGORY_CHANNELS = categorySize;
+    }
+    if (filterSize) {
+      defines.DATAFILTER_TYPE = DATA_TYPE_FROM_SIZE[filterSize];
+      defines.DATAFILTER_DOUBLE = Boolean(fp64);
+    }
 
-    return {
-      modules: [fp64 ? shaderModule64 : shaderModule],
-      defines: {
-        DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
-        DATAFILTER_DOUBLE: Boolean(fp64)
-      }
-    };
+    return {modules: [fp64 ? shaderModule64 : shaderModule], defines};
   }
 
   initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this) {
     const attributeManager = this.getAttributeManager();
+    const {categorySize, filterSize, fp64} = extension.opts;
+
     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
+      if (filterSize) {
+        attributeManager.add({
+          filterValues: {
+            size: filterSize,
+            type: fp64 ? 'float64' : 'float32',
+            accessor: 'getFilterValue',
+            shaderAttributes: {
+              filterValues: {
+                divisor: 0
+              },
+              instanceFilterValues: {
+                divisor: 1
+              }
             }
           }
-        }
-      });
+        });
+      }
+
+      if (categorySize) {
+        attributeManager.add({
+          filterCategoryValues: {
+            size: categorySize,
+            accessor: 'getFilterCategory',
+            transform:
+              categorySize === 1
+                ? d => extension._getCategoryKey.call(this, d, 0)
+                : d => d.map((x, i) => extension._getCategoryKey.call(this, x, i)),
+            shaderAttributes: {
+              filterCategoryValues: {
+                divisor: 0
+              },
+              instanceFilterCategoryValues: {
+                divisor: 1
+              }
+            }
+          }
+        });
+      }
     }
 
     const {device} = this.context;
@@ -166,8 +212,7 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
         filterIndices: {
           size: useFloatTarget ? 1 : 2,
           vertexOffset: 1,
-          type: GL.UNSIGNED_BYTE,
-          normalized: true,
+          type: 'unorm8',
           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];
@@ -195,44 +240,74 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
 
   updateState(
     this: Layer<DataFilterExtensionProps>,
-    {props, oldProps}: UpdateParameters<Layer<DataFilterExtensionProps>>
+    {props, oldProps, changeFlags}: UpdateParameters<Layer<DataFilterExtensionProps>>,
+    extension: this
   ) {
+    const attributeManager = this.getAttributeManager();
+    const {categorySize} = extension.opts;
     if (this.state.filterModel) {
-      const attributeManager = this.getAttributeManager();
       const filterNeedsUpdate =
         // attributeManager must be defined for filterModel to be set
-        attributeManager!.attributes.filterValues.needsUpdate() ||
+        attributeManager!.attributes.filterValues?.needsUpdate() ||
+        attributeManager!.attributes.filterCategoryValues?.needsUpdate() ||
         props.filterEnabled !== oldProps.filterEnabled ||
         props.filterRange !== oldProps.filterRange ||
-        props.filterSoftRange !== oldProps.filterSoftRange;
+        props.filterSoftRange !== oldProps.filterSoftRange ||
+        props.filterCategories !== oldProps.filterCategories;
       if (filterNeedsUpdate) {
         this.setState({filterNeedsUpdate});
       }
     }
+    if (attributeManager?.attributes.filterCategoryValues) {
+      // Update bitmask if accessor or selected categories has changed
+      const categoryBitMaskNeedsUpdate =
+        attributeManager.attributes.filterCategoryValues.needsUpdate() ||
+        !deepEqual(props.filterCategories, oldProps.filterCategories, 2);
+      if (categoryBitMaskNeedsUpdate) {
+        this.setState({categoryBitMaskNeedsUpdate});
+      }
+
+      // Need to recreate category map if categorySize has changed
+      const resetCategories = changeFlags.dataChanged;
+      if (resetCategories) {
+        this.setState({
+          categoryMap: Array(categorySize)
+            .fill(0)
+            .map(() => ({}))
+        });
+        attributeManager.attributes.filterCategoryValues.setNeedsUpdate('categoryMap');
+      }
+    }
   }
 
   draw(this: Layer<DataFilterExtensionProps>, params: any, extension: this) {
     const filterFBO = this.state.filterFBO as Framebuffer;
     const filterModel = this.state.filterModel as Model;
     const filterNeedsUpdate = this.state.filterNeedsUpdate as boolean;
+    const categoryBitMaskNeedsUpdate = this.state.categoryBitMaskNeedsUpdate as boolean;
 
     const {onFilteredItemsChange} = this.props;
+
+    if (categoryBitMaskNeedsUpdate) {
+      extension._updateCategoryBitMask.call(this, params, extension);
+    }
     if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
       const {
-        attributes: {filterValues, filterIndices}
+        attributes: {filterValues, filterCategoryValues, filterIndices}
       } = this.getAttributeManager()!;
       filterModel.setVertexCount(this.getNumInstances());
 
-      clear(this.context.device, {framebuffer: filterFBO, color: [0, 0, 0, 0]});
+      this.context.device.clearWebGL({framebuffer: filterFBO, color: [0, 0, 0, 0]});
 
       filterModel.updateModuleSettings(params.moduleParameters);
       // @ts-expect-error filterValue and filterIndices should always have buffer value
       filterModel.setAttributes({
-        ...filterValues.getValue(),
+        ...filterValues?.getValue(),
+        ...filterCategoryValues?.getValue(),
         ...filterIndices?.getValue()
       });
-      withGLParameters(
-        filterModel.device,
+      filterModel.setUniforms(params.uniforms);
+      filterModel.device.withParametersWebGL(
         {
           framebuffer: filterFBO,
           // ts-ignore 'readonly' cannot be assigned to the mutable type '[GLBlendEquation, GLBlendEquation]'
@@ -243,7 +318,7 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
           filterModel.draw(this.context.renderPass);
         }
       );
-      const color = readPixelsToArray(filterFBO);
+      const color = filterModel.device.readPixelsToArrayWebGL(filterFBO);
       let count = 0;
       for (let i = 0; i < color.length; i++) {
         count += color[i];
@@ -262,4 +337,54 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
     filterFBO?.destroy();
     filterModel?.destroy();
   }
+
+  /**
+   * Updates the bitmask used on the GPU to perform the filter based on the
+   * `filterCategories` prop. The mapping between categories and bit in the bitmask
+   * is performed by `_getCategoryKey()`
+   */
+  _updateCategoryBitMask(
+    this: Layer<DataFilterExtensionProps>,
+    params: any,
+    extension: this
+  ): void {
+    const {categorySize} = extension.opts;
+    const {filterCategories} = this.props;
+    const categoryBitMask = new Uint32Array([0, 0, 0, 0]);
+    const categoryFilters = (
+      categorySize === 1 ? [filterCategories] : filterCategories
+    ) as FilterCategory[][];
+    const maxCategories = categorySize === 1 ? 128 : categorySize === 2 ? 64 : 32;
+    for (let c = 0; c < categoryFilters.length; c++) {
+      const categoryFilter = categoryFilters[c];
+      for (const category of categoryFilter) {
+        const key = extension._getCategoryKey.call(this, category, c);
+        if (key < maxCategories) {
+          const channel = c * (maxCategories / 32) + Math.floor(key / 32);
+          categoryBitMask[channel] += Math.pow(2, key % 32); // 1 << key fails for key > 30
+        } else {
+          log.warn(`Exceeded maximum number of categories (${maxCategories})`)();
+        }
+      }
+    }
+    /* eslint-disable-next-line camelcase */
+    params.uniforms.filter_categoryBitMask = categoryBitMask;
+    this.state.categoryBitMaskNeedsUpdate = false;
+  }
+
+  /**
+   * Returns an index of bit in the bitmask for a given category. If the category has
+   * not yet been assigned a bit, a new one is assigned.
+   */
+  _getCategoryKey(
+    this: Layer<DataFilterExtensionProps>,
+    category: FilterCategory,
+    channel: number
+  ) {
+    const categoryMap = (this.state.categoryMap as Record<FilterCategory, number>[])[channel];
+    if (!(category in categoryMap)) {
+      categoryMap[category] = Object.keys(categoryMap).length;
+    }
+    return categoryMap[category];
+  }
 }

package/src/data-filter/shader-module.ts

@@ -1,32 +1,83 @@
 import type {ShaderModule} from '@luma.gl/shadertools';
 import type {DataFilterExtensionProps} from './data-filter-extension';
+import {glsl} from '../utils/syntax-tags';
 
 /*
  * 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;
+export type Defines = {
+  // Defines passed externally
+  /**
+   * Primitive type of parameter used for category filtering. If undefined, category filtering disabled.
+   */
+  DATACATEGORY_TYPE?: 'float' | 'vec2' | 'vec3' | 'vec4';
+  /**
+   * Number of category filtering channels. Must match dimension of `DATACATEGORY_TYPE`
+   */
+  DATACATEGORY_CHANNELS?: 1 | 2 | 3 | 4;
+
+  /**
+   * Primitive type of parameter used for numeric filtering. If undefined, numeric filtering disabled.
+   */
+  DATAFILTER_TYPE?: 'float' | 'vec2' | 'vec3' | 'vec4';
+
+  /**
+   * Enable 64-bit precision in numeric filter.
+   */
+  DATAFILTER_DOUBLE?: boolean;
+
+  // Defines derived in shader
+  /**
+   * Numeric filter attribute
+   */
+  DATAFILTER_ATTRIB?: 'filterValues' | 'instanceFilterValues';
+  /**
+   * Numeric filter attribute (low bits). Only used when `DATAFILTER_DOUBLE = true`
+   */
+  DATAFILTER_ATTRIB_64LOW?: 'filterValues64Low' | 'instanceFilterValues64Low';
+  /**
+   * Category filter attribute
+   */
+  DATACATEGORY_ATTRIB?: 'filterCategoryValues' | 'instanceFilterCategoryValues';
+};
+
+const vs = glsl`
 uniform bool filter_useSoftMargin;
 uniform bool filter_enabled;
 uniform bool filter_transformSize;
+uniform ivec4 filter_categoryBitMask;
+
+#ifdef DATAFILTER_TYPE
+  uniform DATAFILTER_TYPE filter_min;
+  uniform DATAFILTER_TYPE filter_softMin;
+  uniform DATAFILTER_TYPE filter_softMax;
+  uniform DATAFILTER_TYPE filter_max;
+
+  #ifdef NON_INSTANCED_MODEL
+    #define DATAFILTER_ATTRIB filterValues
+    #define DATAFILTER_ATTRIB_64LOW filterValues64Low
+  #else
+    #define DATAFILTER_ATTRIB instanceFilterValues
+    #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
+  #endif
+
+  in DATAFILTER_TYPE DATAFILTER_ATTRIB;
+  #ifdef DATAFILTER_DOUBLE
+    in DATAFILTER_TYPE DATAFILTER_ATTRIB_64LOW;
 
-#ifdef NON_INSTANCED_MODEL
-  #define DATAFILTER_ATTRIB filterValues
-  #define DATAFILTER_ATTRIB_64LOW filterValues64Low
-#else
-  #define DATAFILTER_ATTRIB instanceFilterValues
-  #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
+    uniform DATAFILTER_TYPE filter_min64High;
+    uniform DATAFILTER_TYPE filter_max64High;
+  #endif
 #endif
 
-in DATAFILTER_TYPE DATAFILTER_ATTRIB;
-#ifdef DATAFILTER_DOUBLE
-  in DATAFILTER_TYPE DATAFILTER_ATTRIB_64LOW;
 
-  uniform DATAFILTER_TYPE filter_min64High;
-  uniform DATAFILTER_TYPE filter_max64High;
+#ifdef DATACATEGORY_TYPE
+  #ifdef NON_INSTANCED_MODEL
+    #define DATACATEGORY_ATTRIB filterCategoryValues
+  #else
+    #define DATACATEGORY_ATTRIB instanceFilterCategoryValues
+  #endif
+  in DATACATEGORY_TYPE DATACATEGORY_ATTRIB;
 #endif
 
 out float dataFilter_value;
@@ -43,25 +94,60 @@ float dataFilter_reduceValue(vec3 value) {
 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) {
+
+#ifdef DATAFILTER_TYPE
+  void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {
     if (filter_useSoftMargin) {
-      dataFilter_value = dataFilter_reduceValue(
-        smoothstep(filter_min, filter_softMin, valueFromMin) *
-        (1.0 - smoothstep(filter_softMax, filter_max, valueFromMax))
+      // smoothstep results are undefined if edge0 ≥ edge1
+      // Fallback to ignore filterSoftRange if it is truncated by filterRange
+      DATAFILTER_TYPE leftInRange = mix(
+        smoothstep(filter_min, filter_softMin, valueFromMin),
+        step(filter_min, valueFromMin),
+        step(filter_softMin, filter_min)
       );
+      DATAFILTER_TYPE rightInRange = mix(
+        1.0 - smoothstep(filter_softMax, filter_max, valueFromMax),
+        step(valueFromMax, filter_max),
+        step(filter_max, filter_softMax)
+      );
+      dataFilter_value = dataFilter_reduceValue(leftInRange * rightInRange);
     } else {
       dataFilter_value = dataFilter_reduceValue(
         step(filter_min, valueFromMin) * step(valueFromMax, filter_max)
       );
     }
-  } else {
-    dataFilter_value = 1.0;
   }
-}
+#endif
+
+#ifdef DATACATEGORY_ATTRIB
+  void dataFilter_setCategoryValue(DATACATEGORY_TYPE category) {
+    #if DATACATEGORY_CHANNELS == 1 // One 128-bit mask
+    int dataFilter_masks = filter_categoryBitMask[int(category / 32.0)];
+    #elif DATACATEGORY_CHANNELS == 2 // Two 64-bit masks
+    ivec2 dataFilter_masks = ivec2(
+      filter_categoryBitMask[int(category.x / 32.0)],
+      filter_categoryBitMask[int(category.y / 32.0) + 2]
+    );
+    #elif DATACATEGORY_CHANNELS == 3 // Three 32-bit masks
+    ivec3 dataFilter_masks = filter_categoryBitMask.xyz;
+    #else // Four 32-bit masks
+    ivec4 dataFilter_masks = filter_categoryBitMask;
+    #endif
+
+    // Shift mask and extract relevant bits
+    DATACATEGORY_TYPE dataFilter_bits = DATACATEGORY_TYPE(dataFilter_masks) / pow(DATACATEGORY_TYPE(2.0), mod(category, 32.0));
+    dataFilter_bits = mod(floor(dataFilter_bits), 2.0);
+
+    #if DATACATEGORY_CHANNELS == 1
+    if(dataFilter_bits == 0.0) dataFilter_value = 0.0;
+    #else
+    if(any(equal(dataFilter_bits, DATACATEGORY_TYPE(0.0)))) dataFilter_value = 0.0;
+    #endif
+  }
+#endif
 `;
 
-const fs = `
+const fs = glsl`
 uniform bool filter_transformColor;
 in float dataFilter_value;
 `;
@@ -134,30 +220,39 @@ function getUniforms64(opts?: DataFilterModuleSettings | {}): Record<string, any
 }
 
 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:#main-start': glsl`
+    dataFilter_value = 1.0;
+    if (filter_enabled) {
+      #ifdef DATAFILTER_ATTRIB
+        #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
+      #endif
+
+      #ifdef DATACATEGORY_ATTRIB
+        dataFilter_setCategoryValue(DATACATEGORY_ATTRIB);
+      #endif
+    }
   `,
 
-  'vs:#main-end': `
+  'vs:#main-end': glsl`
     if (dataFilter_value == 0.0) {
       gl_Position = vec4(0.);
     }
   `,
 
-  'vs:DECKGL_FILTER_SIZE': `
+  'vs:DECKGL_FILTER_SIZE': glsl`
     if (filter_transformSize) {
       size = size * dataFilter_value;
     }
   `,
 
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
     if (dataFilter_value == 0.0) discard;
     if (filter_transformColor) {
       color.a *= dataFilter_value;

package/src/fill-style/fill-style-extension.ts

@@ -1,10 +1,11 @@
 import {LayerExtension} from '@deck.gl/core';
 
-import {patternShaders} from './shaders.glsl';
+import {patternShaders} from './shader-module';
 
 import type {
   Layer,
   LayerContext,
+  DefaultProps,
   Accessor,
   AccessorFunction,
   TextureSource,
@@ -12,15 +13,13 @@ import type {
 } from '@deck.gl/core';
 import type {Texture} from '@luma.gl/core';
 
-const defaultProps = {
+const defaultProps: DefaultProps<FillStyleExtensionProps> = {
   fillPatternEnabled: true,
   fillPatternAtlas: {
     type: 'image',
     value: null,
     async: true,
-    parameters: {
-      minFilter: 'linear'
-    }
+    parameters: {lodMaxClamp: 0}
   },
   fillPatternMapping: {type: 'object', value: {}, async: true},
   fillPatternMask: true,

package/src/fill-style/{shaders.glsl.ts → shader-module.ts}

@@ -3,11 +3,12 @@ import {project, fp64LowPart} from '@deck.gl/core';
 import type {Viewport, ProjectUniforms} from '@deck.gl/core';
 
 import type {Texture} from '@luma.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
 /*
  * fill pattern shader module
  */
-const patternVs = `
+const patternVs = glsl`
 #ifdef NON_INSTANCED_MODEL
   #define FILL_PATTERN_FRAME_ATTRIB fillPatternFrames
   #define FILL_PATTERN_SCALE_ATTRIB fillPatternScales
@@ -30,7 +31,7 @@ out vec4 fill_patternBounds;
 out vec4 fill_patternPlacement;
 `;
 
-const patternFs = `
+const patternFs = glsl`
 uniform bool fill_patternEnabled;
 uniform bool fill_patternMask;
 uniform sampler2D fill_patternTexture;
@@ -45,11 +46,11 @@ const float FILL_UV_SCALE = 512.0 / 40000000.0;
 `;
 
 const inject = {
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
     fill_uv = geometry.position.xy;
   `,
 
-  'vs:DECKGL_FILTER_COLOR': `
+  'vs:DECKGL_FILTER_COLOR': glsl`
     if (fill_patternEnabled) {
       fill_patternBounds = FILL_PATTERN_FRAME_ATTRIB / vec4(fill_patternTextureSize, fill_patternTextureSize);
       fill_patternPlacement.xy = FILL_PATTERN_OFFSET_ATTRIB;
@@ -57,7 +58,7 @@ const inject = {
     }
   `,
 
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
     if (fill_patternEnabled) {
       vec2 scale = FILL_UV_SCALE * fill_patternPlacement.zw;
       vec2 patternUV = mod(mod(fill_uvCoordinateOrigin, scale) + fill_uvCoordinateOrigin64Low + fill_uv, scale) / scale;