Awesome Open Source
Awesome Open Source

3D-Wind-Field Demo

Visualize the wind on earth, powered by Cesium JS.

More detail is in this blog post: GPU Powered Wind Visualization With Cesium


How to start the application?

Just create a HTTP server for the "index.html" file in the "Cesium-3D-Wind" folder.

If you have VSCode installed, I recommend to intall the "liveserver" extension.

How to use my own NetCDF data?

The NetCDF file is in the "data" folder, it should contains below variables:


  • Don't forget to change the filename in the source code ("gui.js")
  • "lev", "lat", "lon" are names of dimensions, and "min", "max" are the attributes of the variable.
  • The order of dimensions matter
  • Use small (less than 100MB) NetCDF file if possible, or your browser may crash.

The layout of the NetCDF data:


  • The range of longitude is [0,360], not [-180, 180]
  • netcdfjs will read the data row by row, so array(0) is (lon 0, lat -90)
  • You must use NetCDF version 3 (NOT 4, NOT other file types like HDF or GRIB) file

For more detail, use Panoply to read the "data/" file

How do you generate the file ?

The demo data is from NOAA Global Forecast System. The original data is in GRIB2 format and I used toolsUI to convert the GRIB2 file to a NetCDF V3 file.

After the conversion I used NetCDF Operator for further process of the NetCDF data. I wrote a PowerShell script(in the 'Util' folder) to extract and transform the data by making use of NetCDF Operator. You can also use this script once you setup the 'NCOPath' and 'fileToProcess' variables in the script.

What does the "particleHeight" mean?

"particleHeight" is the distance from the surface of earth. Particles lower than the terrain will be overlapped.

Why are some particles not overlapped by higher terrain?

Because sometimes the depth test for particles is not accurate enough. This problem is similar with Z-fighting, the cause is depth buffer does not have enough precision.

How customize the panel ?

The panel is made with dat.gui library, you can read its document and modify the gui.js as you need.


This demo does not work on my device

If possible, you should run this demo in Chrome on PC, because I did not test it in other browser or mobile device.

If you got into trouble on other device(for example, mobile phone), you can check your WebGL implementation in WebGL report. Check the "Supported Extensions" section, below extensions are at least required:

  • OES_texture_float
  • WEBGL_depth_texture extension
  • EXT_frag_depth

I adopt the WebGL code and the demo is not working now

Unfortunately, there is no easy way to debug WebGL code, and I can't find any debugging tool for setting breakpoints in WebGL. For the moment, I suggest to use Spector.js to figure out what is happening with your WebGL code. It can tell you the input and output of your code.

All WMS layers failed to display

Probably the WMS URL changed, you may check the latest WMS URL by accessing NOAA's TDS server of GFS Analysis. Click the data file of the date you want (mine is 20190916_0000_000), then the WMS URL for this file will be showed in the web page. After getting the latest URL, you can update the variable "WMS_URL" in gui.js to make WMS layer display work again.


This demo makes use of below repos:

This demo makes use of TDS server of NOAA GFS for WMS layer display

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (66,074
visualization (726
cesium (27

Find Open Source By Browsing 7,000 Topics Across 59 Categories