Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Record and export animations #405

Open
kylebarron opened this issue Mar 4, 2024 · 4 comments
Open

Record and export animations #405

kylebarron opened this issue Mar 4, 2024 · 4 comments

Comments

@kylebarron
Copy link
Member

A powerful feature would be to export image stills or video screencasts from a map. This would be really exciting for power users to make e.g. content for presentations.

There's a JS library called hubble.gl that creates animations from deck.gl maps. For example the following video is created from this example.

4bf79c3f-ba20-c98b-927c-0be9184f08d6.webm

In theory this might not be too hard to support. The basic animation example is pretty minimal, and most importantly the user input is all json-serializable, so it would be relatively easy to expose to a user.

After creating the video, in theory we could send the data back from the browser to Python, but it seems a lot easier to just "download" the video from the user's browser.

@batpad
Copy link
Member

batpad commented May 29, 2024

This is how it's being done in gl-director - if one just wants the user to hit "Record", do what they want with the map, "Stop Recording" and then be able to download a video file: https://github.com/developmentseed/gl-director/blob/main/app/assets/scripts/components/home/video-pane.js#L62 - I think that same approach should work.

@kylebarron
Copy link
Member Author

Note that I would guess that uses a different mechanism than what hubble.gl is using. In particular, hubble.gl hooks directly into the map itself. This means that it can ensure all the data has been loaded and rendered for every keyframe. So the generated animation looks perfectly smooth.

I'm guessing that if you used gl-director, it records the map just the same as if you were manually dragging the map?

@batpad
Copy link
Member

batpad commented May 30, 2024

I'm guessing that if you used gl-director, it records the map just the same as if you were manually dragging the map?

Yea, gl-director hooks directly onto the canvas element so would just record whatever is happening there, and yes, this would likely replicate any rendering lag in the video.

Hubble.gl looks cool - if you think we could hook that up and give more granular control over frame-rate, etc. that does sound likely better.

@kylebarron
Copy link
Member Author

I think it's definitely possible to connect it to Lonboard. It might take a day or two to explore how the integration would work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants