Giter VIP home page Giter VIP logo

windgl's Introduction

WindGL

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

Project Status

The author, @gampleman no longer works at @astrosat. As such, this project will no longer recieve maintenance from him. Furthermore, this project is not production ready, as there are a number of bugs. If you wish to make use of this project, consider:

  1. Getting in touch with @astrosat to discuss comercial support.
  2. Getting in touch with @gampleman to discuss a consulting arrangement.
  3. Forking this repository and fixing all issues. You are welcome to submit patches here, but please do not expect a speedy review.

As such, the project is currently a nice technical demo, but you should expect putting in significant resources if you wish to make a production implementation.

Usage

npm install --save @astrosat/windgl
import {Map} from 'mapboxgl';
import {sampleFill, particles, source, arrows} from '@astrosat/windgl';

// 1. Create a source
const windSource = source('http://url/to/backend');

const map = new Map(...);

map.addLayer(sampleFill({
  id: 'windbackground', // required
  source: windSource, // required
  'sample-fill-opacity': 0.8 // optional
}));

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]
  // you can use mapbox style expressions
}));

map.addLayer(arrows({
    id: 'arrows',
    source: windSource
}), "waterway-label"); // inserting the layer in the middle of the layer stack is supported

Layers

This package offers several ways to visualize wind speed.

Sample Fill

Sample Fill

This layer will use a color map to show the wind speed at each pixel (interpolated from the data set). You can customize it with the following properties:

sample-fill-color

A color value. You can interpolate based on zoom or using data-driven styling (["get", "speed"] will get the speed at the current pixel). The default value is a nice color scale:

[
  "interpolate",
  ["linear"],
  ["get", "speed"],
  0.0,
  "#3288bd",
  10,
  "#66c2a5",
  20,
  "#abdda4",
  30,
  "#e6f598",
  40,
  "#fee08b",
  50,
  "#fdae61",
  60,
  "#f46d43",
  100.0,
  "#d53e4f"
]

sample-opacity

A number between 0 and 1. Indicates the global opacity of the layer. You can use zoom for styling.

Particles

Particles

A particle layer showing wind speed by animating particles based on the wind speed. You can customize it with the following properties:

particle-color

A color value. You can interpolate based on zoom or using data-driven styling (["get", "speed"] will get the speed at the current particle). The default value is white.

particle-speed

A positive number. Indicates how quickly the particles move (i.e. is a multiplier for the speed vector from the dataset). Can be interpolated based on zoom levels. Default is 0.75.

You can adjust the properties by calling setProperty(property, value).

Arrows

Arrows

A vector field layer. You can customize it with the following properties:

arrow-min-size

A positive number. In general, this layer will attempt to draw an arrow at every grid point of the underlying data. However, sometimes that would result in really tiny arrows. So if the size of the arrow would be less than this limit, we will switch to interpolation and show a larger arrow aggregating multiple values. Default is 40px.

arrow-color

A color value. You can interpolate based on zoom or using data-driven styling (["get", "speed"] will get the speed at the current grid point). The default value is white.

arrow-halo-color

A color value. You can interpolate based on zoom. The color of an outline drawn around the arrow. Defaults to transparent.

Data

This visualization is designed to visualize wind speed data based on a regular grid - such that is typically available from forecast models. This data is encoded in a texture in plate carrée projection where the R channel corresponds to x (or u), and the G channel corresponds to y (or v). However, these encodings are relative to the total observed range which must be encoded in an accompanying JSON file:

{
  "source": "http://nomads.ncep.noaa.gov",
  "date": "2016-11-20T00:00Z",
  "width": 360,
  "height": 180,
  "uMin": -21.32,
  "uMax": 26.8,
  "vMin": -21.57,
  "vMax": 21.42,
  "tiles": ["https://example.com/demo/wind/{z}/{x}/{y}.png"]
}

The format is designed for tiling, but this hasn't been implemented in the visualization yet.

You can use the provided tool to get the data. Simply go to the data directory, create a python virtualenv with dependencies using Pipenv and the provided pipfile. Then run gfswind2png.py --help for instructions.

Acknowledgments

This code started as a fork of mapbox/webgl-wind.

windgl's People

Contributors

cleanasmud avatar dependabot[bot] avatar gampleman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

windgl's Issues

Uncaught TypeError: Cannot read property 'uMax' of null

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)

Layer not visible on Map

Added the sampleFill and particles layer on map. But it's not showing on the map. However I am able to get the layer with map.getLayer but not on map.

Screen Shot 2019-09-17 at 1 29 27 PM

Setup, run locally and contributing to the library

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

Buggy on iPhone

Testing on an iPhone 6 leads to some weird results.

  • Particle motion is choppy - this is probably a float precision issue.
  • Arrows sometime disappear...

Unknown interpolation type zoom

`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

Changing tiles

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.

Implement some sort of tiling

Currently the implementation uses a global very coarse model for the wind speeds. Ideally we would support something like slippy map/tms for these.

How to have no particles at certain places?

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! :)

Handling around poles

The map looks pretty weird around the poles and needs essentially padding in the images to even display at the proper projection.

Integrate with Mapbox expressions

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.

Can we get rid of metadata JSON?

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?

Particle trails

how can i draw particle trails?
just like the demo of mapbox/webgl-wind.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.