3D-Wind-Field

Visualize the wind on earth, powered by Cesium JS.

the demo of wind-field is below:

the UI function is below:

The wind field visualization schematic

The detailed process about this project is in visualization-principle.vsdx, the flow chart introduces the rendering procedure of Cesium and the method of custom primitive.

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 note 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 in Chrome on PC, because I did not test it in other browser or mobile device.

Credits

This demo makes use of below repos: