Skip to content

Commit ae21f8b

Browse files
gkjohnsongkjohnson
authored
Add "GeneratedSurfacePlugin" (#1558)
* Add initial "GeneratedSurfacePlugin" * Adjust "mapTiles" demo * Cleanup * Embed overlays * Add skirts * Add DeepZoom overlay * Update docs * Update deepzoom demo * Updates * add temp file * Small tiling scheme fix * Cleanup * Update demos * Fix geojson overlay * clean up * remove side assignment * Add convenience getter * Add option for no overlays * Delete unused file * Add tst * Fix * fix race condition * Fix texture assignment * Add support for basic "ImageOverlay" * Clean up * Update docs * Add new helper functions * Update demo to have hover points * Update demo * Docs update * Clean up * comments & cleanup * Updates * Updates * Update log
1 parent 47b0fc4 commit ae21f8b

15 files changed

Lines changed: 914 additions & 78 deletions

‎example/three/deepZoom.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
OrthographicCamera,
66
} from 'three';
77
import { EnvironmentControls, TilesRenderer, CameraTransitionManager } from '3d-tiles-renderer';
8-
import { DeepZoomImagePlugin, UpdateOnChangePlugin } from '3d-tiles-renderer/plugins';
8+
import { UpdateOnChangePlugin, DeepZoomOverlay, GeneratedSurfacePlugin } from '3d-tiles-renderer/plugins';
99
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
1010

1111
let controls, scene, renderer;
@@ -14,8 +14,6 @@ let tiles, transition;
1414
const params = {
1515

1616
errorTarget: 1,
17-
renderScale: 1,
18-
1917
orthographic: false,
2018

2119
};
@@ -53,8 +51,12 @@ function init() {
5351
} );
5452

5553
// tiles
56-
tiles = new TilesRenderer( 'https://openseadragon.github.io/example-images/duomo/duomo.dzi' );
57-
tiles.registerPlugin( new DeepZoomImagePlugin( { center: true } ) );
54+
tiles = new TilesRenderer();
55+
tiles.registerPlugin( new GeneratedSurfacePlugin( {
56+
overlay: new DeepZoomOverlay( {
57+
url: 'https://openseadragon.github.io/example-images/duomo/duomo.dzi',
58+
} ),
59+
} ) );
5860
tiles.registerPlugin( new UpdateOnChangePlugin() );
5961
tiles.fetchOptions.mode = 'cors';
6062
tiles.lruCache.minSize = 900;
@@ -91,12 +93,11 @@ function init() {
9193

9294
} );
9395

94-
gui.add( params, 'errorTarget', 0, 100 ).onChange( () => {
96+
gui.add( params, 'errorTarget', 1, 100 ).onChange( () => {
9597

9698
tiles.getPluginByName( 'UPDATE_ON_CHANGE_PLUGIN' ).needsUpdate = true;
9799

98100
} );
99-
gui.add( params, 'renderScale', 0.1, 1.0, 0.05 ).onChange( v => renderer.setPixelRatio( v * window.devicePixelRatio ) );
100101

101102
gui.open();
102103

‎example/three/geojson.js‎

Lines changed: 6 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/three/mapTiles.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,19 @@
66

77
<title>XYZ & TMS Tiles</title>
88
<link rel="stylesheet" href="../styles.css">
9+
<style>
10+
#coords {
11+
position: absolute;
12+
bottom: 0;
13+
left: 0;
14+
padding: 8px;
15+
color: white;
16+
font-size: 12px;
17+
pointer-events: none;
18+
font-family: monospace;
19+
text-shadow: 0 0 2px black;
20+
}
21+
</style>
922
</head>
1023
<body>
1124
<div id="info">
@@ -14,6 +27,7 @@
1427
<br/>
1528
Example courtesy of <a href="https://www.openstreetmap.org/">OpenStreetMap</a>.
1629
</div>
30+
<div id="coords"></div>
1731
<script src="./mapTiles.js" type="module"></script>
1832
</body>
1933
</html>

‎example/three/mapTiles.js‎

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,28 @@ import {
22
Scene,
33
WebGLRenderer,
44
PerspectiveCamera,
5+
Raycaster,
6+
Vector2,
7+
Matrix4,
8+
MathUtils,
59
} from 'three';
610
import { TilesRenderer, GlobeControls, EnvironmentControls } from '3d-tiles-renderer';
7-
import { TilesFadePlugin, UpdateOnChangePlugin, XYZTilesPlugin, } from '3d-tiles-renderer/plugins';
11+
import { TilesFadePlugin, UpdateOnChangePlugin, GeneratedSurfacePlugin, XYZTilesOverlay, CesiumIonOverlay } from '3d-tiles-renderer/plugins';
812
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
913

1014
let controls, scene, renderer;
11-
let tiles, camera;
15+
let tiles, camera, surfacePlugin;
16+
17+
const toLocalMat = new Matrix4();
18+
const raycaster = new Raycaster();
19+
const mouse = new Vector2();
20+
const coordsEl = document.getElementById( 'coords' );
1221

1322
const params = {
1423

1524
errorTarget: 1,
1625
planar: false,
26+
overlay: 'OpenStreetMap',
1727

1828
};
1929

@@ -44,10 +54,12 @@ function init() {
4454
// events
4555
onWindowResize();
4656
window.addEventListener( 'resize', onWindowResize, false );
57+
renderer.domElement.addEventListener( 'mousemove', onMouseMove, false );
4758

4859
// gui initialization
4960
const gui = new GUI();
5061
gui.add( params, 'planar' ).onChange( initTiles );
62+
gui.add( params, 'overlay', [ 'OpenStreetMap', 'Sentinel-2' ] ).onChange( initTiles );
5163
gui.add( params, 'errorTarget', 1, 40 ).onChange( () => {
5264

5365
tiles.getPluginByName( 'UPDATE_ON_CHANGE_PLUGIN' ).needsUpdate = true;
@@ -73,21 +85,26 @@ function initTiles() {
7385

7486
}
7587

88+
const overlay = params.overlay === 'Sentinel-2'
89+
? new CesiumIonOverlay( { assetId: 3954, apiToken: import.meta.env.VITE_ION_KEY } )
90+
: new XYZTilesOverlay( { url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' } );
91+
7692
// tiles
7793
tiles = new TilesRenderer();
7894
tiles.registerPlugin( new TilesFadePlugin( { maximumFadeOutTiles: 200 } ) );
7995
tiles.registerPlugin( new UpdateOnChangePlugin() );
80-
tiles.registerPlugin( new XYZTilesPlugin( {
81-
center: true,
96+
surfacePlugin = new GeneratedSurfacePlugin( {
97+
overlay,
8298
shape: params.planar ? 'planar' : 'ellipsoid',
83-
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
84-
} ) );
99+
} );
100+
tiles.registerPlugin( surfacePlugin );
85101

86102
tiles.lruCache.minSize = 900;
87103
tiles.lruCache.maxSize = 1300;
88104
tiles.parseQueue.maxJobs = 3;
89105
tiles.setCamera( camera );
90106
scene.add( tiles.group );
107+
window.TILES = tiles;
91108

92109
if ( params.planar ) {
93110

@@ -158,6 +175,31 @@ function render() {
158175

159176
}
160177

178+
function onMouseMove( e ) {
179+
180+
mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
181+
mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
182+
183+
raycaster.setFromCamera( mouse, camera );
184+
const hits = raycaster.intersectObject( tiles.group, true );
185+
if ( hits.length > 0 ) {
186+
187+
toLocalMat.copy( tiles.group.matrixWorld ).invert();
188+
hits[ 0 ].point.applyMatrix4( toLocalMat );
189+
190+
const cart = surfacePlugin.getCartographicFromPosition( hits[ 0 ].point );
191+
const lat = MathUtils.radToDeg( cart.lat ).toFixed( 2 );
192+
const lon = MathUtils.radToDeg( cart.lon ).toFixed( 2 );
193+
coordsEl.textContent = `${ lat }° ${ lon }°`;
194+
195+
} else {
196+
197+
coordsEl.textContent = '';
198+
199+
}
200+
201+
}
202+
161203
function throttle( callback ) {
162204

163205
let scheduled = false;

‎example/three/wmsTiles.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Scene, WebGLRenderer, PerspectiveCamera } from 'three';
22
import { TilesRenderer, GlobeControls } from '3d-tiles-renderer';
3-
import { TilesFadePlugin, UpdateOnChangePlugin, WMSCapabilitiesLoader, WMSTilesPlugin } from '3d-tiles-renderer/plugins';
3+
import { TilesFadePlugin, UpdateOnChangePlugin, WMSCapabilitiesLoader, WMSTilesOverlay, GeneratedSurfacePlugin } from '3d-tiles-renderer/plugins';
44
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
55

66
const url =
@@ -110,9 +110,8 @@ function rebuildTiles() {
110110
tiles = new TilesRenderer();
111111
tiles.registerPlugin( new TilesFadePlugin() );
112112
tiles.registerPlugin( new UpdateOnChangePlugin() );
113-
tiles.registerPlugin(
114-
new WMSTilesPlugin( {
115-
shape: 'ellipsoid',
113+
tiles.registerPlugin( new GeneratedSurfacePlugin( {
114+
overlay: new WMSTilesOverlay( {
116115
url: capabilities.request.GetMap.href,
117116
layer: params.layer,
118117
contentBoundingBox: layer.contentBoundingBox,
@@ -122,7 +121,8 @@ function rebuildTiles() {
122121
styles: params.styles,
123122
version: capabilities.version,
124123
} ),
125-
);
124+
shape: 'ellipsoid',
125+
} ) );
126126

127127
tiles.group.rotation.x = - Math.PI / 2;
128128
scene.add( tiles.group );

‎example/three/wmtsTiles.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
PerspectiveCamera,
55
} from 'three';
66
import { TilesRenderer, GlobeControls, EnvironmentControls } from '3d-tiles-renderer';
7-
import { TilesFadePlugin, UpdateOnChangePlugin, WMTSCapabilitiesLoader, WMTSTilesPlugin } from '3d-tiles-renderer/plugins';
7+
import { TilesFadePlugin, UpdateOnChangePlugin, WMTSCapabilitiesLoader, WMTSTilesOverlay, GeneratedSurfacePlugin } from '3d-tiles-renderer/plugins';
88
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
99

1010
const url = window.location.hash.replace( /^#/, '' ) || 'https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
@@ -169,18 +169,19 @@ function rebuildTiles() {
169169
tiles = new TilesRenderer();
170170
tiles.registerPlugin( new TilesFadePlugin() );
171171
tiles.registerPlugin( new UpdateOnChangePlugin() );
172-
tiles.registerPlugin( new WMTSTilesPlugin( {
172+
tiles.registerPlugin( new GeneratedSurfacePlugin( {
173+
overlay: new WMTSTilesOverlay( {
174+
url,
175+
tileMatrices: tileMatrixSet.tileMatrices,
176+
contentBoundingBox,
177+
projection: 'EPSG:4326',
178+
dimensions: params.dimensions,
179+
style: params.style,
180+
layer: params.layer,
181+
tileMatrixSet: params.tileMatrixSet,
182+
} ),
173183
shape: params.planar ? 'planar' : 'ellipsoid',
174184
center: true,
175-
176-
url,
177-
tileMatrices: tileMatrixSet.tileMatrices,
178-
contentBoundingBox,
179-
projection: 'EPSG:4326',
180-
dimensions: params.dimensions,
181-
style: params.style,
182-
layer: params.layer,
183-
tileMatrixSet: params.tileMatrixSet,
184185
} ) );
185186

186187
tiles.setCamera( camera );

‎src/three/plugins/API.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,25 @@ Manages a `TiledImageSource` and a `RegionImageSource` that handles compositing
192192
multiple source tiles into a single texture per 3D tile region.
193193

194194

195+
## DeepZoomOverlay
196+
197+
_extends [`TiledImageOverlay`](#tiledimageoverlay)_
198+
199+
Plugin that renders a Deep Zoom Image (DZI) as a tiled overlay. Only a single embedded "Image" is supported.
200+
See the [Deep Zoom specification](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc645077(v=vs.95))
201+
and [OpenSeadragon](https://openseadragon.github.io).
202+
203+
204+
### .constructor
205+
206+
```js
207+
constructor(
208+
{
209+
url?: string,
210+
}
211+
)
212+
```
213+
195214
## GoogleMapsOverlay
196215
197216
_extends [`TiledImageOverlay`](#tiledimageoverlay)_
@@ -566,6 +585,53 @@ constructor(
566585
)
567586
```
568587
588+
## GeneratedSurfacePlugin
589+
590+
Plugin that generates tiled surface geometry from a tiling scheme, optionally loading
591+
image overlay data.
592+
593+
The tiling scheme and projection are derived from a provided overlay.
594+
If the source's projection is cartographic (any EPSG scheme), the plugin supports
595+
both planar and ellipsoidal geometry via the `shape` option.
596+
597+
598+
### .constructor
599+
600+
```js
601+
constructor(
602+
{
603+
overlay = null: ImageOverlay,
604+
shape = 'ellipsoid': string,
605+
endCaps = true: boolean,
606+
center = true: boolean,
607+
useRecommendedSettings = true: boolean,
608+
}
609+
)
610+
```
611+
612+
### .getCartographicFromPosition
613+
614+
```js
615+
getCartographicFromPosition( position: Vector3, target = {}: Object ): Object
616+
```
617+
618+
Returns the cartographic coordinates for a given world-space position. "lat" and "lon" are assigned
619+
to the target object.
620+
621+
622+
### .getPositionFromCartographic
623+
624+
```js
625+
getPositionFromCartographic(
626+
lat: number,
627+
lon: number,
628+
target = new Vector3(): Vector3
629+
): Vector3
630+
```
631+
632+
Returns the world-space position for a given cartographic coordinate.
633+
634+
569635
## GLTFCesiumRTCExtension
570636
571637
GLTF loader plugin that applies the [CESIUM_RTC](https://github.com/KhronosGroup/glTF/blob/main/extensions/1.0/Vendor/CESIUM_RTC/README.md)

0 commit comments

Comments
 (0)