mapbox / mapbox/mapbox-gl-js

Override default layer styles to allow animations inside shader

Open
#7,491 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs discussion :speech_balloon:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

I want to be able to create a spinner-like circle and an animated arrow like line using shader (for performance reasons).
I did that with mapbox gl js versions before 0.40 with a shader hack (I just replaced the circle fragment shader and sending performance.now() as a new u_time variable in the shader). However, I would like to know if it would be possible to do this correctly with the new versions.

### Implementation

We just need to send performance.now() or RequestAnimationFrame value to all the default style layers. Then there should be a simple way to simply provide a custom fragment.glsl file to override the default ones.

I know we could do the same with the new custom layers, but that would be overkill to create a renderer from scratch just to animate a circle or a line.

[See this gist for a working fragment shader](https://gist.github.com/kaligrafy/d2fa2155a70940f08170b13436bd5515)

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 by reviewing the existing custom-layer approach and the working fragment shader linked in the issue. Define how default style layers would receive animation timing and how users would provide replacement fragment shaders; done means both capabilities work without requiring a renderer from scratch.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics
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.