astrosat / windgl Goto Github PK
View Code? Open in Web Editor NEWA WebGL wind particle simulation as a Mapbox custom layer
Home Page: https://astrosat.github.io/windgl/
License: ISC License
A WebGL wind particle simulation as a Mapbox custom layer
Home Page: https://astrosat.github.io/windgl/
License: ISC License
Hi!
This is amazing! Thank you for all the work on this plugin for mapbox. I am trying to visualise the movement of water in a river channel using this visualisation. So, i want to have the particles only in the river, so the land part of the map should not have any particles.
If there is no velocity vector for the location, what should the color encoding be?
Thank you! :)
The map looks pretty weird around the poles and needs essentially padding in the images to even display at the proper projection.
What is the recommended way to change tiles (json) at runtime? I have tried removing the layer and re-creating it but i end up with gl context is null errors. Im using this in react so its possible its purely a react issue.
how can i draw particle trails?
just like the demo of mapbox/webgl-wind.
Testing on an iPhone 6 leads to some weird results.
Tiles are not rendering at certain positions and zoom levels on different browsers. Seems to be fairly random. Can be reproduced using the current demo at https://astrosat.github.io/windgl/
`import 'mapbox-gl/dist/mapbox-gl.css';
var mapboxgl = require('mapbox-gl');
import {sampleFill, particles, source} from '@astrosat/windgl';
mapboxgl.accessToken = 'xxxxxxxx';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10'
});
map.on("load", () => {
const windSource = source("http://localhost:8080/windgl/wind/2019031012/tile.json");
map.addLayer(particles({
id: 'particles',
source: windSource, // best to share the same source between all layers
'particle-speed': ['interpolate', ['zoom'], 0, 0.5, 10, 0.8]
}));
});`
err:
windgl.umd.js:14097 Uncaught Error: Error: Unknown interpolation type zoom
Hi guys,
on the off chance that you are still reading issues on this old repo... how did you get the particles get to be displayed on all world copies?
Any hints would be appreciated.
Style spec has some pretty neat syntax for stuff like zoom/data driven styling, which may well be desirable here. I can imagine that especially when overzooming a datasource, one would want to increase the particle count as you zoom in.
Hello,
How to switch the data source?
@gampleman Hi Jakub, awesome project! But I noticed that there's no attribution (you're stated as the sole author) despite that it's substantially based on the code from https://github.com/mapbox/webgl-wind/ โ would you mind adding some attribution and update the license? Thanks!
Hello, I was trying to setup and run the library locally in order to contribute to it, but I am getting and error when I npm install
, maybe someone knows about this error. Is there any documentation on how to run the library locally and contribute? Cheers
gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:194:23)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\ropo\Desktop\dev\layers-gl\node_modules\gl
gyp ERR! node -v v12.18.3
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @openearth/[email protected] No repository field.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `prebuild-install || node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ropo\AppData\Roaming\npm-cache\_logs\2020-09-24T10_42_25_079Z-debug.log
Currently, this needs a little json file that looks like this:
{
"source": "http://nomads.ncep.noaa.gov",
"date": "2016-11-20T00:00Z",
"width": 360,
"height": 181,
"uMin": -21.32,
"uMax": 26.8,
"vMin": -21.57,
"vMax": 21.42,
"tiles": ["wind/{z}.png"]
}
I wonder if we use not just the r
and g
channels in the image, but use some of the other channels if we can get the velocity encoded into the image without these values, in which case we could dispense with the need for this file.
@cleanasmud any ideas?
windgl.esm.js:252 Uncaught TypeError: Cannot read property 'uMax' of null
at SampleFill.buildColorRamp (windgl.esm.js:252)
at SampleFill.setSampleFillColor (windgl.esm.js:444)
at SampleFill._setPropertyValue (windgl.esm.js:232)
at windgl.esm.js:341
at Array.forEach ()
at SampleFill._initialize (windgl.esm.js:337)
at SampleFill.setWind (windgl.esm.js:279)
at windgl.esm.js:1064
at Array.forEach ()
at windgl.esm.js:1063
at XMLHttpRequest.xhr.onload (windgl.esm.js:1034)
Currently the implementation uses a global very coarse model for the wind speeds. Ideally we would support something like slippy map/tms for these.
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.