visgl / visgl/deck.gl

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

Open
#4,680 10 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

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
image

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the MapboxLayer integration and compare the two repro paths: passing a Deck instance versus configuring ScatterplotLayer directly. Reproduce with the listed Mapbox GL and deck.gl versions while changing the map bearing; done means the MapboxLayer overlay remains above the water layer without z-fighting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.