@deck.gl/extensions 9.0.0-beta.4 → 9.0.0-beta.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.0-beta.4",
+  "version": "9.0.0-beta.6",
   "publishConfig": {
     "access": "public"
   },
@@ -39,17 +39,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/shadertools": "9.0.0-beta.4"
+    "@luma.gl/shadertools": "9.0.0-beta.6"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-alpha",
-    "@luma.gl/constants": "9.0.0-beta.4",
-    "@luma.gl/core": "9.0.0-beta.4",
-    "@luma.gl/engine": "9.0.0-beta.4",
-    "@luma.gl/shadertools": "9.0.0-beta.4",
-    "@luma.gl/webgl": "9.0.0-beta.4",
+    "@luma.gl/constants": "9.0.0-beta.6",
+    "@luma.gl/core": "9.0.0-beta.6",
+    "@luma.gl/engine": "9.0.0-beta.6",
+    "@luma.gl/shadertools": "9.0.0-beta.6",
+    "@luma.gl/webgl": "9.0.0-beta.6",
     "@math.gl/core": "^4.0.0",
     "@math.gl/web-mercator": "^4.0.0"
   },
-  "gitHead": "7063cbec75a5fbcefc51f33f6e2488134533d34a"
+  "gitHead": "373729308eb3fdec4b7c8b5842ddeff4f2d70338"
 }

package/src/brushing/shader-module.ts

@@ -23,6 +23,7 @@ import {project} from '@deck.gl/core';
 import type {Viewport} from '@deck.gl/core';
 
 import type {BrushingExtensionProps} from './brushing-extension';
+import {glsl} from '../utils/syntax-tags';
 
 type BrushingModuleSettings = {
   // From layer context
@@ -30,7 +31,7 @@ type BrushingModuleSettings = {
   mousePosition?: {x: number; y: number};
 } & BrushingExtensionProps;
 
-const vs = `
+const vs = glsl`
   uniform bool brushing_enabled;
   uniform int brushing_target;
   uniform vec2 brushing_mousePos;
@@ -64,7 +65,7 @@ const vs = `
   }
 `;
 
-const fs = `
+const fs = glsl`
   uniform bool brushing_enabled;
   in float brushing_isVisible;
 `;
@@ -77,7 +78,7 @@ const TARGET = {
 };
 
 const inject = {
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
     vec2 brushingTarget;
     vec2 brushingSource;
     if (brushing_target == 3) {

package/src/clip/clip-extension.ts

@@ -22,6 +22,7 @@ import type {ShaderModule} from '@luma.gl/shadertools';
 import {LayerExtension} from '@deck.gl/core';
 
 import type {Layer} from '@deck.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
 const defaultProps = {
   clipBounds: [0, 0, 1, 1],
@@ -40,7 +41,7 @@ export type ClipExtensionProps = {
   clipByInstance?: boolean;
 };
 
-const shaderFunction = `
+const shaderFunction = glsl`
 uniform vec4 clip_bounds;
 
 bool clip_isInBounds(vec2 position) {
@@ -58,16 +59,16 @@ const shaderModuleVs: ShaderModule = {
 };
 
 const injectionVs = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out float clip_isVisible;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   clip_isVisible = float(clip_isInBounds(geometry.worldPosition.xy));
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in float clip_isVisible;
 `,
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
   if (clip_isVisible < 0.5) discard;
 `
 };
@@ -82,16 +83,16 @@ const shaderModuleFs: ShaderModule = {
 };
 
 const injectionFs = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out vec2 clip_commonPosition;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   clip_commonPosition = geometry.position.xy;
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in vec2 clip_commonPosition;
 `,
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
   if (!clip_isInBounds(clip_commonPosition)) discard;
 `
 };

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

@@ -1,8 +1,9 @@
 import {Framebuffer, Texture} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {project} from '@deck.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
-const vs = `
+const vs = glsl`
 #ifdef NON_INSTANCED_MODEL
 in float collisionPriorities;
 #else
@@ -54,10 +55,10 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
 `;
 
 const inject = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
   float collision_fade = 1.0;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   if (collision_sort) {
     #ifdef NON_INSTANCED_MODEL
     float collisionPriority = collisionPriorities;
@@ -77,7 +78,7 @@ const inject = {
     }
   }
   `,
-  'vs:DECKGL_FILTER_COLOR': `
+  'vs:DECKGL_FILTER_COLOR': glsl`
   color.a *= collision_fade;
   `
 };
@@ -101,6 +102,7 @@ const getCollisionUniforms = (
   const {collisionFBO, drawToCollisionMap, dummyCollisionMap} = opts;
   return {
     collision_sort: Boolean(drawToCollisionMap),
+    // @ts-ignore (v9 not sure why this isn't allowed now)
     collision_texture:
       !drawToCollisionMap && collisionFBO ? collisionFBO.colorAttachments[0] : dummyCollisionMap
   };

package/src/data-filter/aggregator.ts

@@ -1,4 +1,4 @@
-import {Device, Framebuffer} from '@luma.gl/core';
+import {Device, DeviceFeature, Framebuffer} from '@luma.gl/core';
 import {Model} from '@luma.gl/engine';
 import {GL} from '@luma.gl/constants';
 
@@ -53,18 +53,13 @@ void main() {
 }
 `;
 
-export function supportsFloatTarget(device: Device): boolean {
-  // @ts-expect-error
-  const gl = device.gl;
+const FLOAT_TARGET_FEATURES: DeviceFeature[] = [
+  'float32-renderable-webgl', // ability to render to float texture
+  'texture-blend-float-webgl' // ability to blend when rendering to float texture
+];
 
-  // 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 Boolean(
-    gl.getExtension('EXT_float_blend') &&
-      // WebGL 2
-      (gl.getExtension('EXT_color_buffer_float') ||
-        // WebGL 1
-        gl.getExtension('WEBGL_color_buffer_float'))
-  );
+export function supportsFloatTarget(device: Device): boolean {
+  return FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
 }
 
 // A 1x1 framebuffer object that encodes the total count of filtered items
@@ -75,7 +70,7 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
       height: 1,
       colorAttachments: [
         device.createTexture({
-          format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
+          format: 'rgba32float',
           type: GL.FLOAT,
           mipmaps: false
         })

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

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-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';
@@ -118,6 +117,13 @@ type DataFilterExtensionOptions = {
   countItems?: boolean;
 };
 
+const defaultOptions: Required<DataFilterExtensionOptions> = {
+  categorySize: 1,
+  filterSize: 1,
+  fp64: false,
+  countItems: false
+};
+
 const DATA_TYPE_FROM_SIZE = {
   1: 'float',
   2: 'vec2',
@@ -126,19 +132,25 @@ const DATA_TYPE_FROM_SIZE = {
 };
 
 /** 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(opts: DataFilterExtensionOptions) {
+    super({...defaultOptions, ...opts});
+  }
+
   getShaders(this: Layer<DataFilterExtensionProps>, extension: this): any {
     const {categorySize, filterSize, fp64} = extension.opts;
 
     return {
       modules: [fp64 ? shaderModule64 : shaderModule],
       defines: {
-        DATACATEGORY_TYPE: DATA_TYPE_FROM_SIZE[categorySize || 1],
+        DATACATEGORY_TYPE: DATA_TYPE_FROM_SIZE[categorySize],
         DATACATEGORY_CHANNELS: categorySize,
-        DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize || 1],
+        DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
         DATAFILTER_DOUBLE: Boolean(fp64)
       }
     };
@@ -152,7 +164,7 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
       attributeManager.add({
         filterValues: {
           size: filterSize,
-          type: fp64 ? GL.DOUBLE : GL.FLOAT,
+          type: fp64 ? 'float64' : 'float32',
           accessor: 'getFilterValue',
           shaderAttributes: {
             filterValues: {
@@ -165,7 +177,6 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
         },
         filterCategoryValues: {
           size: categorySize,
-          type: GL.FLOAT,
           accessor: 'getFilterCategory',
           transform:
             categorySize === 1
@@ -193,8 +204,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];

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

@@ -1,10 +1,11 @@
 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 = `
+const vs = glsl`
 uniform DATAFILTER_TYPE filter_min;
 uniform DATAFILTER_TYPE filter_softMin;
 uniform DATAFILTER_TYPE filter_softMax;
@@ -88,7 +89,7 @@ void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFrom
 }
 `;
 
-const fs = `
+const fs = glsl`
 uniform bool filter_transformColor;
 in float dataFilter_value;
 `;
@@ -161,7 +162,7 @@ function getUniforms64(opts?: DataFilterModuleSettings | {}): Record<string, any
 }
 
 const inject = {
-  'vs:#main-start': `
+  'vs:#main-start': glsl`
     #ifdef DATAFILTER_DOUBLE
       dataFilter_setValue(
         DATAFILTER_ATTRIB - filter_min64High + DATAFILTER_ATTRIB_64LOW,
@@ -173,19 +174,19 @@ const inject = {
     #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,6 +1,6 @@
 import {LayerExtension} from '@deck.gl/core';
 
-import {patternShaders} from './shaders.glsl';
+import {patternShaders} from './shader-module';
 
 import type {
   Layer,

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;

package/src/mask/shader-module.ts

@@ -1,8 +1,9 @@
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {project} from '@deck.gl/core';
 import type {Texture} from '@luma.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
-const vs = `
+const vs = glsl`
 uniform vec4 mask_bounds;
 uniform bool mask_maskByInstance;
 vec2 mask_getCoords(vec4 position) {
@@ -10,7 +11,7 @@ vec2 mask_getCoords(vec4 position) {
 }
 `;
 
-const fs = `
+const fs = glsl`
 uniform sampler2D mask_texture;
 uniform int mask_channel;
 uniform bool mask_enabled;
@@ -40,10 +41,10 @@ bool mask_isInBounds(vec2 texCoords) {
 `;
 
 const inject = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out vec2 mask_texCoords;
 `,
-  'vs:#main-end': `
+  'vs:#main-end': glsl`
    vec4 mask_common_position;
    if (mask_maskByInstance) {
      mask_common_position = project_position(vec4(geometry.worldPosition, 1.0));
@@ -52,10 +53,10 @@ out vec2 mask_texCoords;
    }
    mask_texCoords = mask_getCoords(mask_common_position);
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in vec2 mask_texCoords;
 `,
-  'fs:#main-start': `
+  'fs:#main-start': glsl`
   if (mask_enabled) {
     bool mask = mask_isInBounds(mask_texCoords);
 

package/src/terrain/shader-module.ts

@@ -6,6 +6,7 @@ import {project} from '@deck.gl/core';
 import type {Texture} from '@luma.gl/core';
 import type {Bounds} from '../utils/projection-utils';
 import type {TerrainCover} from './terrain-cover';
+import {glsl} from '../utils/syntax-tags';
 
 /** Module parameters expected by the terrain shader module */
 export type TerrainModuleSettings = {
@@ -43,20 +44,20 @@ export const terrainModule = {
   name: 'terrain',
   dependencies: [project],
   inject: {
-    'vs:#decl': `
+    'vs:#decl':
+      glsl`
 uniform float terrain_mode;
 uniform sampler2D terrain_map;
 uniform vec4 terrain_bounds;
 out vec3 commonPos;
-${TERRAIN_MODE_CONSTANTS}
-    `,
-    'vs:#main-start': `
+` + TERRAIN_MODE_CONSTANTS,
+    'vs:#main-start': glsl`
 if (terrain_mode == TERRAIN_MODE_SKIP) {
   gl_Position = vec4(0.0);
   return;
 }
 `,
-    'vs:DECKGL_FILTER_GL_POSITION': `
+    'vs:DECKGL_FILTER_GL_POSITION': glsl`
 commonPos = geometry.position.xyz;
 if (terrain_mode == TERRAIN_MODE_WRITE_HEIGHT_MAP) {
   vec2 texCoords = (commonPos.xy - terrain_bounds.xy) / terrain_bounds.zw;
@@ -75,20 +76,20 @@ if (terrain_mode == TERRAIN_MODE_USE_HEIGHT_MAP) {
   }
 }
     `,
-    'fs:#decl': `
+    'fs:#decl':
+      glsl`
 uniform float terrain_mode;
 uniform sampler2D terrain_map;
 uniform vec4 terrain_bounds;
 in vec3 commonPos;
-${TERRAIN_MODE_CONSTANTS}
-    `,
-    'fs:#main-start': `
+` + TERRAIN_MODE_CONSTANTS,
+    'fs:#main-start': glsl`
 if (terrain_mode == TERRAIN_MODE_WRITE_HEIGHT_MAP) {
   fragColor = vec4(commonPos.z, 0.0, 0.0, 1.0);
   return;
 }
     `,
-    'fs:DECKGL_FILTER_COLOR': `
+    'fs:DECKGL_FILTER_COLOR': glsl`
 if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_USE_COVER_ONLY)) {
   vec2 texCoords = (commonPos.xy - terrain_bounds.xy) / terrain_bounds.zw;
   vec4 pixel = texture(terrain_map, texCoords);

package/src/terrain/utils.ts

@@ -13,7 +13,7 @@ export function createRenderTarget(
     colorAttachments: [
       device.createTexture({
         ...(opts.float && {
-          format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
+          format: 'rgba32float',
           type: GL.FLOAT
         }),
         mipmaps: false,

package/src/utils/syntax-tags.ts

@@ -0,0 +1,5 @@
+/**
+ * Marks GLSL shaders for syntax highlighting: glsl`...`
+ * Install https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal
+ */
+export const glsl = (s: TemplateStringsArray) => `${s}`;

package/dist/fill-style/shaders.glsl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shaders.glsl.d.ts","sourceRoot":"","sources":["../../src/fill-style/shaders.glsl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAC,QAAQ,EAAkB,MAAM,eAAe,CAAC;AAE7D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAwE3C,KAAK,uBAAuB,GACxB;IACE,QAAQ,EAAE,QAAQ,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GACD;IACE,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAoCN,eAAO,MAAM,cAAc,EAAE,YAAY,CAAC,uBAAuB,CAOhE,CAAC"}