Here’s a quick showcase of the google earth 3D data that google recently made public in a threejs app
demo
The service from google is “experimental” and quite aggressively limited so if the quotas have been used up the map won’t load and you’ll need to wait a day.
Here’s a video
The code uses a couple libraries built on top of threejs: threedtiles and UltraGlobe
The first library (threedtiles) reads the 3d tile format. The second (UltraGlobe) handles all the geospatial stuff like georeferencing and camera controls.
And while I’m at it, I have code to convert meshes to the same 3d tiles format. The tool converts an unlimited amount of mesh to 3d tiles and the result is optimized for streaming at a high frame rate.
website
12 Likes
Looks great. I hope the quotas will be called off at some point in the future. Would it be possisble to have some off-line caching?
googles documentation and usage policies on the API suggest that any offline use of the models is currently prohibited and must be retrieved through the API, i’m guessing they must have dealt with this by watermarking the models somehow.
Also it’d be tricky to download the models in an automated process as they’re all LOD compressed based on a distance from the camera so i’m guessing you’d have to load any models to their fullest LOD and then scrape buffers maybe unless they’re simply delivered to the network tab as glb once fully rendered?
2 Likes
I was thinking to have a proxy caching tiles temporarily, not sure if that would brake the contract. Also, why not limit navigation to a specific area and do custom apps there. We don’t need another google earth
1 Like
Very impressive! You can also rotate up by holding down the ctrl key. This allows you to look straight down at the map and to rotate to the correction orientation.
Yes they are delivered as glb’s so you can just fetch that directly from their API.
Easiest way I’ve seen is using Loadersgl, which is a renderer-agnostic 3D Tiles loader, you just give it a viewport and it will give you back a list of glb’s in that viewport: loaders.gl/docs/modules/3d-tiles/README.md at 25b4b40274270a3bf57de13473fd42491d1ce07e · visgl/loaders.gl · GitHub
You’re allowed to cache as long as you respect the server’s caching timeout, and also it must be a per-user cache, similar to how a browser cache works, not a cache on your app/server side:
Map Tiles API responses may include Cache-Control headers which should be implemented according to the HTTP protocol documentation. As an example, your client must respect the max-age value, the stale-while-revalidate value, the must-revalidate directive, and the private directive when they are passed in the response.
2 Likes
Yes, i noticed they were being loaded as glb’s, but on inspection of the network tab if you try to open them in a new tab, usually with glb’s they automatically download, these ones seem to link to a json object that throws an access denied warning…
1 Like
This is because the API requires a “session id”, which you can also extract from the network tab (or obtain from the API with an initial request). Here’s how you would fetch an individual glTF from the API:
const tile_url = `/v1/3dtiles/datasets/CgA/files/UlRPVEYubm9kZWRhdGEucGxhbmV0b2lkPWVhcnRoLG5vZGVfZGF0YV9lcG9jaD05NDQscGF0aD0xMzYwNSxjYWNoZV92ZXJzaW9uPTYsaW1hZ2VyeV9lcG9jaD05NjA.glb`
const API_KEY = "KEY"
const session = "SESSION_ID"
const final_url = `https://tile.googleapis.com${piece}?key=${API_KEY}&session=${session}`
And then final_url can be opened directly in the browser and download the glb. (There’s also a further restriction that the author of the API_KEY can make to only allow requests from specific domains, the official Google Earth/CesiumJS demo has that restriction last time I checked)
The JSON files are metadata that tell you what tiles are available in the given bounding region (and the tiles can be more JSON files or eventually glb files)
