mapbox / webgl-wind Goto Github PK

View Code? Open in Web Editor NEW

925.0 133.0 203.0 1.4 MB

Wind power visualization with WebGL particles

Home Page: https://mapbox.github.io/webgl-wind/demo/

License: ISC License

JavaScript 71.74% GLSL 23.79% Shell 4.47%

webgl visualization map wind simulation gpu particles javascript

webgl-wind's Introduction

WebGL Wind — Demo

A WebGL-powered visualization of wind power. Capable of rendering up to 1 million wind particles at 60fps.

This project is heavily inspired by the work of:

Cameron Beccario and his wonderful Earth project with its open-source version.
Fernanda Viégas and Martin Wattenberg and their US Wind Map project.
Chris Wellons and his WebGL tutorials, in particular A GPU Approach to Particle Physics.
Greggman and his WebGL Fundamentals guide.

Running the demo locally

npm install
npm run build
npm start
# open http://127.0.0.1:1337/demo/

Downloading weather data

Install ecCodes (e.g. brew install eccodes).
Edit constants in data/download.sh for desired date, time and resolution.
Run ./data/download.sh <dir> to generate wind data files (png and json) for use with the library.

webgl-wind's People

Contributors

Stargazers

Watchers

Forkers

mofangbao klokantech bemyheros testbigorg cuulee isaomatsunami fork-archive-hub visualcrew jseppi victorvelarde jordynmarcellus wwymak zhuwenxiao bmezhou linxing58 winggy bougoue duoduohappy originalsin rubythonode wwt2026 ssmaroju d4tocchini maptiler xwtang huihuizhao cp871202 artchaa ice450028456 hfb564 forget7 voole yooseongc wegiangb lzuniujp08 gpsbird cloudybay caabgchik tornadory wclwksn dobrych robodock 4trees iaosee itpmngt leexhwhy iap-spook bobfrat kunsland jerryzfc anke522 iwun bailihua93 ewildgoose kukiel e7dal foolfish1 maeneak liugp reactual guigrpa saleemshenlin alexruiz95 ice200117 arktoschn tarodenberg blackfrog1 lcbasu forkkit brittanyyee oxiao millancv havardf bjrint codeyu001 quyihang micahdavid borisbsu myastro trinhvo iwenfeng imenehellali ysosirius doc22940 memorywrong mikedeng wuenping shane-pienaar-gbs czz2012 g-zikin fangchuanzhi longervisionusa leoyouli krisaoe manateechen jian9695 apple239131 yd-zhang brendancol primetss

webgl-wind's Issues

WindGL

Hi,as a rookie ,I know less about WebGL, make a introduction for WindGL is prefect, I want to know the process of frame

Trouble running download.sh

Loving this wind layer example, but having trouble running it locally.

When I try to download data, I got a no messages found in utml.grub error.
Running on OSX Mojave and have the brew dependencies mentioned in readme.

Thanks in advance!

{"u":no messages found in utmp.grib,"v":no messages found in vtmp.grib}

Feature request: Support for EPSG:3857 projection

Dear Mapbox,

I hope this message finds you well. I have been using your library and I find it to be a very useful tool for my projects. However, I have noticed that it only supports the EPSG:4326 projection by default. I would like to request a feature that would allow users to select the EPSG:3857 projection as an option.

As you may know, the EPSG:3857 projection is commonly used in web mapping applications such as OpenStreetMap and Google Maps. Having this option available in your library would be beneficial for developers who are working on these types of projects.

Would it be possible to add a parameter option that allows users to choose between EPSG:4326 and EPSG:3857 projections? I believe this would greatly enhance the functionality of your library and make it more versatile for a wider range of applications.

Thank you for your attention to this matter, and I look forward to hearing your thoughts on this feature request.

Best regards,
moory

Implement with mapbox custom layer

Amazing! Is it possible to implement this wind map using mapbox custom layer?

how do I use it to 3D-earth

how do I use it to 3D-earth？e.g. Cesium？

Artifacts, wrong display on Android and iOS

First, thanks for your great work!
It works perfect on desktop but when I tried the demo in Chrome Android (also Safari on iOS, or Firefox on Android) the visualization is broken, with strange artifacts, particles are certainly moving differently and unrealistically then with the same wind image data on desktop. See screenshot from Android:

iOS shows similiar wrong image...

On desktop browsers the wind flow looks as expected:

Screenshots come directly from https://mapbox.github.io/webgl-wind/demo/ (default setting) but I also tried the version from https://github.com/mapbox/webgl-wind/tree/mercator and it seems to have the same problems

how to show the wind of partial region

The demo shows the global wind. Now I have the wind data of partial region, how can I show it with this code? Thanks!

Interactive version

Howdy, this is super insanely amazing, thanks for the awesome work - and the great write-up on the blog post, definitely helped to demystify web gl a bit (though it's still a mystery!)

Wondering if there's currently any plans to support interactivity with mapbox-gl (i.e. supporting zooming, panning etc as a layer)?

Cheers!

Sopport for gfs.json

Hi,Mourner, thanks for your great work, I have made a maptalks layer heavily based on your project, here is it: https://github.com/liubgithub/maptalks.wind .
You have used the wind texture as a look up table to get wind speed。My question is how can I sopport the gfs.json.
The gfs.json's stucture is like the screenshot:

Unable to convert JSON to PNG

when i run download.sh following error came please help

./download.sh
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 75719 0 75719 0 0 40493 0 --:--:-- 0:00:01 --:--:-- 40491
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 76321 0 76321 0 0 43553 0 --:--:-- 0:00:01 --:--:-- 43537
GRIB_API ERROR : unable to get groupSplittingMethodUsed as long (Key/value not found)
GRIB_API ERROR : unable to get codedValues as double array (Key/value not found)
GRIB_API ERROR : unable to get values as double array (Key/value not found)
GRIB_API ERROR : unable to get groupSplittingMethodUsed as long (Key/value not found)
GRIB_API ERROR : unable to get codedValues as double array (Key/value not found)
GRIB_API ERROR : unable to get values as double array (Key/value not found)
module.js:328
throw err;
^

Error: Cannot find module 'pngjs'
at Function.Module._resolveFilename (module.js:326:15)
at Function.Module._load (module.js:277:25)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/home/user/Computer Graphics/newWEBGL/webgl-wind/data/prepare.js:1:75)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)