visgl / hubble.gl Goto Github PK
View Code? Open in Web Editor NEWA client-side JavaScript library for animating data visualizations and rendering videos.
Home Page: https://hubble.gl
License: MIT License
A client-side JavaScript library for animating data visualizations and rendering videos.
Home Page: https://hubble.gl
License: MIT License
Websites that do not use javascript bundlers should be able to import core hubble.gl classes using something like
<html>
<head>
<script src="https://unpkg.com/hubble.gl@latest/dist.min.js"></script>
</head>
...
</html>
Describe the bug
Fatal error thrown when importing hubble.gl related to webm-writer running require('fs')
in a browser environment.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
hubble.gl should not throw this error in a browser environment.
Desktop (please complete the following information):
Additional context
The issue is coming from hubble's webm-writer dependency and this line of code:
hubble.gl/modules/core/src/keyframes/keyframes.js
Lines 87 to 97 in abe5c30
While running kepler integration example, only the mapbox layer is shown in export modal.
The Kepler layers are not created.
Is there a version which is running fine?
Thanks a lot.
Ben
Demonstrate rendering attribution text and an image logo using an orthographic view along-side a map view.
This feature was first demonstrated in #204 for data-driven widgets. Building this simpler watermark use case seems like a good place to start, and can be used in browser tests.
Builds on visgl/deck.gl#6329, and MapboxOverlay Multi-view usage.
Hubble currently relies on Luma's Timeline and AnimationLoop classes which utilize the browser's requestAnimationFrame
timer.
This is higher-precision and more realtime than alternatives (notably setTimeout
) but requires that the tab be foregrounded in order for the timer to fire. The AnimationLoop class also, as far as I can tell, utilizes "wall time" to update animation state (i.e. Date.now for engineTime) instead of rendering frame-by-frame.
Because browsers only throttle timers running in the main thread and not on Worker threads, it should be possible to use a package like worker-timers to ensure that timers are always rendered.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
000000.jpeg should look like the programmed frame value, not the user-controlled viewState.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
Bug is likely caused by an extra adapter.onAfterRender
call occurring before the map is redrawn to the correct keyframe values. We'll need a better way of understanding when it's time to capture the frame.
Generic Q&A and help are moved to Discussions!
Thank you for contributing to hubble.gl! We currently accept two types of issues: bug report and feature proposal. When opening an issue, please choose one of the templates, and fill in the information as required by the template. Including code snippets, Codepen/CodeSandbox links and screenshots usually help bugs get resolved faster.
Many of the maintainers are volunteers. Please be courteous to each other. If you are new to the community, we encourage you to try to debug and fix minor issues and submit a PR. Visit our Contribution Guide and Code of Conduct for more information.
Currently it's difficult and time consuming to preview the ending of an animation because it needs to played back in full.
A simple time scrubber in the kepler video export component would solve this issue, and allow users to see any moment in the animation before rendering.
The Pure JS and Standalone examples have embedded video players that also support video downloading. Let's add this to all of the website examples so that they can be set to auto-render and not automatically download files onto computers.
Implement interleaved canvas with a basemap library.
Describe the bug
The ratio in UI resets to 16:9 when a user switches between Animation and Settings tabs.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Ratio should stay 4x3
Hubble depends on the WebMWriter library to record webm video within the WebMEncoder class.
WebMWriter uses canvas.toDataURL
under the hood to serialize the canvas state as a base64-encoded string, which it later turns into a blob with the atob
function. In my exploration this is the major cause of latency in recording with Hubble.
I did some testing with the more recent canvas.toBlob
API with massive speedup improvements, but it seems like the webm-wasm library is even better suited to this task. See this example for how it could work in practice. I also looked into the MediaRecorder API (which Hubble exposes as StreamEncoder) but it seems to only support realtime stream capture (even though the stream API supports manual frame additions).
Further gains might be made with an OffscreenCanvas (which deck appears to support) to keep everything off the main thread, though my theory is that simply replacing the renderer will be sufficient.
Currently the settings are reset whenever the video export component for kepler is closed. This makes iteration very difficult.
It'd be better if the view state and render settings were saved and recalled whenever the window opens.
https://github.com/visgl/hubble.gl/tree/master/modules/react/src/components/export-video
Currently support MapView in CameraKeyframes
, add support for additional view types.
Useful for:
Hi,
While trying the "trips" example, everything is working fine, data layers, trips are animated and the underlaying static map is displayed.
When i run a "Preview" render it's ok too.
But when i export to gif or any other format, only the layers are displayed, but not the staticmap in the background.
How can i get the map to be rendered too?
Thanks a lot for your help
By defining customRender you should be able to prevent rendering from happing until you are ready: https://github.com/visgl/deck.gl/blob/master/modules/core/src/lib/deck.js#L347
That would mainly be an optimization to prevent wasted work....
Originally posted by @ibgreen in #161 (comment)
Call the private this._drawLayers(redrawReason);
when we want to eventually render.
Describe the bug
There is an error generating the website during the gatsby start-up within the markdown plugin.
To Reproduce
Steps to reproduce the behavior:
node -v
>> v14.17.5
git clone [email protected]:visgl/hubble.gl.git
yarn boostrap
cd website
yarn
yarn start
Expected behavior
The website should compile all the existing markdown files, like these: https://github.com/visgl/hubble.gl/tree/master/docs/api-reference
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Root cause: the kepler.gl example needs deck.gl 8.2 to match the version used in kepler.gl. Currently this example is built into the hubble.gl website, so that is required to also pin to deck.gl 8.2. This pinning is cascaded throughout the repo currently, but if the kepler example is built separately from the rest of the website and examples we should be able to remove that pinning and always use the latest deck.gl version (or any version a user prefers to use).
Describe the bug
Export video preview - Mapbox map isn't visible without layers.
To Reproduce
Steps to reproduce the behavior:
createLayers(){
return [];
}
Expected behavior
Mapbox map should be visible.
Additional context
Creating a dummy layer without data or an invisible layer makes the Mapbox map visible.
createLayers(){
// ...
if(!layers.length) return [new ScatterplotLayer({})];
}
Using the adapter.seek
method, add a slider component so that users can preview any frame of the animation.
Currently using un-styled HTML elements on our examples, which render inconsistency on mobile vs desktop.
I'm trying to create a canvas with these properties:
So far we've implemented this two ways with different results. Each only satisfy 2 of the 3 requirements.
window.devicePixelRatio = factor
Through an understanding of deck/mapbox internals we've determined the framebuffer size is set as a function window.devicePixelRatio
and canvas css size. If we control these variables, we can indirectly control the framebuffer size. This sometimes works as expected, but also may result in an inaccurate height in the export depending on the container's size. The issue results in images with this resolution discrepancy:
Expected resolution: 3840 x 2160
Actual: 3840 x 216*5*
Here is where we set the devicePixelRatio
which will internally be used by deck.gl and mapbox-gl-js to set the framebuffer size. Note: The issue also occurred before we rounded to the nearest even.
The canvas is styled to fit a container, and the container is set to an explicit size.
hubble.gl/examples/worldview/src/features/map/Map.js
Lines 134 to 143 in 31f5db5
Note: The deck width/height props are set explicitly to the expected dimensions. But these are not used to set framebuffer size.
hubble.gl/examples/worldview/src/features/map/Map.js
Lines 156 to 157 in 31f5db5
Resolution error is introduced when framebuffer size is derived in deck.gl and mapbox by multiplying their container size by devicePixelRatio
. There doesn't appear to be an interface for explicitly setting framebuffer width/height in both libraries.
At some container sizes this solution works as expected, but further investigation is needed to ensure the output is always the expected resolution.
So far we've observed this solution works as expected when:
2.
is relaxed: when the scale factor is 1.0 and the container size matches the resolution.transform: scale(${factor})
If we apply a scale factor to the deck/mapbox canvas as a CSS transform we can fit a canvas of any size into a container of any size. Deck and mapbox were designed to be explicitly sized, so standard methods can be used to get actual framebuffer matching our desired resolution. However, window.devicePixelRatio = 1
is necessary to ensure retina (or other HiDPI) displays do not effect the framebuffer size.
In this example we set window.devicePixelRatio = 1
, a random container size, the same view state. We switch between 1080p or 4K resolution. See the framebuffer size in the images as "Canvas Internal Size".
It is very common to resize a video and expect the same boundary given a viewState, so this method is not viable unless there is a way to set the viewState and the bounds of the viewport. Currently we do not have a get/setBounds function for our viewports which works at any perspective.
Create an example project on how to use hubble.gl with deck.gl in pure javascript.
For #22
Looking for faster build times compared to webpack. Plenty of examples how to do this online, also this.
Describe the bug
When hubble.gl is only partially integrated there is an edge case that can cause a developers webcam to be captured and saved onto their local machine. The data never leaves their local computer, and the web browser prompts the developer for permission before the webcam is active. That said, we don't want this occurring so we should fix this issue.
To Reproduce
We believe this issue occurs as default behavior of gifshot when there aren't any image frames passed in: https://github.com/yahoo/gifshot/blob/master/src/gifshot.js#L2733-L2765
Steps to reproduce the behavior:
const encoder = new GifEncoder();
encoder.start();
// no calls to encoder.add(), so no frames.
encoder.end();
// browser prompts for webcam permission
encoder.save();
Expected behavior
Hubble should use gifshot
such that it never will capture from webcam.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Currently the kepler component only supports a limited subset of animations the libraries are capable of supporting. Camera, resolution, layer animations, and filter animations could all be possible - but the user needs a way to configure them.
Let's consider adding a JSON template exporter for the user to fill in a custom animation, and an JSON importer to apply the animation.
This advanced mode could be enabled with a toggle on the video export component, which when enabled replaces the existing configuration UI with a JSON editor and/or a download/upload button.
Currently Hubble only has support for one viewState at a time in contrast to Deck, which can support multiple views and viewStates. If the user wants to use 2+ views they'll need more control over the viewState prop. Currently overwritten by Hubble during the animation here
Possibly adapter.getProps could be refactored to behave differently when the views prop is an array of two or more things, and figure out how to ensure this._getViewState() is nested under the correct key
Hi !
I am having an export issue with Hubble.gl for a Kepler.gl map.
You have to know that I don't know anything about coding even JS.
My request may seems easy to resolve but I can't find the solution.
So, I made a map (everything is made manually) and i'd like to have this map with the 'additive' layer blend like this
But when I try to export the map as a video the layer blend goes back to 'normal'
It would be really thanksful if someone can help me :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.