feature animation question

[unphased]

I am curious about what options maplibre provides us in the way of animating stuff in general. I can see in this example that we are able to define an animation using a canvas layer and control to a significant degree rendering this icon using canvas API.

That is nice, but I am curious about what other possibilities we have. For example I am able to draw circles based off of positions specified in a geojson datasource by creating a layer like this:

	map.addLayer({
		id: 'station-circles',
		type: 'circle',
		source: 'stations',
		paint: {
			'circle-color': [
				'case',
				['boolean', ['feature-state', 'loading'], false],
				'#ccaa99',
				'#aaeeaa',
			],
			'circle-stroke-width': 2,
			'circle-stroke-color': '#000000',
			'circle-opacity': [
				'case',
				['boolean', ['feature-state', 'hover'], false],
				1,
				0.7,
			],
			'circle-radius': [
				'case',
				['boolean', ['feature-state', 'hover'], false],
				8,
				6,
			],
		},
		minzoom: 4, // Show at all zoom levels for debugging
	});

As you can see I am able to successfully control how these circles render based on application state via the use of map.setFeatureState().

What I love about this conceptually is that the rendering of this happens in maplibre's webgl internals. For symbols for example I especially like that physical text collision can be avoided with things like 'text-overlap': 'cooperative',.

So I have questions for how to push forward with this. Seems like it might be doable to try to animate certain things by calling setFeatureState() in a loop. Haven't tried this yet, since there hasn't been a need, but it could open some doors. It probably would not be good for performance, so deeper animation systems and shader work would be needed to make it scale.

The general purpose way to go would be to build custom shader maplibre layers like this. However this is a very large hammer. This is what I currently use to make high performance visualizations inside a map. I actually hack three.js to piggyback on Maplibre's webgl context; it does give good control over layer visibility, but the positioning and coordinate system integration is somewhat ad hoc and unclean. mouse raycasting under three.js is still an unsolved problem for me.

I am looking to explore if there is space for stuff that might make sense to build where we could use a geojson or vector type data input and have scriptable expressions we can define that get translated into shaders so that the system could scale well to huge data volumes. But even without considering such needs, I do feel like it would be cool if i could use some kind of elaborate expression to define something akin to CSS animation, this would be a good alternative to resorting to rendering visuals with canvas (wouldn't want to instantiate 1 million canvases!) or implementing it with an entire shader from scratch (get thrown in the deep end in terms of math).

Might be a much larger lift under WebGL2 compared to WebGPU so the right answer might be to wait a bit.

[HarelM]

You have deck.gl for some other usages, I think they have even better hooks to tap into the shaders code.
In general though, animation on the GPU is resource intensive, I've added an "ant path" in the past in maplibre which took a lot of resources...
But you are welcome to try and better define what might help you and we could consider adding things to the public API for that...

[unphased]

Well the use case might be to have something basic like possibly hundreds or thousands of various animated icons. I was thinking canvas would be inefficient for something like this.

But, it occurs to me that maybe with the canvas solution depending on how it's implemented and if it's fine for each icon to be in the same state at a given point in time, then if the canvas for the icon is being blitted/sampled/instanced then it might actually be very efficient. So it's something I'll test out when it makes sense to explore.