xiaolingis / 3d-wind-field

Visualize wind field on Cesium

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.

Besides, remember to modify the "runtimeExecutable" option in ".vscode\launch.json" file before starting debug in VSCode.

How to use your own NetCDF data

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

• U (lev, lat, lon) @min @max
• V (lev, lat, lon) @min @max

"lev", "lat", "lon" are names of dimensions, and "min", "max" are the attributes of the variable. For more detail, use Panoply to read the "data/demo.nc" file

please keep in mind that:

• You must use NetCDF version 3 (NOT 4, NOT other file types like HDF or GRIB) file
• The order of dimensions matter
• Use small (less than 100MB) NetCDF file if possible, or your browser may crash. You may want to use NCO (NetCDF Operator) or CDO (Climate Data Operator) to split the NetCDF data
• Don't forget to change the filename in the source code ("gui.js")

Data layout

Note:

• netcdfjs will read the data row by row, so array(0) is (lon 0, lat -90)
• The range of longitude is [0,360], not [-180, 180]

Note

• 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.
• You might want to modify the default parameters for a better visualization result, parameters can be changed in the left panel.
• If possible, you should run this demo on Chrome, because I did not test it on other browser.

Credits

This demo makes use of below repos:

• CesiumJS
• Spector.js
• netcdfjs
• A good Cesium tutorial.