mapbox / mapbox/mapbox-gl-js

Model is not visible behind a fill-extrusion layer when ordered below it in the map

Open
#13,428 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Model layers are visible behind a fill-extrusion when the model layer is ordered below fill-extrusion layer. However a model layer is not visible behind a fill-extrusion layer when the model layer is ordered above the fill-extrusion layer.

This causes this effect

![Image](https://github.com/user-attachments/assets/f8e45161-a55e-4293-8c64-3673e5cf5374)

In the example I have the opacity of both fill-extrusions layers at 0.3. The red fill-extrusion is ordered above the model layer in the map, whereas the blue fill-extrusion layer is ordered below the model layer.

I have a minimal example here - https://jsbin.com/rutihabiki/edit?html,output

**mapbox-gl-js version**: Latest (3.10.0)

**browser**: Chrome

### Expected Behaviour

Is that the model is visible behind the fill-extrusions when they don't have an opacity value of 1.

### Actual Behaviour

Fill extrusion which is placed above the model layer acts correctly.
Fill extrusion which is ordered below the model layer acts incorrectly.

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 linked JSBin minimal example in Chrome using mapbox-gl-js 3.10.0, comparing the model and fill-extrusion layer order with both extrusion opacities at 0.3. Trace the rendering path for model and fill-extrusion layers; done means the model remains visible through a partially transparent fill-extrusion regardless of layer order, with a regression test covering both orders.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.