NASA-AMMOS · gkjohnson · May 17, 2026 · Feb 2, 2026 · May 14, 2026 · May 15, 2026
diff --git a/example/three/pmtiles.html b/example/three/pmtiles.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+		<title>PMTiles Globe Example</title>
+		<link rel="stylesheet" href="../styles.css">
+	</head>
+	<body>
+		<script type="module" src="pmtiles.js"></script>
+	</body>
+</html>
diff --git a/example/three/pmtiles.js b/example/three/pmtiles.js
@@ -0,0 +1,132 @@
+import { Scene, WebGLRenderer, PerspectiveCamera } from 'three';
+import {
+	TilesRenderer,
+	GlobeControls,
+} from '3d-tiles-renderer';
+import {
+	UpdateOnChangePlugin,
+	TilesFadePlugin,
+	ImageOverlayPlugin,
+	PMTilesOverlay,
+	GeneratedSurfacePlugin,
+} from '3d-tiles-renderer/plugins';
+import GUI from 'three/addons/libs/lil-gui.module.min.js';
+
+// Layer config for Protomaps v4 basemap — colors from the Protomaps "Light" theme
+const LAYERS = {
+	earth: { enabled: true, fill: '#e2dfda', order: 0 },
+	water: { enabled: true, fill: '#80deea', order: 1 },
+	landcover: { enabled: true, fill: '#c4e7d2', order: 2 },
+	landuse: { enabled: true, fill: '#cfddd5', order: 3 },
+	natural: { enabled: true, fill: '#e2e0d7', order: 4 },
+	buildings: { enabled: true, fill: '#cccccc', order: 5 },
+	roads: { enabled: true, stroke: '#ebebeb', order: 6 },
+	transit: { enabled: true, stroke: '#a7b1b3', order: 7 },
+	boundaries: { enabled: true, stroke: '#adadad', order: 8 },
+	places: { enabled: true, fill: '#5c5c5c', order: 9 },
+	pois: { enabled: true, fill: '#1a8cbd', radius: 3, order: 10 },
+};
+
+let scene, renderer, camera, controls, tiles, overlay;
+
+init();
+render();
+
+function init() {
+
+	renderer = new WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setClearColor( 0x111111 );
+	renderer.setAnimationLoop( render );
+	document.body.appendChild( renderer.domElement );
+
+	scene = new Scene();
+	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.001, 10000 );
+
+	// PMTiles overlay: vector tile data composited on top of the base geometry
+	overlay = new PMTilesOverlay( {
+		url: 'https://demo-bucket.protomaps.com/v4.pmtiles',
+		getStyle,
+	} );
+
+	// Base tile layer: XYZ raster tiles provide the globe geometry
+	tiles = new TilesRenderer();
+	tiles.registerPlugin( new UpdateOnChangePlugin() );
+	tiles.registerPlugin( new TilesFadePlugin() );
+	tiles.registerPlugin( new GeneratedSurfacePlugin( {
+		center: true,
+		shape: 'ellipsoid',
+	} ) );
+	tiles.registerPlugin( new ImageOverlayPlugin( {
+		overlays: [ overlay ],
+		renderer,
+	} ) );
+
+	tiles.setCamera( camera );
+	tiles.group.rotation.x = - Math.PI / 2;
+	tiles.group.updateMatrixWorld();
+	scene.add( tiles.group );
+
+	// Controls
+	controls = new GlobeControls( scene, camera, renderer.domElement );
+	controls.setEllipsoid( tiles.ellipsoid, tiles.group );
+	controls.enableDamping = true;
+	controls.camera.position.set( 0, 0, 1.5e7 );
+
+	window.addEventListener( 'resize', onWindowResize );
+
+	setupGUI();
+
+}
+
+function getStyle( layerName, properties ) {
+
+	if ( ! ( layerName in LAYERS ) ) return null;
+
+	const layer = LAYERS[ layerName ];
+	return layer.enabled ? layer : null;
+
+}
+
+function updateOverlay() {
+
+	overlay.redraw();
+
+}
+
+function setupGUI() {
+
+	const gui = new GUI();
+
+	for ( const key in LAYERS ) {
+
+		const folder = gui.addFolder( key.charAt( 0 ).toUpperCase() + key.slice( 1 ) );
+		folder.add( LAYERS[ key ], 'enabled' ).onChange( updateOverlay );
+		folder.addColor( LAYERS[ key ], LAYERS[ key ].fill !== undefined ? 'fill' : 'stroke' ).onChange( updateOverlay );
+		folder.close();
+
+	}
+
+}
+
+function onWindowResize() {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+
+}
+
+function render() {
+
+	controls.update();
+
+	camera.updateMatrixWorld();
+	tiles.setCamera( camera );
+	tiles.setResolutionFromRenderer( camera, renderer );
+	tiles.update();
+
+	renderer.render( scene, camera );
+
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/preset-modules": "^0.1.6",
+    "@mapbox/vector-tile": "^2.0.3",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babylonjs/core": "^8.47.2",
@@ -107,6 +108,8 @@
     "jsdoc": "^4.0.5",
     "leva": "^0.10.0",
     "lil-gui": "^0.21.0",
+    "pbf": "^4.0.1",
+    "pmtiles": "^4.3.2",
     "postprocessing": "^6.36.4",
     "three": "^0.170.0",
     "typescript": "^5.6.0",
@@ -117,12 +120,18 @@
   "peerDependencies": {
     "@babylonjs/core": ">=8.0.0",
     "@babylonjs/loaders": ">=8.0.0",
+    "@mapbox/vector-tile": "^2.0.3",
     "@react-three/fiber": "^8.17.9 || ^9.0.0",
+    "pbf": "^4.0.1",
+    "pmtiles": "^4.3.2",
     "react": "^18.3.1 || ^19.0.0",
     "react-dom": "^18.3.1 || ^19.0.0",
     "three": ">=0.167.0"
   },
   "peerDependenciesMeta": {
+    "@mapbox/vector-tile": {
+      "optional": true
+    },
     "@react-three/fiber": {
       "optional": true
     },
@@ -132,6 +141,12 @@
     "@babylonjs/loaders": {
       "optional": true
     },
+    "pbf": {
+      "optional": true
+    },
+    "pmtiles": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },