mapbox / mapbox/mapbox-gl-js

API to solve performance of real-time events

Open
#12,470 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation

[Real-time](https://en.wikipedia.org/wiki/Real-time) events describe various operations in computing or other processes that must guarantee response times within a specified time (_deadline_). I use [rAF](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) (16.7 ms) as the _deadline_.

Currently, Mapbox can't handle the _deadline_ with operations as simple as `pointermove` event dragging a single `point` on the map. Frames just can't render fast enough with the current API:

image

This problem becomes insanely apparent on large screens (4k screens). As in the example provided in video:

https://user-images.githubusercontent.com/6717694/208104452-14bb3a67-4bfb-4e15-8a4b-764b4b2fae7f.mov

This creates huge dissonance between input and representation for pointer events, because of the mismatching placement of the pointer and object.

https://user-images.githubusercontent.com/6717694/208105460-71951f8c-52d0-49fe-a33d-c4d4f302b4a1.mov

This might also be problematic with other features like animations and multiplayer tools like package tracking, agent/crew management because of constant flow of information that wastes performance and battery life of devices.

## Design Alternatives

Use `` projection as a layer in Mapbox instead of Mapbox itself. As mentioned in https://github.com/mapbox/mapbox-gl-js/issues/2334

## Design

Nolan has a nice post about [high-performance input handling](https://nolanlawson.com/2019/08/11/high-performance-input-handling-on-the-web/) with pointer events and rAF. To implement something like that we need an API from Mapbox side to render data that require real-time performance. It should avoid clashing with other layers of Mapbox to avoid pointless re-renders.

### Mock-Up

### Concepts

Currently, more than 95% is spent on JS in the provided example. It's great for static GeoJSON, but I need additional API for performant rendering. Maybe writing some sort of Rust module that incorporates OpenGL features of Mapbox could help, idk. Need more research on this topic. I have minimal knowledge of shaders (media/game bachelor) and no knowledge of OpenGL used on web. I need some feedback from Mapbox team on the possible reuse of GL technology used in MapboxGL.

### Implementation

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 reproducing the pointermove dragging example and measuring the rAF deadline, especially the reported JavaScript cost on large screens. Read the canvas projection discussion in issue #2334 and the linked high-performance input-handling article, then investigate how Mapbox currently renders GeoJSON and layers. Done would require a defined API for real-time rendering that avoids unnecessary Mapbox layer re-renders, but the issue does not specify its final design.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend, performance, web-dev
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.