API to solve performance of real-time events
Nobody has claimed this yet.
- 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:

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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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