MapboxLayer from @deck.gl/mapbox z-fighting with mapbox layers

[Akiyamka]

Description

DeckGl integrated in mapbox gl context as MapboxLayer render overlay that falls under a layer of mapbox water when bearing closer to 0. Video

Repro Steps

Create deck-gl layer and wrap it in MapboxLayer

import { ScatterplotLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';

const deckLayer = new ScatterplotLayer({
  id: 'scatter-plot',
  data: ('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json'),
  radiusScale: 40,
  radiusMinPixels: 0.5,
  getPosition: (d) => [d[0], d[1]],
  getFillColor: (d) => (d[2] === 1 ? [0, 128, 255] : [255, 0, 128]),
});

const deck = new Deck({
  gl: map.painter.context.gl,
  layers: [deckLayer],
  initialViewState: { ... },
  controller: true,
});

const mapboxLayer = new MapboxLayer({ id: 'deck-gl-layer', deck });
map.addLayer(mapboxLayer);

I was also found that the problem DID NOT OCCUR in next scenario:

import { ScatterplotLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';

const mapboxLayer = new MapboxLayer({
  type: ScatterplotLayer,
  id: 'scatter-plot',
  data: ('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json'),
  radiusScale: 40,
  radiusMinPixels: 0.5,
  getPosition: (d) => [d[0], d[1]],
  getFillColor: (d) => (d[2] === 1 ? [0, 128, 255] : [255, 0, 128]),
});

map.addLayer(mapboxLayer);

Environment (please complete the following information):

• Framework Version:
  • mapbox-gl@1.10.0
  • @deck.gl/core@8.1.9
  • @deck.gl/mapbox@8.1.9
  • @deck.gl/layers@8.1.9
• Browser Version:
  • Mozilla Firefox 77.0 (64-bit)
  • Chromium Version 81.0.4044.138
• OS: Fedora release 32 x86_64 5.6.15-300.fc32.x86_64

[Pessimistress]

I believe mapbox adds a small shift to the depth when rendering each 2D layer. You can try compensate for that by adding a small z to the layer in getPosition.

[Akiyamka]

@Pessimistress nice theory but in practice it was not confirmed, I add z coordinate in getPosition and recorded video where you can see that the position is completely ignored in the top view https://www.loom.com/share/dc59f47dc7e444ccb17db2fc2a593d4e

[Akiyamka]

First of all I would like to understand this is a problem on the deck gl or mapbox side

[Pessimistress]

Can you try adding this prop to your scatterplot layer:

parameters: {
  depthRange: [0, 1]
}

[Akiyamka]

@Pessimistress I add it in right place?

  new ScatterplotLayer({
      id: 'scatter-plot',
      data: ('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json' as unknown),
      radiusScale: 30,
      radiusMinPixels: 0.5,
      getPosition: (d) => [d[0], d[1], 100],
      getFillColor: (d) => (d[2] === 1 ? MALE_COLOR : FEMALE_COLOR),
      parameters: {
        depthRange: [0, 1]
      }
    }),

Currently I'm not see any changes.

[Pessimistress]

Never mind, read your code again -

const mapboxLayer = new MapboxLayer({ id: 'deck-gl-layer', deck: deckLayer });

should be

const mapboxLayer = new MapboxLayer({ id: 'scatter-plot', deck: deck});

See https://deck.gl/#/documentation/submodule-api-reference/deckgl-mapbox/mapbox-layer?section=constructor

[Akiyamka]

@Pessimistress Please excuse me for confusing you with my typo in the example. Of course, I passed not the layer but the deckgl itself. I create working example: https://codesandbox.io/s/epic-paper-mem5b?file=/src/App.js

[Akiyamka]

That issue can be relevant to this bug? https://github.com/mapbox/mapbox-gl-js/issues/7573

[Akiyamka]

parameters: {
  depthTest: false
}

The depthTest: false parameter fixed the problem with water and flickering points. This is not a solution to the problem, because 3D extrusion is now displayed incorrectly, but it may be closer to understanding the problem of someone who understands it better than me

[Pessimistress]

This may be related to how mapbox manipulate their layers' depthRange:

https://github.com/mapbox/mapbox-gl-js/blob/aa6b4b2e51ac19156ba1537baf32a63551313612/src/render/painter.js#L423