Add maskInverted prop to MaskExtension (visgl#7440)

jeffpeck10x · Nov 22, 2022 · 3ffdc5e · 3ffdc5e
1 parent 1342a96
commit 3ffdc5e
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 10 deletions.
diff --git a/docs/api-reference/extensions/mask-extension.md b/docs/api-reference/extensions/mask-extension.md
@@ -89,6 +89,10 @@ Id of the layer that defines the mask. The mask layer must use the prop `operati
 
 ![maskByInstance](https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/docs/mask-by-instance.png)
 
+##### `maskInverted` (Boolean, optional)
+
+When `maskInverted` is true the result of the masking operation is inverted. Inversion is applied when reading the mask, thus it is possible to use the same mask normally on some layers and inverted on other layers. Defaults to `false`.
+
 ## Limitations
 
 - The current implementation supports up to 4 masks at the same time.

diff --git a/modules/extensions/src/mask/mask.ts b/modules/extensions/src/mask/mask.ts
@@ -5,7 +5,8 @@ import type {Layer} from '@deck.gl/core';
 
 const defaultProps = {
   maskId: '',
-  maskByInstance: undefined
+  maskByInstance: undefined,
+  maskInverted: false
 };
 
 export type MaskExtensionProps = {
@@ -19,6 +20,10 @@ export type MaskExtensionProps = {
    * If not specified, it is automatically deduced from the layer.
    */
   maskByInstance?: boolean;
+  /**
+   * Inverts the masking operation
+   */
+  maskInverted?: boolean;
 };
 
 /** Allows layers to show/hide objects by a geofence. */
@@ -43,14 +48,15 @@ export default class MaskExtension extends LayerExtension {
   /* eslint-disable camelcase */
   draw(this: Layer<MaskExtensionProps>, {uniforms, context, moduleParameters}: any) {
     uniforms.mask_maskByInstance = this.state.maskByInstance;
-    const {maskId = ''} = this.props;
+    const {maskId = '', maskInverted = false} = this.props;
     const {maskChannels} = moduleParameters;
     const {viewport} = context;
     if (maskChannels && maskChannels[maskId]) {
       const {index, bounds, coordinateOrigin: fromCoordinateOrigin} = maskChannels[maskId];
       let {coordinateSystem: fromCoordinateSystem} = maskChannels[maskId];
       uniforms.mask_enabled = true;
       uniforms.mask_channel = index;
+      uniforms.mask_inverted = maskInverted;
 
       if (fromCoordinateSystem === COORDINATE_SYSTEM.DEFAULT) {
         fromCoordinateSystem = viewport.isGeospatial

diff --git a/modules/extensions/src/mask/shader-module.ts b/modules/extensions/src/mask/shader-module.ts
@@ -14,6 +14,7 @@ const fs = `
 uniform sampler2D mask_texture;
 uniform int mask_channel;
 uniform bool mask_enabled;
+uniform bool mask_inverted;
 bool mask_isInBounds(vec2 texCoords) {
   if (!mask_enabled) {
     return true;
@@ -29,7 +30,12 @@ bool mask_isInBounds(vec2 texCoords) {
   } else if (mask_channel == 3) {
     maskValue = maskColor.a;
   }
-  return maskValue < 0.5;
+
+  if (mask_inverted) {
+    return maskValue >= 0.5;
+  } else {
+    return maskValue < 0.5;
+  }
 }
 `;
 

diff --git a/test/apps/mask/app.js b/test/apps/mask/app.js
@@ -114,6 +114,7 @@ function getLayerData(data) {
 export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
   const {arcs, targets, sources} = useMemo(() => getLayerData(data), [data]);
   const [maskEnabled, setMaskEnabled] = useState(true);
+  const [maskInverted, setMaskInverted] = useState(false);
   const [showLayers, setShowLayers] = useState(true);
   const [selectedCounty, selectCounty] = useState(null);
   const [selectedCounty2, selectCounty2] = useState(null);
@@ -202,15 +203,17 @@ export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
         parameters: {depthTest: false},
         extensions: [new MaskExtension()],
         maskId: maskEnabled && 'mask2',
-        maskByInstance: false
+        maskByInstance: false,
+        maskInverted
       }),
       new ScatterplotLayer({
         id: 'sources',
         data: sources,
         radiusScale: 3000,
         getFillColor: d => (d.gain > 0 ? TARGET_COLOR : SOURCE_COLOR),
         extensions: [new MaskExtension()],
-        maskId: maskEnabled && 'mask2'
+        maskId: maskEnabled && 'mask2',
+        maskInverted
       }),
       new ScatterplotLayer({
         id: 'targets',
@@ -224,7 +227,8 @@ export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
         radiusScale: 3000,
         getFillColor: d => (d.net > 0 ? TARGET_COLOR : SOURCE_COLOR),
         extensions: [new MaskExtension()],
-        maskId: maskEnabled && 'mask2'
+        maskId: maskEnabled && 'mask2',
+        maskInverted
       }),
       new ArcLayer({
         id: 'arc',
@@ -259,6 +263,14 @@ export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
           />
           Use mask
         </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={maskInverted}
+            onChange={() => setMaskInverted(!maskInverted)}
+          />
+          Invert mask
+        </label>
         <label>
           <input type="checkbox" checked={showLayers} onChange={() => setShowLayers(!showLayers)} />
           Show layers

diff --git a/test/modules/extensions/mask.spec.js b/test/modules/extensions/mask.spec.js
@@ -28,10 +28,20 @@ test('MaskExtension', t => {
       onAfterUpdate: ({layer}) => {
         const uniforms = layer.getModels()[0].getUniforms();
         t.ok(uniforms.mask_enabled, 'mask_enabled in uniforms');
+        t.equal(uniforms.mask_inverted, false, 'mask_inverted defaults to false in uniforms');
         t.ok(uniforms.mask_maskByInstance, 'mask_maskByInstance in uniforms');
         t.ok(uniforms.mask_bounds.every(Number.isFinite), 'mask_bounds in uniforms');
       }
     },
+    {
+      updateProps: {
+        maskInverted: true
+      },
+      onAfterUpdate: ({layer}) => {
+        const uniforms = layer.getModels()[0].getUniforms();
+        t.ok(uniforms.mask_inverted, 'mask_inverted true in uniforms');
+      }
+    },
     {
       updateProps: {
         maskId: 'mask2'

diff --git a/test/render/golden-images/mask-effect-inverted.png b/test/render/golden-images/mask-effect-inverted.png
diff --git a/test/render/test-cases/effects.js b/test/render/test-cases/effects.js
@@ -73,8 +73,8 @@ export default [
     goldenImage: './test/render/golden-images/shadow-effect.png'
   },
 
-  {
-    name: 'mask-effect',
+  ...[true, false].map(maskInverted => ({
+    name: `mask-effect${maskInverted ? '-inverted' : ''}`,
     viewState: {
       latitude: 37.751537058389985,
       longitude: -122.42694203247012,
@@ -98,6 +98,7 @@ export default [
       new SolidPolygonLayer({
         id: 'polygon-masked',
         maskId: 'mask-layer',
+        maskInverted,
         extensions: [new MaskExtension()],
         data: polygons,
         getPolygon: f => f,
@@ -106,6 +107,7 @@ export default [
       new ScatterplotLayer({
         id: 'points',
         maskId: 'mask-layer',
+        maskInverted,
         extensions: [new MaskExtension()],
         data: points,
         getPosition: d => d.COORDINATES,
@@ -119,8 +121,8 @@ export default [
     imageDiffOptions: {
       threshold: 0.985
     },
-    goldenImage: './test/render/golden-images/mask-effect.png'
-  },
+    goldenImage: `./test/render/golden-images/mask-effect${maskInverted ? '-inverted' : ''}.png`
+  })),
 
   {
     name: 'post-process-effects',