query parameters and headers for 3D tiles loader

[ibgreen]

@jo-chemla In response to your question in the closed PR #2252 (comment)

There has been a fair amount of hacking by multiple folks over time, so it can get confusing and probably benefits from some cleanup and documentation.

The deck.gl example at https://deck.gl/examples/google-3d-tiles (source code at https://github.com/visgl/deck.gl/blob/8.9-release/examples/website/google-3d-tiles/app.jsx#L53) uses loadOptions on the layer to set the X-GOOG-API-KEY. This results in fetch options being passed in the initial tileset load.

The PR in 3.3.5 you reference was intended to allow you to simply pass query parameters as part of the original URL (i.e. no need to pass them in through undocumented tileset properties).

[arthurschiller]

Hi, could @ibgreen or @felixpalmer please share an example on how this would work?
I want to use the new google maps 3D tiles API with a custom renderer (https://developers.google.com/maps/documentation/tile/create-renderer).

So I'm first fetching a root tileset to retrieve a session. Now I have a URL like: https://tile.googleapis.com/v1/3dtiles/datasets/CgA/files/someFile.json?session=mySession&key=myKey

which I want to feed into the loader:
const tilesetJson = await load(url, Tiles3DLoader); const tileset = new Tileset3D(tilesetJson);

This works but then it tries to resolve the glbs and fails, because the query parameters apparently have been removed:
https://tile.googleapis.com/v1/3dtiles/datasets/CgA/files/someTile.glb

[{ "error": { "code": 403, "message": "The request is missing a valid API key.", "errors": [ { "message": "The request is missing a valid API key.", "domain": "global", "reason": "forbidden" } ], "status": "PERMISSION_DENIED" } } ]

It should be:
https://tile.googleapis.com/v1/3dtiles/datasets/CgA/files/someTile.glb?session=mySession&key=myKey

What am I missing? Sorry if there is something obvious documented somewhere, I just got started working with the library.

I'm using the 3.4.0 tags:
@loaders.gl/[email protected] and @loaders.gl/[email protected]

Thanks a bunch!

[arthurschiller]

From what I'm seeing I have the same setup as outlined here:

But if I check tileset.queryParams it is empty.

[ibgreen]

OK, since that is a passing test case, more info might be necessary, e.g:

• are you actually creating a Tileset3D instance this way and getting different results?
• Or are you using deck.gl Tile3DLayer with the (reasonable) assumption that this will work the same way?
• Or some other approach?

[jo-chemla]

Thanks for your quick replies. On my end, I'm using the example from the loaders.gl docs here, with no deck.gl apart from the WebMercatorViewport constructor.

• Root tileset is fetched correctly (by providing either the url params or the header key-value pair), at that url: https://tile.googleapis.com/v1/3dtiles/root.json
• But the subsequent tile (the first children of root) is fetched from the url provided by the tileset root root.children[0].children[0].content.uri, without adding back urlParams or header keys. /v1/3dtiles/datasets/CgA/files/{TILE_ID}.json?session={SESSION}

const tilesetJson = await load(tilesetUrl, Tiles3DLoader, {
  "3d-tiles": {
    isTileset: true,
  },
  fetch: {
    headers: {
      "X-GOOG-API-KEY": GOOGLE_MAPS_API_KEY,
    },
    queryParams: { test: 100000000 },
    queryString: "a=123&b=abc",
  },
});
const tileset3d = new Tileset3D(tilesetJson, {
  onTileLoad: (tile) => console.log(tile),
});

const viewport = new WebMercatorViewport({
  latitude, longitude, zoom
});
tileset3d.update(viewport);
const visibleTiles = tileset3d.tiles.filter((tile) => tile.selected);

[ibgreen]

There has been several people making quick fixes in this part of loaders.gl, but I can say

• allowed fetch options should only be options accepted by fetch: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters.

I see in the code that the tilesetJson allows for a queryString to be specified. I am not convinced that is the long term solution, but for now perhaps you can slap it in there before creating the Tileset3D.

Currently a lot of work or loaders.gl 4.0 revolves around on strongly typing loader options and return values, which will hopefully take some of the guess work out of where parameters can be supplied.

[arthurschiller]

OK, since that is a passing test case, more info might be necessary, e.g:

• are you actually creating a Tileset3D instance this way and getting different results?
• Or are you using deck.gl Tile3DLayer with the (reasonable) assumption that this will work the same way?
• Or some other approach?

My current playground setup basically looks like this: https://gist.github.com/arthurschiller/5b2b2a1f0ba087f7f155416ed18b3e8d

Basically option A.

[felixpalmer]

@arthurschiller the way we have it working via deck (which passes the parameters through to loaders.gl) is to only provide the API key as a header, this way it is persistent:

https://github.com/visgl/deck.gl/blob/master/examples/website/google-3d-tiles/app.jsx#L53-L55

This PR added automatic support for the session parameter

[arthurschiller]

Thank you @felixpalmer!
loaders.gl tag 3.4.0-alpha.4 is the right one to use for now?
I've gotten a step further but now I'm getting: 3D tile failed to load: undefined 3DTileLoader: unknown type {"as _ after setting the viewport.

Setup is:

import { load } from '@loaders.gl/core';
import { Tiles3DLoader } from '@loaders.gl/3d-tiles';
import { Tileset3D } from '@loaders.gl/tiles';
import { WebMercatorViewport } from '@deck.gl/core';

const tilesetUrl = 'https://tile.googleapis.com/v1/3dtiles/root.json';
const loadOptions = {
	fetch: {
		headers: { 'X-GOOG-API-KEY': apiKey }
	},
	'3d-tiles': { 
		isTileset: true,
		loadGLTF: false
	}
};

const tilesetJson = await load(
	tilesetUrl, 
	Tiles3DLoader,
	loadOptions
);
console.log('tilesetJson: ', tilesetJson);

const tileset3d = new Tileset3D(
	tilesetJson,
	{
		loadOptions,
		onTileLoad: (tile) => {
			console.log('New tile loaded.')
			console.log(tile)
		},
		onTileError: (tile, error) => {
			console.log('Tile Error: ', error)
		}
	}
);
console.log('tileset3d: ', tileset3d);
const viewport = new WebMercatorViewport({
	width: 600,
	height: 600,
	longitude: 0,
	latitude: 0,
	zoom: 10
});

// set initial viewport
tileset3d.update(viewport);

[arthurschiller]

Seems like this error only happens with v3.4.0-alpha.4 but v3.3.5 works. 👍
I also gotta figure out now why it's not traversing but should be solvable. Thanks a bunch!

[felixpalmer]

Please report back once you have a working solution so we can update in the docs

[felixpalmer]

@jo-chemla when constructing the Tileset3D you need to include the loadOptions:

const tilesetUrl = 'https://tile.googleapis.com/v1/3dtiles/root.json';
const loadOptions = {fetch: {headers: {'X-GOOG-API-KEY': GOOGLE_MAPS_API_KEY}}};

export async function run() {
  const tilesetJson = await load(tilesetUrl, Tiles3DLoader, loadOptions);
  const tileset3d = new Tileset3D(tilesetJson, {loadOptions});
  const viewport = new WebMercatorViewport({
    width: 600,
    height: 600,
    longitude: 0,
    latitude: 0,
    zoom: 10
  });
  tileset3d.update(viewport);
}

[jo-chemla]

Alright, thanks for that comment - I indeed passed the loadOptions only to the tilesetJson = await load(...) instead of also to the Tileset3d constructor.
Now I'll need to understand why the library is only loading a single tile and not traversing the tree to fetch all tiles within the WebMercatorViewport I've used in the tileset3d.update(viewport) call, but that's another story! Probably has to do with the geometricError parameter I need to tweak. Thanks again for your help!

[taylorwebber]

@arthurschiller @felixpalmer was there ever any resolution on this issue?

I'm running into the same issues stated above where the session is not being added as a query parameter and thus throwing 400 bad request errors when attempting to fetch the tiles after updating the tileset with the viewport.