mapbox / mapbox/mapbox-gl-js

Custom layers: how do I refresh only the custom layer?

Open
#8,159 8 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

performance :zap:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

mapbox-gl-js version:0.53.1

Question

When using a custom layer with a webgl shader, I implemented the render method of the layer object:

class CustomLayer {
  render(gl, matrix) {
     /** drawing to the context **/

    // this rerenders all the layers
     this.map.triggerRepaint();
  }
}

I can see using the Chrome performance tool that all the layers are redrawing.
https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

image

For an animated custom layer on top of a static map, redrawing all layers at each frame seems aggressive. How could I refresh only the custom layer?

My use case: I coded a shader that runs at 60fps 4% CPU outside of Mapbox with low GPU activity, but I end up having to slow it down to only 15fps, 40% CPU when used as a layer in Mapbox due to the map under being fairly complex.

Links to related documentation

I mostly use this section of the documentation: https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/

Thank you!

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 custom-style-layer and add-3d-model examples, then trace the CustomLayer.render call and this.map.triggerRepaint() behavior described in the issue. Done means establishing whether selective custom-layer refresh is supported and documenting the appropriate behavior or required API change.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.