Wind Field Visualization: Wind Field Data

Introduction

After understanding the basics of WebGL , I went to see the logic of obtaining and analyzing the wind farm data, and encountered problems again.

• System: MacOS
• Version: 11.6
• Origin
• My GitHub

Install ecCodes

In the description of the article example source library , first to install ecCodes, tried to use HomeBrew but didn't work. So follow the introduction of ecCodes source library to compile and install locally.

When going to step 4, I encountered a problem:

No CMAKE_Fortran_COMPILER could be found.

The query data says that gfortran is missing, you can use the command to check whether it is installed:

which gfortran

There are several installation methods , I choose download the installation package .

After solving this problem, follow the instructions to continue, the compilation and installation are successful, and the version is 2.23.0.

execute script

When executing the script, an error message appears:

grib_set: command not found grib_dump: command not found

But the execution file of grib_set is found in the bin directory of the previously installed folder. The inference is that it is not registered in the global path.

Check whether the ecCodes installation path is registered in the global path:

echo $PATH

The problem encountered here is that it is not registered in the global path. For the setting method, please refer to here .

Modified example:

vim ./.bash_profile

After entering edit mode, add the following:

export ECCODE_HOME=/xx/xx/xx/xx/eccodesbuild/bin
export PATH=$PATH:$ECCODE_HOME

After saving, make it effective

source ./.bash_profile

If you want to know if it works, try the command grib_set -h . If you find no effect, it may be related to the shell you are using. Please refer to here .

data generation

The script can be executed normally, but the generated data is wrong:

undefined:1

{"u":,"v":}

Looking at the issues of the source library, some people also mentioned this issue . After trying some of the methods, I found that the modification of this pull can run normally. So I forked and got the modified content and changed some data, see XXHolic/webgl-wind .

Data meaning

In the download.sh script, after the data is parsed, a readable file tmp.json is generated. Let's take a look at the main structure and part of the data in this file:

{
  "u":{
    "messages" : [
      [
        {
          "key" : "name",
          "value" : "U component of wind"
        },
        {
          "key" : "Ni",
          "value" : 360
        },
        {
          "key" : "Nj",
          "value" : 181
        },
        {
          "key" : "values",
          "value" : [5.51964, 5.71964, ...]
        },
        {
          "key" : "maximum",
          "value" : 103.02
        },
        {
          "key" : "minimum",
          "value" : -36.0804
        }
      ]
    ]
  },
  "v":{
    "messages" : [
      [
        {
          "key" : "name",
          "value" : "V component of wind"
        },
        {
          "key" : "getNumberOfValues",
          "value" : 65160
        },
        {
          "key" : "values",
          "value" : [14.9446, 14.8446, ...]
        },
        {
          "key" : "maximum",
          "value" : 80.3446
        },
        {
          "key" : "minimum",
          "value" : -66.4554
        }
      ]
    ]
  }
}

It may be a little confusing to see this, the airflow in the atmosphere has both speed and direction, which can be mathematically represented by a vector. In meteorology, if you know the direction and magnitude of the wind, you can get the vectors representing the wind, the u and v components:

// ws 风力大小 θ 风在数学上的方向描述
u = ws * cos(θ)
v = ws * sin(θ)

See Wind: u and v Components for a more detailed introduction.

Then prepare.js used in wind data in key has:

• Ni indicates how many points there are on a latitude line, simply how many columns there are.
• Nj indicates how many points there are on a longitude line, simply how many lines there are.
• values stores all the values of the components.
• minimum represents the minimum value of the component.
• maximum represents the maximum value of the component.

Among them, Ni and Nj determine the width and height of the generated image. The main logic of the color corresponding to the wind speed size mapping is as follows:

for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const i = (y * width + x) * 4;
    const k = y * width + ((x + width / 2) % width);
    png.data[i + 0] = Math.floor(
      (255 * (u.values[k] - u.minimum)) / (u.maximum - u.minimum)
    );
    png.data[i + 1] = Math.floor(
      (255 * (v.values[k] - v.minimum)) / (v.maximum - v.minimum)
    );
    png.data[i + 2] = 0;
    png.data[i + 3] = 255;
  }
}

• i : The pngjs plugin is used, the color uses the RGBA mode, and every 4 consecutive positions in the array stores the color value of a point, so the i variable must be a multiple of 4.
• k : The index used to obtain the wind speed. First, when y=0, the value of k increases from 180 -> 359, and then from 0 -> 179, so the value starts from the middle. Guess it is because of this The display map is a two-dimensional world map, and the returned data is such a corresponding rule.
• Mapping method: Take maximum - minimum as the benchmark, then calculate the relative value of wind speed values[k] - minimum , multiply the ratio of the two values by the maximum value of the color component 255.

References

• How I built a wind map with WebGL