共计 2195 个字符,预计需要花费 6 分钟才能阅读完成。
引子
理解 WebGL 根底之后,接着去看获取解析风场数据的逻辑,又遇到问题。
- 零碎:MacOS
- 版本:11.6
- Origin
- My GitHub
装置 ecCodes
在文章示例源库的阐明中,首先要装置 ecCodes,尝试应用 HomeBrew 但不行。于是就依照 ecCodes 源库的介绍本地进行编译装置。
在进行第 4 步的时候,碰到了问题:
No CMAKE_Fortran_COMPILER could be found.
查问材料说是短少 gfortran
,能够应用命令查看是否已装置:
which gfortran
有好几种装置形式,我抉择下载安装包。
解决这个问题后依照领导持续,编译装置胜利,版本是 2.23.0。
执行脚本
执行脚本的时候,呈现了谬误提醒:
grib_set: command not found grib_dump: command not found
但在后面装置的文件夹的 bin
目录下是找到了 grib_set 的执行文件。推断是没有注册到全局门路中。
查看 ecCodes 装置门路是否注册到全局门路中:
echo $PATH
这里碰到的问题是没有注册到全局门路中,设置形式可参考这里。
批改示例:
vim ./.bash_profile
进入到编辑模式后,增加上面的内容:
export ECCODE_HOME=/xx/xx/xx/xx/eccodesbuild/bin
export PATH=$PATH:$ECCODE_HOME
保留后,使其失效
source ./.bash_profile
想晓得是否失效了,试试指令 grib_set -h
,如果发现没有成果,有可能跟应用的 shell 端无关,可参看这里。
数据生成
脚本能够失常执行了,但生成的数据不对:
undefined:1
{“u”:,”v”:}
查看源库的 issues,外面也有人提这个问题,试了外面的一些办法,发现这个 pull 的批改能够失常的运行。于是就 fork 了一下把这个批改的内容弄过去了,改了些数据,见 XXHolic/webgl-wind。
数据含意
在 download.sh
脚本中,获取数据解析后,生成可读文件 tmp.json
,来看看这个文件中次要构造和局部数据:
{
"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
}
]
]
}
}
看到这些可能会有些纳闷,大气中的气流既有速度也有方向,在数学上能够用一个向量示意。在气象学中,如果晓得风的方向和大小,就能够失去示意风的向量,u 重量和 v 重量:
// ws 风力大小 θ 风在数学上的方向形容
u = ws * cos(θ)
v = ws * sin(θ)
更加具体的介绍见 Wind: u and v Components。
接着在 prepare.js
中应用到风数据中的 key
有:
Ni
示意在一条纬线上有多少个点,简略的说就是有多少列。Nj
示意在一条经线上有多少个点,简略的说就是有多少行。values
寄存重量所有的值。minimum
示意重量的最小值。maximum
示意重量的最大值。
其中 Ni
和 Nj
决定了生成图片的宽和高,风速大小映射对应色彩次要逻辑如下:
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
:应用了 pngjs 插件,色彩应用 RGBA 模式,数组中每间断的 4 个地位存储的是一个点的色彩值,所以i
变量要是 4 的倍数。k
:用于获取风速大小的索引,先看看 y=0 时,k 的取值变动先从 180 -> 359 递增,而后从 0 -> 179 递增,这样从两头开始取值,猜想是因为这个展现地图是二维的世界地图,返回的数据就是这样的对应规定。- 映射形式:以
maximum - minimum
作为基准,而后计算风速大小相对值values[k] - minimum
,两个值的比例乘以色彩重量最大值 255。
参考资料
- How I built a wind map with WebGL