feat(zarr): Scratch work to set up Zarrita loading metadata

packages/deck.gl-zarr/package.json

@@ -51,6 +51,13 @@
     "proj4": "^2.20.2",
     "zarrita": "^0.5.4"
   },
+  "peerDependencies": {
+    "@deck.gl/core": "^9.2.5",
+    "@deck.gl/geo-layers": "^9.2.5",
+    "@deck.gl/layers": "^9.2.5",
+    "@deck.gl/mesh-layers": "^9.2.5",
+    "@luma.gl/core": "^9.2.5"
+  },
   "volta": {
     "extends": "../../package.json"
   }

packages/deck.gl-zarr/src/zarr-layer.ts

@@ -0,0 +1,101 @@
+import type { CompositeLayerProps, UpdateParameters } from "@deck.gl/core";
+import { CompositeLayer } from "@deck.gl/core";
+import type {
+  RasterModule,
+  TileMatrixSet,
+} from "@developmentseed/deck.gl-raster";
+
+/**
+ * Minimum interface that **must** be returned from getTileData.
+ */
+export type MinimalDataT = {};
+
+export type DefaultDataT = MinimalDataT & {};
+
+export interface ZarrLayerProps<DataT extends MinimalDataT = DefaultDataT>
+  extends CompositeLayerProps {
+  /**
+   * Zarr dataset input.
+   */
+  zarr: string;
+
+  /**
+   * Maximum reprojection error in pixels for mesh refinement.
+   * Lower values create denser meshes with higher accuracy.
+   * @default 0.125
+   */
+  maxError?: number;
+
+  /**
+   * User-defined method to load data for a tile.
+   *
+   * The default implementation loads an RGBA image using geotiff.js's readRGB
+   * method, returning an ImageData object.
+   *
+   * For more customizability, you can also return a Texture object from
+   * luma.gl, along with optional custom shaders for the RasterLayer.
+   */
+  getTileData?: (zarrMetadata: any, options: any) => Promise<DataT>;
+
+  /**
+   * User-defined method to render data for a tile.
+   *
+   * This receives the data returned by getTileData and must return a render
+   * pipeline.
+   *
+   * The default implementation returns an object with a `texture` property,
+   * assuming that this texture is already renderable.
+   */
+  renderTile: (data: DataT) => ImageData | RasterModule[];
+
+  /**
+   * Enable debug visualization showing the triangulation mesh
+   * @default false
+   */
+  debug?: boolean;
+
+  /**
+   * Opacity of the debug mesh overlay (0-1)
+   * @default 0.5
+   */
+  debugOpacity?: number;
+}
+
+const defaultProps: Partial<ZarrLayerProps> = {
+  debug: false,
+  debugOpacity: 0.5,
+};
+
+export class ZarrLayer<
+  DataT extends MinimalDataT = DefaultDataT,
+> extends CompositeLayer<ZarrLayerProps<DataT>> {
+  static override layerName = "ZarrLayer";
+  static override defaultProps = defaultProps;
+
+  declare state: {
+    metadata?: TileMatrixSet;
+  };
+
+  override initializeState(): void {
+    this.setState({});
+  }
+
+  override updateState(params: UpdateParameters<this>) {
+    super.updateState(params);
+
+    const { props, oldProps, changeFlags } = params;
+
+    const needsUpdate =
+      Boolean(changeFlags.dataChanged) || props.zarr !== oldProps.zarr;
+
+    if (needsUpdate) {
+      this._parseZarr();
+    }
+  }
+
+  async _parseZarr(): Promise<void> {
+    // TODO: given zarr input in props.zarr, parse metadata and set up layer.
+    const metadata: TileMatrixSet = {};
+    this.setState({ metadata });
+  }
+}

packages/deck.gl-zarr/src/zarr/index.ts

@@ -0,0 +1 @@
+/** Folder with general utilities for understanding and working with Zarr through Zarrita.js */

packages/deck.gl-zarr/src/zarr/tileset.ts

@@ -0,0 +1,35 @@
+/**
+ * Parse Zarr metadata to create a TileMatrixSet.
+ *
+ * Note that our TileMatrixSet is similar to but not exactly the same as the OGC
+ * TileMatrixSet specification.
+ */
+
+import type {
+  TileMatrix,
+  TileMatrixSet,
+} from "@developmentseed/deck.gl-raster";
+import type { ZarrMetadataV2, ZarrMetadataV3 } from "./types";
+
+export async function createZarrTileMatrixSet(
+  metadata: ZarrMetadataV2 | ZarrMetadataV3,
+): Promise<TileMatrixSet> {
+  // For now we assume non-multiscale Zarr, so we only have a single TileMatrix
+  const tileMatrix: TileMatrix = {
+    id: "0",
+  };
+  const tileMatrixSet: TileMatrixSet = {
+    crs: "EPSG:4326",
+    tileMatrices: [tileMatrix],
+    // Assuming that we're already in wgs84
+    projectToWgs84: (point: [number, number]) => point,
+  };
+  return tileMatrixSet;
+}
+
+const WGS84_SEMI_MAJOR_AXIS = 6378137;
+
+function metersPerUnit(): number {
+  // 2 * π * ellipsoid semi-major-axis / 360
+  return (2 * Math.PI * WGS84_SEMI_MAJOR_AXIS) / 360;
+}

packages/deck.gl-zarr/src/zarr/types.ts

@@ -0,0 +1,9 @@
+/**
+ * A type for v2 Zarr metadata
+ */
+export type ZarrMetadataV2 = {};
+
+/**
+ * A type for v3 Zarr metadata
+ */
+export type ZarrMetadataV3 = {};