research ticket: display google maps 3d tiles in 3DStreet

[kfarr]

There are a few open source projects that do this, but I suggest we start with this one:

https://github.com/nytimes/three-loader-3dtiles

It has a corresponding A-Frame repo here: https://github.com/nytimes/aframe-loader-3dtiles-component

The tasks are:

• First ensure that the core functionality works in three-loader-3dtiles repo: for a given longitude / latitude can we have 3dtiles appear on the screen? Centering the long / lat value at three.js coordinate origin position: {x: 0, y: 0, z: 0}?
• If it does, then to update the A-Frame component with the newly updated three-loader-3dtiles library and validate that it works for the longitude / latitude use case defined above. It may require additional component properties for longitude and latitude.
• Then let's pause and regroup to decide on the right approach to integrate into 3DStreet Editor

Other options for later if we can't get the nytimes repo to work:

• https://github.com/NASA-AMMOS/3DTilesRendererJS
• https://github.com/ebeaufay/threedtiles

[Avnerus]

Hi! It would be great to have a PR that updates aframe-loader-3dtiles to the latest version of three-loader-3dtiles. The Changelog of the library is now updated and hopefully the migration should be easy. Check the changes to the runtime.update() function and the source of the Google 3D Tiles demo for implementing the same functionality in aframe.

[Algorush]

First ensure that the core functionality works in three-loader-3dtiles repo: for a given longitude / latitude can we have 3dtiles appear on the screen? Centering the long / lat value at three.js coordinate origin position: {x: 0, y: 0, z: 0}?

Yes, this repo and example with google 3d tiles works. I tried to launch it for a long time today, there were errors when installing packages. Then I had to configure Google API keys and enable the Tiles option in the Google console. And now it works. Tomorrow I will work on the second task - updating the aframe component to the new version of three.js. It is also possible to use this example with Google 3D tiles to create our own component. I laso noticed that the ready-made component uses Cesium API rather than accessing Google maps

[Avnerus]

Thank you @Algorush.

I tried to launch it for a long time today, there were errors when installing packages.

Do you mean that you had errors when running npm install in the latest three-loader-3dtiles? Could you perhaps report the problem in the repo's issues page?

I laso noticed that the ready-made component uses Cesium API rather than accessing Google maps

The Google Maps 3D Tiles API is based on the Cesium 3D Tiles spec, so that component should work if you supply the URL for Google's 3D Tiles (https://tile.googleapis.com/v1/3dtiles/root.json), along with other required information as seen in the demo.

[Algorush]

Do you mean that you had errors when running npm install in the latest three-loader-3dtiles? Could you perhaps report the problem in the repo's issues page?

Maybe it was problems on my side only

@Avnerus, maybe you can tell why it could be: I can't get the same level of texture detail on the basic example from the aframe-loader-3dtiles-component repository (examples/basic/index.html) from the local server as I can on this remote example https://nytimes.github.io/aframe-loader-3dtiles-component/examples/basic/. I'm using identical example code. I only have updated three-loader-3dtiles package to 1.2.1

[Avnerus]

I can't get the same level of texture detail

Sorry if this was not detailed enough in the Changelog, but the new version uses more accurate and strongly enforced GPU memory limits. Therefore, the default maximumMem value of 32MB in the aframe component will not work well. You could try to set the new aframe defaults to be the same as the library defaults:

  maximumMemoryUsage: 400,
  memoryCacheOverflow : 128