Weather Wind 3D

Users Guide



Dynamic 3D visualization of weather forecast numerical model

The grid point data of the numerical weather prediction model published by the meteorological organization is displayed in 3D graphic with WebGL.

Many other people have realized this kind of story, so if you search for it, you will find many things. for example,

There are sites such as. These are wonderful, and the wind speed on the surface of the earth is expressed by animation of particles, and you will never get tired of watching it all day long. The data is also accurate and technically helpful. Please refer to it by all means.

This site also animates the movement of particles in the same way as these, but it makes 3D visualization including not only longitude and latitude but also altitude.

The surface of the earth is a thin layer of air of several tens of kilometers, but weather information changes depending on this altitude. For example, a jet stream flows near mid-latitude and altitude of 10 km, and this flow also affects meteorological phenomena on the ground. The whole image including the altitude isobaric surface is dynamically visualized at once.
Therefore, please note that it is a little popular and data is omitted. (Details are described in the notes.)

Looking at this, I hope that you will feel the dynamic and dynamic feeling of the meteorological phenomena on the earth, and that it will be useful for disaster prevention.

Usage Data

I am using the GDAS 0.25 degree model provided by NOAA
It is updated every 6 hours every day (UTC 0:00,6:00,12:00,18:00), and the predicted value every 3 hours after that is acquired for up to 6 days.
The lead time for the data to be reflected in the system is about 5 hours in the current environment. It will take quite a while. Note that.

Basic Operation

It's almost intuitive.

Times of Day

To change the time, drag the ruler at the bottom left or right.
The ruler scale is every 3 hours, and the date is displayed on the 0:00 line. The scale at the position of the bright red line is the time of the weather information displayed.
The dark red line is the predicted time of the displayed weather information.

Latitude/Longitude Scale

Latitude and longitude are screen drags for mouse. Use the mouse wheel to zoom in and out.
For mobiles and tablets, swipe with two fingers. You can zoom in and out by pinching. As will be explained later, if you slide with one finger, the camera angle in 3D will change.

Wind Display

Wind is represented by the movement of particles. Adjust the particle height range in isobaric planes with the two toggles in the far right sidebar. For example, if you set the top to 700hPa and the bottom to 900hPa, wind trends between isobaric planes of 700hPa and 900hPa will be represented.

Color Display of Elements

You can change the weather information represented by color by clicking the weather element display button on the upper right of the color scale above the time scale. The weather elements that can be selected are:

Abbreviationsweather elementunit
WINDWind Speedm/s
RHRelative Humidity%
TTDDew Point DepressionC
POTMPPotential TemperatureC
EQPOTMPEquivalent Potential TemperatureC
SLPRESSea Level PressurehPa
PRATEPrecipitation ratemm
VVELVertical VelocityPa/s
TCDCTotal Cloud Cover%

Ground-Altitude Elements

By clicking the icon at the bottom right of the screen, you can select the weather information on the ground or the weather information on the high altitude isobaric surface.

If icon is , the ground information is displayed in color.

If icon is , The toggle in the right sidebar displays the weather element information for the isobaric surface displayed in color red. You can select by touching the up and down toggles. However, some pressure surface information cannot be displayed.

The wether elements that can be displayed on the isobaric surface are as follows.

- isobaric surfaceweather elements
isobaric surface 1000hPa, 850hPa, 700hPa, 500hPa, 300hPaHGT, WIND, VVEL, TMP, RH,TTD, POTMP, EQPOTMP
isobaric surface200hPaHGT, WIND, VVEL

The selection toggle in the sidebar is gray when a pressure surface that cannot be displayed is selected.

Specific Point

If you click the second icon from the right of the bottom right of the screen and turn it red, it is the specific point selection mode.

If you click anywhere on the map in the red state, the point is selected and the numerical information of the element at that point is displayed. You can select up to 2 points, and if you click the icon several times with 2 or more selected, it will be reset.

See From the Side

When using a mouse on a computer, hold down the Shift key and drag the center of the screen to change the angle of view of the display. In the case of a tablet, etc., you can change the angle by sliding with one finger.

The bottom left sidebar represents the elevation scale factor. If you increase the magnification, the vertical wind flow will be exaggerated, so you can observe the vertical wind direction. (Please note that it does not match the actual placement.)


Technical Information

Originally, as a study of elm, I wanted to create something as a hobby, so the front end is mostly elm. The WebGL part also uses the elm package. However, the WebGL part is only under study, and only primitive things are done.

And, I am using python for the backend. Each information of GFS is extracted by gdal library.

Map information is from Naural Earth.

Made with Natural Earth. Free vector and raster map data @

Weather data is from NOAA.


  • The vertical speed and scale are exaggerated to make it look dynamic. So please understand that it does not fit the actual placement.
  • Therefore, please note that the information on this site is not guaranteed to be accurate.

Contact Information

I have a Blog . so please contact me there.