Add WebGPU support for ImageViewer (#65)

* Upgrade TileDB-Viz to version 1.0.3-alpha.6, add additional parameters for image viewer

* Bump TileDB-Viz version

examples/netherland-image.ipynb

@@ -0,0 +1,121 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "ece79f11-ab6e-447e-a843-c646d27e9a46",
+   "metadata": {},
+   "source": [
+    "# Stream and visualize the Autzen point cloud\n",
+    "\n",
+    "The original data used in this notebook can be [found here](https://github.com/PDAL/data/tree/master/autzen) and has a BSD license as [described here](https://pdal.io/en/latest/copyright.html#overall-pdal-license-bsd)."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "34b3f824-b53c-4d9d-b4d2-8e900ff7252f",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from pybabylonjs import Show as show, ImageFeatureType"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "5c4ec8bd-7b69-48f0-b70d-9977e07d2d7d",
+   "metadata": {},
+   "source": [
+    "To stream and view point cloud data from a TileDB array a `token` is needed: \n",
+    "* [sign up for a TileDB account](https://cloud.tiledb.com/auth/signup)\n",
+    "\n",
+    "When running this notebook locally:\n",
+    "* [create a token as described here](https://docs.tiledb.com/cloud/how-to/account/create-api-tokens)\n",
+    "* uncomment the below cell and add your token (`<token>`)\n",
+    "* run the below cells\n",
+    "\n",
+    "When running this notebook on TileDB Cloud:\n",
+    "* the token will be automatically loaded\n",
+    "* remove the token from the list of parameters of `show.image`\n",
+    "* run the below cells"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "6ce7f8c7-0805-444b-93ad-3b7554de8304",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# token = \"...\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "19e3204d-d1a1-4ab8-a888-5833ed44e41d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "show.image(token=token,\n",
+    "           engine_api=\"WEBGPU\",\n",
+    "           name_space=\"TileDB-Inc\",\n",
+    "           array_name=\"tiledb://TileDB-Inc/ee5eae5f-9f68-4471-a762-99e966cada1c\",\n",
+    "           point_group_names=[\"tiledb://TileDB-Inc/a89e17ae-4fc7-433f-a2ee-856ee0ecf216\"],\n",
+    "           tile_uris=[\"https://api.pdok.nl/kadaster/3d-basisvoorziening/ogc/v1_0/collections/terreinen/3dtiles\"],\n",
+    "           default_channels=[{\"index\": 1, \"intensity\": 2000}, {\"index\": 2, \"intensity\": 2000}, {\"index\": 3, \"intensity\": 2000}],\n",
+    "           scene_config={\n",
+    "               \"pointConfigs\":[{\n",
+    "                   \"pickable\": False,\n",
+    "                   \"features\":[\n",
+    "                       {\n",
+    "                           \"name\": \"Height\",\n",
+    "                           \"type\": ImageFeatureType.RGB.value[0],\n",
+    "                           \"interleaved\": True,\n",
+    "                           \"attributes\":[\n",
+    "                               {\n",
+    "                                   \"name\": \"Red\",\n",
+    "                                   \"normalize\": True,\n",
+    "                                   \"normalizationWindow\": { \"min\": 0, \"max\": 255 }\n",
+    "                               },\n",
+    "                                                              {\n",
+    "                                   \"name\": \"Green\",\n",
+    "                                   \"normalize\": True,\n",
+    "                                   \"normalizationWindow\": { \"min\": 0, \"max\": 255 }\n",
+    "                               },\n",
+    "                                                              {\n",
+    "                                   \"name\": \"Blue\",\n",
+    "                                   \"normalize\": True,\n",
+    "                                   \"normalizationWindow\": { \"min\": 0, \"max\": 255 }\n",
+    "                               }\n",
+    "                           ]\n",
+    "                       }\n",
+    "                   ]\n",
+    "               }]\n",
+    "           },\n",
+    "           width = 1200,\n",
+    "           height = 700)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.6"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

package.json

@@ -58,7 +58,7 @@
   "dependencies": {
     "@jupyter-widgets/base": "^2 || ^3 || ^4 || ^5 || ^6",
     "@jupyterlab/application": "^3 || ^4",
-    "@tiledb-inc/viz-core": "^1.0.3-alpha.2"
+    "@tiledb-inc/viz-core": "^1.0.3-alpha.7"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3 || ^4",

pybabylonjs/__init__.py

@@ -1,6 +1,6 @@
 import json
 from pathlib import Path
-from .show import BabylonJS, Show
+from .show import BabylonJS, Show, ImageFeatureType
 from ._version import __version__
 
 HERE = Path(__file__).parent.resolve()

pybabylonjs/args.py

@@ -41,19 +41,20 @@
 }
 
 IMAGE_ARGS_DEFAULTS = {
+    "engine_api": None,
     "width": None,
     "height": None,
-    "wheel_precision": None,  # used? in base class?
-    "move_speed": None,  # used?
     "name_space": None,
     "array_name": None,
     "group_name": None,
     "geometry_array_names": None,
     "point_group_names": None,
+    "tile_uris": None,
     "base_group": None,
     "token": None,
     "tiledb_env": None,
     "default_channels": None,
+    "scene_config": None,
 }
 
 

pybabylonjs/show.py

@@ -21,6 +21,13 @@ class PyBabylonJSError(Exception):
     pass
 
 
+class ImageFeatureType(Enum):
+    NON_RENDERABLE = (0,)
+    RGB = (1,)
+    CATEGORICAL = (2,)
+    FLAT_COLOR = 3
+
+
 class Show:
     """Create a N-D visualization."""
 

src/widget.ts

@@ -158,23 +158,23 @@ export class BabylonTileImageModel extends BabylonBaseModel {
 export class BabylonTileImageView extends BabylonBaseView {
   render() {
     this.visualization = new TileDBTileImageVisualization({
+      engineAPI: this.values.engine_api,
       namespace: this.values.name_space,
       arrayID: this.values.array_name,
       groupID: this.values.group_name,
       geometryArrayID: this.values.geometry_array_names,
       pointGroupID: this.values.point_group_names,
+      tileUris: this.values.tile_uris,
       baseGroup: this.values.base_group,
       token: this.values.token,
       tiledbEnv: this.values.tiledb_env,
       width: this.values.width,
       height: this.values.height,
-      wheelPrecision: this.values.wheel_precision,
-      moveSpeed: this.values.move_speed,
       rootElement: this.el,
-      defaultChannels: this.values.default_channels
+      defaultChannels: this.values.default_channels,
+      sceneConfig: this.values.scene_config
     });
 
-    console.log(this.visualization);
     this.visualization.render();
   }
 }