Incorrect extruded terrain tiles requested/displayed

[kylebarron]

Description

I've been exploring the new terrain layer a bit. When viewed with positive pitch, and when the terrain is extruded, it appears that tiles are removed before they actually leave the viewport. Here's a gif of the Sierra Nevada, California (i.e. terrain with significant elevation), where you can see that terrain/surface tiles are prematurely removed.

This doesn't happen in SF at sea level, or when viewed directly from above, so I presume it's due to the terrain extrusion.

There are also a few other small things that "feel weird" due to the terrain extrusion:

• when rotating the map (i.e. cmd + click + pan), the map rotates around the "elevation zero" clicked point. So it doesn't feel like the map is rotating around the point actually picked, since the picked point has positive elevation.
  

• It's easy to zoom in below the terrain extrusion.
  

I don't know how hard these are to fix, and I understand if you don't want to tackle every 3D terrain edge case. As it is, the terrain layer is really cool!

Repro Steps

import React from 'react';
import {render} from 'react-dom';
import DeckGL from '@deck.gl/react';

import {TerrainLayer} from '@deck.gl/geo-layers';
import {StaticMap} from 'react-map-gl';

const INITIAL_VIEW_STATE = {
  latitude: 37.1,
  longitude: -118.86,
  zoom: 13,
  bearing: -100,
  pitch: 56
};

const TERRAIN_IMAGE = `https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png`;
const SURFACE_IMAGE = 'https://naip-lambda.kylebarron.dev/4c4d507790e8afa837215677bd6f74f58711bfaf3e1d5f7226193e12/{z}/{x}/{y}@2x.png'

const ELEVATION_DECODER = {
  rScaler: 256,
  gScaler: 1,
  bScaler: 1/256,
  offset: -32768
};

export default function App({
  surfaceImage = SURFACE_IMAGE,
  wireframe = false,
  initialViewState = INITIAL_VIEW_STATE
}) {
  const layer = new TerrainLayer({
    id: 'terrain',
    minZoom: 0,
    maxZoom: 17,
    strategy: 'no-overlap',
    elevationDecoder: ELEVATION_DECODER,
    terrainImage: TERRAIN_IMAGE,
    surfaceImage,
    wireframe,
    color: [255, 255, 255]
  });

  return (
    <DeckGL
      initialViewState={initialViewState}
      controller={true}
      layers={[layer]}
    >
      <StaticMap
        mapStyle="https://raw.githubusercontent.com/kylebarron/fiord-color-gl-style/master/style.json"
        mapOptions={{hash: true}}
      />
    </DeckGL>
  );
}

export function renderToDOM(container) {
  render(<App />, container);
}

Environment (please complete the following information):

• Framework Version: deck.gl master
• Browser Version: Chrome 80.0.3987.116
• OS: Mac OS X 10.15.3

Logs

None

[Pessimistress]

When TileLayer calculates the geo bounds of a viewport, we call viewport.unproject(screenPoint), which by default returns a location at z=0. This is usually fine until all data has significant z, as evident in the use case of TerrainLayer.

var viewport = new WebMercatorViewport({width: 800, height: 600, longitude: 0, latitude: 0, zoom: 10, pitch: 60});

viewport.unproject([800, 600]);
// [ 0.1741263234231441, -0.26118858051076876 ]

viewport unproject([800, 600], {targetZ: 1000});
// [ 0.16905832765026527, -0.2691632761216681, 1000 ]

We could add a zRange prop to TileLayer to control the tile generation. TerrainLayer will need to figure out what z to request, though - maybe using the combined elevation range from all visible tiles? @chrisgervang

[kylebarron]

I'm assuming this would be updated here?
Edit: actually here:
https://github.com/uber/deck.gl/blob/4e1c12cfd1e0b6f9bb8e2091dddd95e2313d05aa/modules/geo-layers/src/tile-layer/utils.js#L42-L58

When you say z as in targetZ, that's elevation not the tile index zoom z, right?