Interleaving DeckGL layers with a base map

Hello, this is just a continuation #4529. After successfully integrating harp.gl’s map with deck.gl, I was experimenting with things and found my Icon Layer laid on top of the buildings of the map.

Normally in mapbox this could be solved by using the mapboxLayer and adding the icon layer beneath the building layer but harp.gl doesn’t provide that sort of functionality.

In essence deckgl is just drawing to an overlay canvas which is laid on top of the base canvas (harpgl’s map in this case) if I understood correct. Is there any way to inform the overlay canvas of the depth buffer of the base canvas so everything renders correctly?

An example screen. the red circles show where the icon should be behind the buildings.

Thanks.

[gallickgunner]

Yep you got it. The icon layer renders as billboards, i.e. all icons are drawn facing the camera at the depth of their anchor.

To draw them in real 3D you need each icon’s rectangle in the world space instead of the clip space. You may switch to the SimpleMeshLayer with texture, or you can subclass the IconLayer and modify its billboard: false mode.

Edit: looks like the original issue (depth matching with harp.gl) is solved? We can move the icon rendering discussion to a different thread.

Hmm, I’ll try that. And yes I think this was the main issue all along. So depth matching with harp.gl works already, I guess. There might be issues with far plane mismatching which give those yellowish/blue planes but more or less they can be avoided or tweaked.

I’ll open a new thread regarding icon rendering when I’m back on this. Thanks for the continued support, appreciate it.

[gallickgunner]

So you can’t call mapView.updateCameras() because that gets overriden later during mapView.render(). You need to update the clipPlanesEvaluator:

  getClipPlaneEvaluator(viewState) {
    const viewport = new WebMercatorViewport(viewState);
    const height = viewport.height;
    let {near, far} = viewport.projectionProps;
    near *= height * viewport.metersPerPixel;
    far *= height * viewport.metersPerPixel;
    return new FixedClipPlanesEvaluator(near, far - near);
  }

  onViewStateChange = ( { viewState } ) => {
    const coords = new GeoCoordinates( viewState.latitude, viewState.longitude );
    this.mapView.lookAt( coords, MapViewUtils.calculateDistanceFromZoomLevel( { focalLength: this.mapView.focalLength }, viewState.zoom + 1 ), viewState.pitch, viewState.bearing );
    this.mapView.zoomLevel = viewState.zoom + 1;
    this.mapView.clipPlanesEvaluator = this.getClipPlaneEvaluator(viewState);
  
    this.setState( { viewState } );
  }

I tried setting clipPlanesEvaluator during MapView’s initialization. It doesn’t crash but it doesn’t render either. There might be a bug in harp?

I tried your snippet and it’s working on my end. Not getting any error or rendering issue. Tried logging the far value both on the deckgl side and inside MapView.js and it prints the same value too.

The only problem remaining is the original one, icons being blocked by buildings when they should be in front. There is also a whitish plane coming from the top at certaing angles, maybe another near/far plane mismanagment between the 2 apis I guess.