Lack of support for other time-sources to control animations

[JannikGM]

mapbox / maplibre does not have an intended way to control the timesource.

Most functions in maplibre will use browser.now which is defined here:

maplibre-gl-js/src/util/browser.js

Lines 6 to 8 in 256d1b8

	const now = window.performance && window.performance.now ?
	window.performance.now.bind(window.performance) :
	Date.now.bind(Date);

This also controls camera animations like flyTo / easeTo:

maplibre-gl-js/src/ui/camera.js

Lines 1210 to 1212 in 256d1b8

	_renderFrameCallback() {
	const t = Math.min((browser.now() - this._easeStart) / this._easeOptions.duration, 1);
	this._onEaseFrame(this._easeOptions.easing(t));

While this is probably a good approach that inherently supports delta timing, it's not universally the best solution.

Motivation

We often call flyTo from a component update in the react framework. Once all the components are updated, react will start generating a new DOM and we can have lag spikes of 100ms or more (= 10% of the animation for a 1 second animation = roughly 6 frames).
We are trying to improve our react performance to avoid framedrops, but framedrop can also happen for other reasons (like window-resize); it's probably not avoidable.

So between starting the animation and rendering, 100ms will have passed already.
So when mapbox renders the animation, it will effectively drop 100ms of the animation and the result feels laggy.
The user loses visual context of the map scrolling past them.

For our other (custom-made map) animations we already have a custom time-source which detects these lag-conditions and pauses animations temporarily, rather than doing a frameskip.
maplibre should be able to support other time-sources so such strategies can be applied.

At our company, we have this problem in different products (also because #106 and flyTo at the same time) made by different developers. So I assume other people also have this problem - so this isn't as niche as it seems.

Another potential use-case might be testing / profiling. With a custom time-source, we could do more reproducible testing and profiling of rendering / tile-loading during animations (although this might be better to handle in the browser-test-driver by hooking the browser time-sources; I did not check if this is already implemented somewhere).

[JannikGM]

Here are some upstream issues / PRs which discuss related things:

• Control the clock in integration tests mapbox/mapbox-gl-js#5773
• Add an example of frame-by-frame video export mapbox/mapbox-gl-js#10172 (comment)

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity.