@deck.gl/extensions 9.0.34 → 9.1.0-beta.1

package/src/data-filter/aggregator.ts

@@ -1,6 +1,9 @@
-import {Device, DeviceFeature, Framebuffer} from '@luma.gl/core';
-import {Model} from '@luma.gl/engine';
-import {GL} from '@luma.gl/constants';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Device, DeviceFeature, Framebuffer, RenderPipelineParameters} from '@luma.gl/core';
+import {Model, ModelProps} from '@luma.gl/engine';
 
 const AGGREGATE_VS = `\
 #version 300 es
@@ -71,7 +74,6 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
       colorAttachments: [
         device.createTexture({
           format: 'rgba32float',
-          type: GL.FLOAT,
           mipmaps: false
         })
       ]
@@ -80,12 +82,17 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
   return device.createFramebuffer({
     width: 256,
     height: 64,
-    colorAttachments: [device.createTexture({format: 'rgba8unorm', type: GL.FLOAT, mipmaps: false})]
+    colorAttachments: [device.createTexture({format: 'rgba8unorm', mipmaps: false})]
   });
 }
 
 // Increments the counter based on dataFilter_value
-export function getModel(device: Device, shaderOptions: any, useFloatTarget: boolean): Model {
+export function getModel(
+  device: Device,
+  bufferLayout: ModelProps['bufferLayout'],
+  shaderOptions: any,
+  useFloatTarget: boolean
+): Model {
   shaderOptions.defines.NON_INSTANCED_MODEL = 1;
   if (useFloatTarget) {
     shaderOptions.defines.FLOAT_TARGET = 1;
@@ -95,16 +102,21 @@ export function getModel(device: Device, shaderOptions: any, useFloatTarget: boo
     id: 'data-filter-aggregation-model',
     vertexCount: 1,
     isInstanced: false,
-    drawMode: GL.POINTS,
+    topology: 'point-list',
     vs: AGGREGATE_VS,
     fs: AGGREGATE_FS,
+    bufferLayout,
     ...shaderOptions
   });
 }
 
-export const parameters = {
+export const parameters: RenderPipelineParameters = {
   blend: true,
-  blendFunc: [GL.ONE, GL.ONE, GL.ONE, GL.ONE],
-  blendEquation: [GL.FUNC_ADD, GL.FUNC_ADD],
-  depthTest: false
+  blendColorSrcFactor: 'one',
+  blendColorDstFactor: 'one',
+  blendAlphaSrcFactor: 'one',
+  blendAlphaDstFactor: 'one',
+  blendColorOperation: 'add',
+  blendAlphaOperation: 'add',
+  depthCompare: 'never'
 } as const;

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

@@ -1,29 +1,20 @@
-// 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 type {Framebuffer} from '@luma.gl/core';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Buffer, Framebuffer} from '@luma.gl/core';
 import type {Model} from '@luma.gl/engine';
 import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
 import {_deepEqual as deepEqual, LayerExtension, log} from '@deck.gl/core';
-import {Defines, shaderModule, shaderModule64} from './shader-module';
+import {
+  CategoryBitMask,
+  DataFilterModuleProps,
+  Defines,
+  dataFilter,
+  dataFilter64
+} from './shader-module';
 import * as aggregator from './aggregator';
+import {NumberArray4} from '@math.gl/core';
 
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
@@ -154,7 +145,10 @@ export default class DataFilterExtension extends LayerExtension<
       defines.DATAFILTER_DOUBLE = Boolean(fp64);
     }
 
-    return {modules: [fp64 ? shaderModule64 : shaderModule], defines};
+    const module = fp64 ? dataFilter64 : dataFilter;
+    module.uniformTypes = module.uniformTypesFromOptions(extension.opts);
+
+    return {modules: [module], defines};
   }
 
   initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this) {
@@ -195,7 +189,7 @@ export default class DataFilterExtension extends LayerExtension<
       // 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: {
+        filterVertexIndices: {
           size: useFloatTarget ? 1 : 2,
           vertexOffset: 1,
           type: 'unorm8',
@@ -217,6 +211,7 @@ export default class DataFilterExtension extends LayerExtension<
       const filterFBO = aggregator.getFramebuffer(device, useFloatTarget);
       const filterModel = aggregator.getModel(
         device,
+        attributeManager.getBufferLayouts({isInstanced: false}),
         extension.getShaders.call(this, extension),
         useFloatTarget
       );
@@ -271,40 +266,65 @@ export default class DataFilterExtension extends LayerExtension<
     const filterModel = this.state.filterModel as Model;
     const filterNeedsUpdate = this.state.filterNeedsUpdate as boolean;
 
-    const {onFilteredItemsChange} = this.props;
-
     if (!this.state.categoryBitMask) {
       extension._updateCategoryBitMask.call(this, params, extension);
     }
+
+    const {
+      onFilteredItemsChange,
+      extensions,
+      filterEnabled,
+      filterRange,
+      filterSoftRange,
+      filterTransformSize,
+      filterTransformColor,
+      filterCategories
+    } = this.props;
+    const dataFilterProps: DataFilterModuleProps = {
+      extensions,
+      filterEnabled,
+      filterRange,
+      filterSoftRange,
+      filterTransformSize,
+      filterTransformColor,
+      filterCategories
+    };
+    if (this.state.categoryBitMask) {
+      dataFilterProps.categoryBitMask = this.state.categoryBitMask as CategoryBitMask;
+    }
+    this.setShaderModuleProps({dataFilter: dataFilterProps});
+
     /* eslint-disable-next-line camelcase */
-    params.uniforms.filter_categoryBitMask = this.state.categoryBitMask;
     if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
+      const attributeManager = this.getAttributeManager()!;
       const {
-        attributes: {filterValues, filterCategoryValues, filterIndices}
-      } = this.getAttributeManager()!;
+        attributes: {filterValues, filterCategoryValues, filterVertexIndices}
+      } = attributeManager;
       filterModel.setVertexCount(this.getNumInstances());
 
-      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({
+      // @ts-expect-error filterValue and filterVertexIndices should always have buffer value
+      const attributes: Record<string, Buffer> = {
         ...filterValues?.getValue(),
         ...filterCategoryValues?.getValue(),
-        ...filterIndices?.getValue()
+        ...filterVertexIndices?.getValue()
+      };
+      filterModel.setAttributes(attributes);
+      filterModel.shaderInputs.setProps({
+        dataFilter: dataFilterProps
       });
-      filterModel.setUniforms(params.uniforms);
-      filterModel.device.withParametersWebGL(
-        {
-          framebuffer: filterFBO,
-          // ts-ignore 'readonly' cannot be assigned to the mutable type '[GLBlendEquation, GLBlendEquation]'
-          ...(aggregator.parameters as any),
-          viewport: [0, 0, filterFBO.width, filterFBO.height]
-        },
-        () => {
-          filterModel.draw(this.context.renderPass);
-        }
-      );
+
+      const viewport = [0, 0, filterFBO.width, filterFBO.height] as NumberArray4;
+
+      const renderPass = filterModel.device.beginRenderPass({
+        id: 'data-filter-aggregation',
+        framebuffer: filterFBO,
+        parameters: {viewport},
+        clearColor: [0, 0, 0, 0]
+      });
+      filterModel.setParameters(aggregator.parameters);
+      filterModel.draw(renderPass);
+      renderPass.end();
+
       const color = filterModel.device.readPixelsToArrayWebGL(filterFBO);
       let count = 0;
       for (let i = 0; i < color.length; i++) {
@@ -338,7 +358,7 @@ export default class DataFilterExtension extends LayerExtension<
     const {categorySize} = extension.opts;
     if (!categorySize) return;
     const {filterCategories} = this.props;
-    const categoryBitMask = new Uint32Array([0, 0, 0, 0]);
+    const categoryBitMask: CategoryBitMask = new Uint32Array([0, 0, 0, 0]);
     const categoryFilters = (
       categorySize === 1 ? [filterCategories] : filterCategories
     ) as FilterCategory[][];

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

@@ -1,6 +1,10 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import type {ShaderModule} from '@luma.gl/shadertools';
-import type {DataFilterExtensionProps} from './data-filter-extension';
-import {glsl} from '../utils/syntax-tags';
+import type {DataFilterExtensionOptions, DataFilterExtensionProps} from './data-filter-extension';
+import {UniformFormat} from '@luma.gl/shadertools/dist/types';
 
 /*
  * data filter shader module
@@ -27,27 +31,35 @@ export type Defines = {
   DATAFILTER_DOUBLE?: boolean;
 };
 
-const vs = glsl`
-uniform bool filter_useSoftMargin;
-uniform bool filter_enabled;
-uniform bool filter_transformSize;
-uniform ivec4 filter_categoryBitMask;
-
+const uniformBlock = /* glsl */ `\
+uniform dataFilterUniforms {
+  bool useSoftMargin;
+  bool enabled;
+  bool transformSize;
+  bool transformColor;
 #ifdef DATAFILTER_TYPE
-  uniform DATAFILTER_TYPE filter_min;
-  uniform DATAFILTER_TYPE filter_softMin;
-  uniform DATAFILTER_TYPE filter_softMax;
-  uniform DATAFILTER_TYPE filter_max;
+  DATAFILTER_TYPE min;
+  DATAFILTER_TYPE softMin;
+  DATAFILTER_TYPE softMax;
+  DATAFILTER_TYPE max;
+#ifdef DATAFILTER_DOUBLE
+  DATAFILTER_TYPE min64High;
+  DATAFILTER_TYPE max64High;
+#endif
+#endif
+#ifdef DATACATEGORY_TYPE
+  highp ivec4 categoryBitMask;
+#endif
+} dataFilter;
+`;
 
+const vertex = /* glsl */ `
+#ifdef DATAFILTER_TYPE
   in DATAFILTER_TYPE filterValues;
-  #ifdef DATAFILTER_DOUBLE
-    in DATAFILTER_TYPE filterValues64Low;
-
-    uniform DATAFILTER_TYPE filter_min64High;
-    uniform DATAFILTER_TYPE filter_max64High;
-  #endif
+#ifdef DATAFILTER_DOUBLE
+  in DATAFILTER_TYPE filterValues64Low;
+#endif
 #endif
-
 
 #ifdef DATACATEGORY_TYPE
   in DATACATEGORY_TYPE filterCategoryValues;
@@ -70,23 +82,23 @@ float dataFilter_reduceValue(vec4 value) {
 
 #ifdef DATAFILTER_TYPE
   void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {
-    if (filter_useSoftMargin) {
+    if (dataFilter.useSoftMargin) {
       // 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)
+        smoothstep(dataFilter.min, dataFilter.softMin, valueFromMin),
+        step(dataFilter.min, valueFromMin),
+        step(dataFilter.softMin, dataFilter.min)
       );
       DATAFILTER_TYPE rightInRange = mix(
-        1.0 - smoothstep(filter_softMax, filter_max, valueFromMax),
-        step(valueFromMax, filter_max),
-        step(filter_max, filter_softMax)
+        1.0 - smoothstep(dataFilter.softMax, dataFilter.max, valueFromMax),
+        step(valueFromMax, dataFilter.max),
+        step(dataFilter.max, dataFilter.softMax)
       );
       dataFilter_value = dataFilter_reduceValue(leftInRange * rightInRange);
     } else {
       dataFilter_value = dataFilter_reduceValue(
-        step(filter_min, valueFromMin) * step(valueFromMax, filter_max)
+        step(dataFilter.min, valueFromMin) * step(valueFromMax, dataFilter.max)
       );
     }
   }
@@ -95,16 +107,16 @@ float dataFilter_reduceValue(vec4 value) {
 #ifdef DATACATEGORY_TYPE
   void dataFilter_setCategoryValue(DATACATEGORY_TYPE category) {
     #if DATACATEGORY_CHANNELS == 1 // One 128-bit mask
-    int dataFilter_masks = filter_categoryBitMask[int(category / 32.0)];
+    int dataFilter_masks = dataFilter.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]
+      dataFilter.categoryBitMask[int(category.x / 32.0)],
+      dataFilter.categoryBitMask[int(category.y / 32.0) + 2]
     );
     #elif DATACATEGORY_CHANNELS == 3 // Three 32-bit masks
-    ivec3 dataFilter_masks = filter_categoryBitMask.xyz;
+    ivec3 dataFilter_masks = dataFilter.categoryBitMask.xyz;
     #else // Four 32-bit masks
-    ivec4 dataFilter_masks = filter_categoryBitMask;
+    ivec4 dataFilter_masks = dataFilter.categoryBitMask;
     #endif
 
     // Shift mask and extract relevant bits
@@ -120,17 +132,28 @@ float dataFilter_reduceValue(vec4 value) {
 #endif
 `;
 
-const fs = glsl`
-uniform bool filter_transformColor;
+const vs = `
+${uniformBlock}
+${vertex}
+`;
+
+const fragment = /* glsl */ `
 in float dataFilter_value;
 `;
 
-type DataFilterModuleSettings = {
+const fs = `
+${uniformBlock}
+${fragment}
+`;
+
+export type CategoryBitMask = Uint32Array;
+export type DataFilterModuleProps = {
   extensions: any[]; // used to detect if layer props are present
+  categoryBitMask?: CategoryBitMask;
 } & DataFilterExtensionProps;
 
 /* eslint-disable camelcase */
-function getUniforms(opts?: DataFilterModuleSettings | {}): Record<string, any> {
+function getUniforms(opts?: DataFilterModuleProps | {}): Record<string, any> {
   if (!opts || !('extensions' in opts)) {
     return {};
   }
@@ -138,69 +161,71 @@ function getUniforms(opts?: DataFilterModuleSettings | {}): Record<string, any>
     filterRange = [-1, 1],
     filterEnabled = true,
     filterTransformSize = true,
-    filterTransformColor = true
+    filterTransformColor = true,
+    categoryBitMask = [0, 0, 0, 0]
   } = opts;
   const filterSoftRange = opts.filterSoftRange || filterRange;
 
   return {
     ...(Number.isFinite(filterRange[0])
       ? {
-          filter_min: filterRange[0],
-          filter_softMin: filterSoftRange[0],
-          filter_softMax: filterSoftRange[1],
-          filter_max: filterRange[1]
+          min: filterRange[0],
+          softMin: filterSoftRange[0],
+          softMax: filterSoftRange[1],
+          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])
+          min: filterRange.map(r => r[0]),
+          softMin: filterSoftRange.map(r => r[0]),
+          softMax: filterSoftRange.map(r => r[1]),
+          max: filterRange.map(r => r[1])
         }),
-    filter_enabled: filterEnabled,
-    filter_useSoftMargin: Boolean(opts.filterSoftRange),
-    filter_transformSize: filterEnabled && filterTransformSize,
-    filter_transformColor: filterEnabled && filterTransformColor
+    enabled: filterEnabled,
+    useSoftMargin: Boolean(opts.filterSoftRange),
+    transformSize: filterEnabled && filterTransformSize,
+    transformColor: filterEnabled && filterTransformColor,
+    categoryBitMask
   };
 }
 
-function getUniforms64(opts?: DataFilterModuleSettings | {}): Record<string, any> {
+function getUniforms64(opts?: DataFilterModuleProps | {}): Record<string, any> {
   if (!opts || !('extensions' in opts)) {
     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;
+  if (Number.isFinite(uniforms.min)) {
+    const min64High = Math.fround(uniforms.min);
+    uniforms.min -= min64High;
+    uniforms.softMin -= min64High;
+    uniforms.min64High = min64High;
+
+    const max64High = Math.fround(uniforms.max);
+    uniforms.max -= max64High;
+    uniforms.softMax -= max64High;
+    uniforms.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;
+    const min64High = uniforms.min.map(Math.fround);
+    uniforms.min = uniforms.min.map((x, i) => x - min64High[i]);
+    uniforms.softMin = uniforms.softMin.map((x, i) => x - min64High[i]);
+    uniforms.min64High = min64High;
+
+    const max64High = uniforms.max.map(Math.fround);
+    uniforms.max = uniforms.max.map((x, i) => x - max64High[i]);
+    uniforms.softMax = uniforms.softMax.map((x, i) => x - max64High[i]);
+    uniforms.max64High = max64High;
   }
   return uniforms;
 }
 
 const inject = {
-  'vs:#main-start': glsl`
+  'vs:#main-start': /* glsl */ `
     dataFilter_value = 1.0;
-    if (filter_enabled) {
+    if (dataFilter.enabled) {
       #ifdef DATAFILTER_TYPE
         #ifdef DATAFILTER_DOUBLE
           dataFilter_setValue(
-            filterValues - filter_min64High + filterValues64Low,
-            filterValues - filter_max64High + filterValues64Low
+            filterValues - dataFilter.min64High + filterValues64Low,
+            filterValues - dataFilter.max64High + filterValues64Low
           );
         #else
           dataFilter_setValue(filterValues, filterValues);
@@ -213,38 +238,73 @@ const inject = {
     }
   `,
 
-  'vs:#main-end': glsl`
+  'vs:#main-end': /* glsl */ `
     if (dataFilter_value == 0.0) {
       gl_Position = vec4(0.);
     }
   `,
 
-  'vs:DECKGL_FILTER_SIZE': glsl`
-    if (filter_transformSize) {
+  'vs:DECKGL_FILTER_SIZE': /* glsl */ `
+    if (dataFilter.transformSize) {
       size = size * dataFilter_value;
     }
   `,
 
-  'fs:DECKGL_FILTER_COLOR': glsl`
+  'fs:DECKGL_FILTER_COLOR': /* glsl */ `
     if (dataFilter_value == 0.0) discard;
-    if (filter_transformColor) {
+    if (dataFilter.transformColor) {
       color.a *= dataFilter_value;
     }
   `
 };
 
-export const shaderModule: ShaderModule<DataFilterModuleSettings> = {
-  name: 'data-filter',
+type UniformTypesFunc = (opts: DataFilterExtensionOptions) => any;
+function uniformTypesFromOptions(opts: DataFilterExtensionOptions): any {
+  const {categorySize, filterSize, fp64} = opts;
+  const uniformTypes: Record<string, UniformFormat> = {
+    useSoftMargin: 'i32',
+    enabled: 'i32',
+    transformSize: 'i32',
+    transformColor: 'i32'
+  };
+
+  if (filterSize) {
+    const uniformFormat: UniformFormat = filterSize === 1 ? 'f32' : `vec${filterSize}<f32>`;
+    uniformTypes.min = uniformFormat;
+    uniformTypes.softMin = uniformFormat;
+    uniformTypes.softMax = uniformFormat;
+    uniformTypes.max = uniformFormat;
+    if (fp64) {
+      uniformTypes.min64High = uniformFormat;
+      uniformTypes.max64High = uniformFormat;
+    }
+  }
+
+  if (categorySize) {
+    uniformTypes.categoryBitMask = 'vec4<i32>';
+  }
+
+  return uniformTypes;
+}
+
+export const dataFilter: ShaderModule<DataFilterModuleProps> & {
+  uniformTypesFromOptions: UniformTypesFunc;
+} = {
+  name: 'dataFilter',
   vs,
   fs,
   inject,
-  getUniforms
+  getUniforms,
+  uniformTypesFromOptions
 };
 
-export const shaderModule64: ShaderModule<DataFilterModuleSettings> = {
-  name: 'data-filter-fp64',
+export const dataFilter64: ShaderModule<DataFilterModuleProps> & {
+  uniformTypesFromOptions: UniformTypesFunc;
+} = {
+  name: 'dataFilter',
   vs,
   fs,
   inject,
-  getUniforms: getUniforms64
+  getUniforms: getUniforms64,
+  uniformTypesFromOptions
 };

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

@@ -1,6 +1,10 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {LayerExtension} from '@deck.gl/core';
 
-import {patternShaders} from './shader-module';
+import {FillStyleModuleProps, patternShaders} from './shader-module';
 
 import type {
   Layer,
@@ -155,10 +159,14 @@ export default class FillStyleExtension extends LayerExtension<FillStyleExtensio
       return;
     }
 
-    const {fillPatternAtlas} = this.props;
-    this.setModuleParameters({
-      fillPatternTexture: fillPatternAtlas || this.state.emptyTexture
-    });
+    const {fillPatternAtlas, fillPatternEnabled, fillPatternMask} = this.props;
+    const fillProps: FillStyleModuleProps = {
+      project: params.shaderModuleProps.project,
+      fillPatternEnabled,
+      fillPatternMask,
+      fillPatternTexture: (fillPatternAtlas || this.state.emptyTexture) as Texture
+    };
+    this.setShaderModuleProps({fill: fillProps});
   }
 
   finalizeState(this: Layer<FillStyleExtensionProps>) {