@deck.gl/geo-layers 9.4.0-alpha.2 → 9.4.0-beta.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "deck.gl layers supporting geospatial use cases and GIS formats",
   "license": "MIT",
   "type": "module",
-  "version": "9.4.0-alpha.2",
+  "version": "9.4.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -27,12 +27,17 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "visgl:webgl-only": {
+        "import": "./dist.webgl-only/index.js",
+        "require": "./dist.webgl-only/index.cjs"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "files": [
     "dist",
+    "dist.webgl-only",
     "src",
     "dist.min.js"
   ],
@@ -50,13 +55,13 @@
     "@loaders.gl/terrain": "^4.4.3",
     "@loaders.gl/tiles": "^4.4.3",
     "@loaders.gl/wms": "^4.4.3",
-    "@luma.gl/gltf": "^9.4.0-alpha.1",
-    "@luma.gl/shadertools": "^9.4.0-alpha.1",
+    "@luma.gl/gltf": "^9.4.0-beta.4",
+    "@luma.gl/shadertools": "^9.4.0-beta.4",
     "@math.gl/core": "^4.1.0",
     "@math.gl/culling": "^4.1.0",
     "@math.gl/web-mercator": "^4.1.0",
     "@types/geojson": "^7946.0.8",
-    "a5-js": "^0.7.2",
+    "a5-js": "^0.10.0",
     "h3-js": "^4.4.0",
     "long": "^3.2.0"
   },
@@ -66,8 +71,8 @@
     "@deck.gl/layers": "~9.3.0-beta.2",
     "@deck.gl/mesh-layers": "~9.3.0-beta.2",
     "@loaders.gl/core": "^4.4.3",
-    "@luma.gl/core": "~9.4.0-alpha.1",
-    "@luma.gl/engine": "~9.4.0-alpha.1"
+    "@luma.gl/core": "~9.4.0-beta.4",
+    "@luma.gl/engine": "~9.4.0-beta.4"
   },
-  "gitHead": "546e2e8284b00949ab26e744ffd05b9aa017c802"
+  "gitHead": "7f1e9e63019e6525b3f804cbadcf390ed9d40b65"
 }

package/src/geo-cell-layer/GeoCellLayer.ts

@@ -35,6 +35,7 @@ export default class GeoCellLayer<DataT = any, ExtraProps extends {} = {}> exten
       lineWidthScale,
       lineWidthMinPixels,
       lineWidthMaxPixels,
+      lineAntialiasing,
       lineJointRounded,
       lineMiterLimit,
       lineDashJustified,
@@ -63,6 +64,7 @@ export default class GeoCellLayer<DataT = any, ExtraProps extends {} = {}> exten
         lineWidthScale,
         lineWidthMinPixels,
         lineWidthMaxPixels,
+        lineAntialiasing,
         lineJointRounded,
         lineMiterLimit,
         lineDashJustified,

package/src/mesh-layer/mesh-layer-uniforms.ts

@@ -10,6 +10,14 @@ layout(std140) uniform meshUniforms {
 } mesh;
 `;
 
+const source = /* wgsl */ `\
+struct MeshUniforms {
+  pickFeatureIds: f32,
+};
+
+@group(0) @binding(auto) var<uniform> mesh: MeshUniforms;
+`;
+
 export type MeshProps = {
   pickFeatureIds: boolean;
 };
@@ -18,6 +26,7 @@ export const meshUniforms = {
   name: 'mesh',
   vs: uniformBlock,
   fs: uniformBlock,
+  source,
   uniformTypes: {
     pickFeatureIds: 'f32'
   }

package/src/mesh-layer/mesh-layer.ts

@@ -4,15 +4,16 @@
 
 import type {NumericArray} from '@math.gl/core';
 import {parsePBRMaterial, ParsedPBRMaterial} from '@luma.gl/gltf';
-import {pbrMaterial} from '@luma.gl/shadertools';
 import {Model} from '@luma.gl/engine';
 import type {MeshAttribute, MeshAttributes} from '@loaders.gl/schema';
 import type {UpdateParameters, DefaultProps, LayerContext} from '@deck.gl/core';
 import {SimpleMeshLayer, SimpleMeshLayerProps} from '@deck.gl/mesh-layers';
 
 import {MeshProps, meshUniforms} from './mesh-layer-uniforms';
+import {meshPbrMaterial} from './mesh-pbr-material';
 import vs from './mesh-layer-vertex.glsl';
 import fs from './mesh-layer-fragment.glsl';
+import source from './mesh-layer.wgsl';
 
 export type Mesh = {
   attributes: MeshAttributes;
@@ -62,9 +63,13 @@ export default class MeshLayer<DataT = any, ExtraProps extends {} = {}> extends
 
   getShaders() {
     const shaders = super.getShaders();
-    const modules = shaders.modules;
-    modules.push(pbrMaterial, meshUniforms);
-    return {...shaders, vs, fs};
+    return {
+      ...shaders,
+      vs,
+      fs,
+      source,
+      modules: [...shaders.modules, meshPbrMaterial, meshUniforms]
+    };
   }
 
   initializeState() {
@@ -131,7 +136,8 @@ export default class MeshLayer<DataT = any, ExtraProps extends {} = {}> extends
       defines: {
         ...shaders.defines,
         ...parsedPBRMaterial?.defines,
-        HAS_UV_REGIONS: mesh.attributes.uvRegions ? 1 : 0
+        HAS_UV_REGIONS: mesh.attributes.uvRegions ? 1 : 0,
+        HAS_FEATURE_IDS: this.props.featureIds ? 1 : 0
       },
       parameters: parsedPBRMaterial?.parameters,
       isInstanced: true
@@ -150,8 +156,11 @@ export default class MeshLayer<DataT = any, ExtraProps extends {} = {}> extends
 
       const {pbr_baseColorSampler} = parsedPBRMaterial.bindings;
       const {emptyTexture} = this.state;
+      const meshTexture = pbr_baseColorSampler || emptyTexture;
       const simpleMeshProps = {
-        sampler: pbr_baseColorSampler || emptyTexture,
+        ...(this.context.device.type === 'webgpu'
+          ? {simpleMeshTexture: meshTexture}
+          : {sampler: meshTexture}),
         hasTexture: Boolean(pbr_baseColorSampler)
       };
       // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/mesh-layer/mesh-layer.wgsl.ts

@@ -0,0 +1,130 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default /* wgsl */ `\
+struct VertexInputs {
+  @location(0) positions: vec3<f32>,
+#ifdef HAS_NORMALS
+  @location(1) normals: vec3<f32>,
+#endif
+  @location(2) colors: vec4<f32>,
+#ifdef HAS_UV
+  @location(3) texCoords: vec2<f32>,
+#endif
+#ifdef HAS_UV_REGIONS
+  @location(4) uvRegions: vec4<f32>,
+#endif
+#ifdef HAS_FEATURE_IDS
+  @location(5) rowIndexes: u32,
+#endif
+  @location(6) instanceColors: vec4<f32>,
+  @location(7) instanceModelMatrixCol0: vec3<f32>,
+  @location(8) instanceModelMatrixCol1: vec3<f32>,
+  @location(9) instanceModelMatrixCol2: vec3<f32>,
+};
+
+struct FragmentInputs {
+  @builtin(position) position: vec4<f32>,
+  @location(0) color: vec4<f32>,
+  @location(1) texCoord: vec2<f32>,
+  @location(2) pbrPosition: vec3<f32>,
+  @location(3) pbrNormal: vec3<f32>,
+  @location(4) pickingColor: vec3<f32>,
+};
+
+fn applyUVRegion(uv: vec2<f32>, uvRegion: vec4<f32>) -> vec2<f32> {
+#ifdef HAS_UV_REGIONS
+  // https://github.com/Esri/i3s-spec/blob/master/docs/1.7/geometryUVRegion.cmn.md
+  return fract(uv) * (uvRegion.zw - uvRegion.xy) + uvRegion.xy;
+#else
+  return uv;
+#endif
+}
+
+@vertex
+fn vertexMain(
+  inputs: VertexInputs,
+  @builtin(instance_index) instanceIndex: u32
+) -> FragmentInputs {
+  var outputs: FragmentInputs;
+  var texCoord = vec2<f32>(0.0);
+  var normal = vec3<f32>(0.0, 0.0, 1.0);
+  var uvRegion = vec4<f32>(0.0);
+
+#ifdef HAS_UV
+  texCoord = inputs.texCoords;
+#endif
+#ifdef HAS_NORMALS
+  normal = inputs.normals;
+#endif
+#ifdef HAS_UV_REGIONS
+  uvRegion = inputs.uvRegions;
+#endif
+
+  texCoord = applyUVRegion(texCoord, uvRegion);
+  geometry.uv = texCoord;
+#ifdef HAS_FEATURE_IDS
+  geometry.pickingColor = picking_getPickingColorFromIndex(inputs.rowIndexes);
+#else
+  geometry.pickingColor = picking_getPickingColorFromIndex(instanceIndex);
+#endif
+
+  let instanceModelMatrix = mat3x3<f32>(
+    inputs.instanceModelMatrixCol0,
+    inputs.instanceModelMatrixCol1,
+    inputs.instanceModelMatrixCol2
+  );
+  let commonPosition = vec4<f32>(project_position_vec3_f32(inputs.positions), 1.0);
+
+  geometry.position = commonPosition;
+  geometry.normal = project_normal(instanceModelMatrix * normal);
+
+  outputs.position = project_common_position_to_clipspace(commonPosition);
+  outputs.color = vec4<f32>(
+    inputs.colors.rgb * inputs.instanceColors.rgb,
+    inputs.instanceColors.a
+  );
+  outputs.texCoord = texCoord;
+  outputs.pbrPosition = commonPosition.xyz;
+  outputs.pbrNormal = geometry.normal;
+  outputs.pickingColor = geometry.pickingColor;
+  return outputs;
+}
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
+  fragmentGeometry.uv = inputs.texCoord;
+
+  if (picking.isActive > 0.5) {
+    if (!picking_isColorValid(inputs.pickingColor)) {
+      discard;
+    }
+    return vec4<f32>(inputs.pickingColor, 1.0);
+  }
+
+  fragmentInputs.pbr_vPosition = inputs.pbrPosition;
+  fragmentInputs.pbr_vUV0 = inputs.texCoord;
+  fragmentInputs.pbr_vUV1 = vec2<f32>(0.0);
+  fragmentInputs.pbr_vNormal = inputs.pbrNormal;
+
+  var color = inputs.color * pbr_filterColor(vec4<f32>(0.0));
+  color.a *= layer.opacity;
+
+  if (picking.isHighlightActive > 0.5) {
+    let highlightedObjectColor = picking_normalizeColor(picking.highlightedObjectColor);
+    if (picking_isColorZero(abs(inputs.pickingColor - highlightedObjectColor))) {
+      let highlightAlpha = picking.highlightColor.a;
+      let blendedAlpha = highlightAlpha + color.a * (1.0 - highlightAlpha);
+      if (blendedAlpha > 0.0) {
+        color = vec4<f32>(
+          mix(color.rgb, picking.highlightColor.rgb, highlightAlpha / blendedAlpha),
+          blendedAlpha
+        );
+      }
+    }
+  }
+
+  return deckgl_premultiplied_alpha(color);
+}
+`;

package/src/mesh-layer/mesh-pbr-material.ts

@@ -0,0 +1,39 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {pbrMaterial} from '@luma.gl/shadertools';
+
+import type {
+  PBRMaterialBindings,
+  PBRMaterialProps,
+  PBRMaterialUniforms,
+  ShaderModule
+} from '@luma.gl/shadertools';
+
+// The stock PBR module still uses the pre-indexed UV field name in one helper and owns a
+// separate camera uniform. Align it with the current PBR input struct and deck.gl's project
+// module until these compatibility fixes can be made in luma.gl itself.
+const source = (pbrMaterial.source as string)
+  .replace(
+    /fn pbr_setPositionNormalTangentUV\([\s\S]*?\n}\n/,
+    `fn pbr_setPositionNormalTangentUV(position: vec4f, normal: vec4f, tangent: vec4f, uv: vec2f)
+{
+  fragmentInputs.pbr_vPosition = position.xyz;
+  fragmentInputs.pbr_vNormal = normal.xyz;
+  fragmentInputs.pbr_vTBN = mat3x3f(
+    vec3f(1.0, 0.0, 0.0),
+    vec3f(0.0, 1.0, 0.0),
+    vec3f(0.0, 0.0, 1.0)
+  );
+  fragmentInputs.pbr_vUV0 = uv;
+  fragmentInputs.pbr_vUV1 = uv;
+}
+`
+  )
+  .replace(/pbrProjection\.camera/g, 'project.cameraPosition');
+
+export const meshPbrMaterial = {
+  ...pbrMaterial,
+  source
+} as const satisfies ShaderModule<PBRMaterialProps, PBRMaterialUniforms, PBRMaterialBindings>;

package/src/trips-layer/trips-layer-uniforms.ts

@@ -4,7 +4,18 @@
 
 import type {ShaderModule} from '@luma.gl/shadertools';
 
-const uniformBlock = `\
+const uniformBlockWGSL = /* wgsl */ `\
+struct TripsUniforms {
+  fadeTrail: f32,
+  trailLength: f32,
+  currentTime: f32,
+};
+
+@group(0) @binding(auto)
+var<uniform> trips: TripsUniforms;
+`;
+
+const uniformBlockGLSL = `\
 layout(std140) uniform tripsUniforms {
   bool fadeTrail;
   float trailLength;
@@ -20,8 +31,9 @@ export type TripsProps = {
 
 export const tripsUniforms = {
   name: 'trips',
-  vs: uniformBlock,
-  fs: uniformBlock,
+  source: uniformBlockWGSL,
+  vs: uniformBlockGLSL,
+  fs: uniformBlockGLSL,
   uniformTypes: {
     fadeTrail: 'f32',
     trailLength: 'f32',

package/src/trips-layer/trips-layer.ts

@@ -3,10 +3,12 @@
 // Copyright (c) vis.gl contributors
 
 import type {NumericArray} from '@math.gl/core';
-import {AccessorFunction, DefaultProps} from '@deck.gl/core';
+import {createIterable} from '@deck.gl/core';
+import type {AccessorFunction, Attribute, DefaultProps} from '@deck.gl/core';
 import {PathLayer, PathLayerProps} from '@deck.gl/layers';
 
 import {tripsUniforms, TripsProps} from './trips-layer-uniforms';
+import {packTripTimestamps, tripsShaderInjectionsWGSL} from './trips-layer.wgsl';
 
 const defaultProps: DefaultProps<TripsLayerProps> = {
   fadeTrail: true,
@@ -15,6 +17,31 @@ const defaultProps: DefaultProps<TripsLayerProps> = {
   getTimestamps: {type: 'accessor', value: (d: any) => d.timestamps}
 };
 
+const tripsShaderInjectionsGLSL = {
+  'vs:#decl': `\
+in float instanceTimestamps;
+in float instanceNextTimestamps;
+out float vTime;
+`,
+  // Timestamp of the vertex
+  'vs:#main-end': `\
+vTime = instanceTimestamps + (instanceNextTimestamps - instanceTimestamps) * vPathPosition.y / vPathLength;
+`,
+  'fs:#decl': `\
+in float vTime;
+`,
+  // Drop segments only after PathLayer evaluates analytic-coverage derivatives, then
+  // fade the color (currentTime - 100%, end of trail - 0%).
+  'fs:DECKGL_FILTER_COLOR': `\
+if(vTime > trips.currentTime || (trips.fadeTrail && (vTime < trips.currentTime - trips.trailLength))) {
+  discard;
+}
+if(trips.fadeTrail) {
+  color.a *= 1.0 - (trips.currentTime - vTime) / trips.trailLength;
+}
+`
+} as const;
+
 /** All properties supported by TripsLayer. */
 export type TripsLayerProps<DataT = unknown> = _TripsLayerProps<DataT> & PathLayerProps<DataT>;
 
@@ -51,32 +78,8 @@ export default class TripsLayer<DataT = any, ExtraProps extends {} = {}> extends
 
   getShaders() {
     const shaders = super.getShaders();
-    shaders.inject = {
-      'vs:#decl': `\
-in float instanceTimestamps;
-in float instanceNextTimestamps;
-out float vTime;
-`,
-      // Timestamp of the vertex
-      'vs:#main-end': `\
-vTime = instanceTimestamps + (instanceNextTimestamps - instanceTimestamps) * vPathPosition.y / vPathLength;
-`,
-      'fs:#decl': `\
-in float vTime;
-`,
-      // Drop the segments outside of the time window
-      'fs:#main-start': `\
-if(vTime > trips.currentTime || (trips.fadeTrail && (vTime < trips.currentTime - trips.trailLength))) {
-  discard;
-}
-`,
-      // Fade the color (currentTime - 100%, end of trail - 0%)
-      'fs:DECKGL_FILTER_COLOR': `\
-if(trips.fadeTrail) {
-  color.a *= 1.0 - (trips.currentTime - vTime) / trips.trailLength;
-}
-`
-    };
+    shaders.inject =
+      this.context.device.type === 'webgpu' ? tripsShaderInjectionsWGSL : tripsShaderInjectionsGLSL;
     shaders.modules = [...shaders.modules, tripsUniforms];
     return shaders;
   }
@@ -86,21 +89,64 @@ if(trips.fadeTrail) {
 
     const attributeManager = this.getAttributeManager();
     attributeManager!.addInstanced({
-      timestamps: {
-        size: 1,
-        accessor: 'getTimestamps',
-        shaderAttributes: {
-          instanceTimestamps: {
-            vertexOffset: 0
-          },
-          instanceNextTimestamps: {
-            vertexOffset: 1
+      ...(this.context.device.type === 'webgpu'
+        ? {
+            instanceTimestamps: {
+              size: 2,
+              accessor: 'getTimestamps',
+              // eslint-disable-next-line @typescript-eslint/unbound-method
+              update: this.calculateWebGPUTimestamps,
+              bufferGroup: 'path-instance-data'
+            }
           }
-        }
-      }
+        : {
+            timestamps: {
+              size: 1,
+              accessor: 'getTimestamps',
+              shaderAttributes: {
+                instanceTimestamps: {
+                  vertexOffset: 0
+                },
+                instanceNextTimestamps: {
+                  vertexOffset: 1
+                }
+              }
+            }
+          })
     });
   }
 
+  /** Materialize timestamps in the same per-path instance layout as the path tessellator. */
+  protected calculateWebGPUTimestamps(
+    attribute: Attribute,
+    {data, props}: {data: TripsLayerProps<DataT>['data']; props: TripsLayerProps<DataT>}
+  ): void {
+    const {pathTesselator} = this.state;
+    const {instanceCount, vertexStarts} = pathTesselator;
+    const packedTimestamps = new Float32Array(instanceCount * 2);
+    const {iterable, objectInfo} = createIterable(data);
+
+    for (const object of iterable) {
+      objectInfo.index++;
+
+      const vertexStart = vertexStarts[objectInfo.index];
+      const vertexEnd = vertexStarts[objectInfo.index + 1] ?? instanceCount;
+
+      if (vertexEnd <= vertexStart) {
+        continue;
+      }
+
+      const timestamps = props.getTimestamps?.(object, objectInfo) ?? [];
+      packedTimestamps.set(
+        packTripTimestamps(timestamps, vertexEnd - vertexStart, props._pathType === 'loop'),
+        vertexStart * 2
+      );
+    }
+
+    attribute.startIndices = vertexStarts;
+    attribute.value = packedTimestamps;
+  }
+
   draw(params) {
     const {fadeTrail, trailLength, currentTime} = this.props;
     const tripsProps: TripsProps = {fadeTrail, trailLength, currentTime};

package/src/trips-layer/trips-layer.wgsl.ts

@@ -0,0 +1,63 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {NumericArray} from '@math.gl/core';
+
+/** Pack timestamps in the same padded instance order used by PathTesselator. */
+export function packTripTimestamps(
+  timestamps: NumericArray,
+  instanceCount: number = timestamps.length,
+  isLoop: boolean = false
+): Float32Array {
+  const packedTimestamps = new Float32Array(instanceCount * 2);
+
+  if (timestamps.length === 0) {
+    return packedTimestamps;
+  }
+
+  const isClosed = instanceCount > timestamps.length;
+  const cycleLength = isLoop ? timestamps.length : Math.max(timestamps.length - 1, 1);
+
+  for (let index = 0; index < instanceCount; index++) {
+    const timestampIndex = isClosed ? index % cycleLength : Math.min(index, timestamps.length - 1);
+    const nextTimestampIndex = isClosed
+      ? (timestampIndex + 1) % cycleLength
+      : Math.min(timestampIndex + 1, timestamps.length - 1);
+
+    packedTimestamps[index * 2] = timestamps[timestampIndex];
+    packedTimestamps[index * 2 + 1] = timestamps[nextTimestampIndex];
+  }
+
+  return packedTimestamps;
+}
+
+/** Extend PathLayer's WGSL without duplicating its path geometry or changing its GLSL hooks. */
+export const tripsShaderInjectionsWGSL = {
+  '  @location(12) rowIndexes: u32,': /* wgsl */ `
+  @location(13) instanceTimestamps: vec2<f32>,`,
+
+  '  @location(5) vJointType: f32,': /* wgsl */ `
+  @location(6) vTime: f32,`,
+
+  '    attributes.instanceColors.a * layer.opacity\n  );': /* wgsl */ `
+
+  varyings.vTime = mix(
+    attributes.instanceTimestamps.x,
+    attributes.instanceTimestamps.y,
+    varyings.vPathPosition.y / varyings.vPathLength
+  );
+
+  if (trips.fadeTrail > 0.5) {
+    varyings.vColor.a *=
+      1.0 - (trips.currentTime - varyings.vTime) / trips.trailLength;
+  }`,
+
+  '  // DECKGL_FILTER_COLOR': /* wgsl */ `
+  if (
+    varyings.vTime > trips.currentTime ||
+    (trips.fadeTrail > 0.5 && varyings.vTime < trips.currentTime - trips.trailLength)
+  ) {
+    discard;
+  }`
+} as const;