这两天重新接触到流场，于是研究下，在大牛们的轮子上也算实现了效果：
1二维
2三维
主要参考以下三篇文章：
《WebGL风向图》给出制作风向图通常步骤：
1. 在屏幕上生成一系列随机粒子位置并绘制粒子。
2. 对于每一个粒子，查询风数据以获得其当前位置的粒子速度，并相应地移动它。
3. 将一小部分粒子重置为一个随机的位置。这就确保了风从不会变成空的区域。
4. 淡出当前屏幕，并在顶部绘制新定位的粒子。
风场数据获取：
博客里提到：美国国家气象局每隔6个小时就会以纬度/经度网格(包括风速)的形式，发布全球的气象数据，即GFS。它以一种特殊的二进制格式编码，称为GRIB，它可以用一组特殊的工具解析成人类可读的JSON。
这里原文作者提供了shell语言的数据下载脚本：
#!/bin/bash
GFS_DATE="20161120"
GFS_TIME="00"; # 00, 06,
12, 18
RES="1p00" # 0p25, 0p50 or
1p00
BBOX="leftlon=0&rightlon=360&toplat=90&bottomlat=-90"
LEVEL="lev_10_m_above_ground=on"
GFS_URL="http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_${RES}.pl?file=gfs.t${GFS_TIME}z.pgrb2.${RES}.f000&${LEVEL}&${BBOX}&dir=/gfs.${GFS_DATE}${GFS_TIME}"
curl
"${GFS_URL}&var_UGRD=on" -o utmp.grib
curl
"${GFS_URL}&var_VGRD=on" -o vtmp.grib
grib_set -r -s
packingType=grid_simple utmp.grib utmp.grib
grib_set -r -s
packingType=grid_simple vtmp.grib vtmp.grib
printf "{"u":`grib_dump
-j utmp.grib`,"v":`grib_dump -j vtmp.grib`}" >
tmp.json
rm utmp.grib
vtmp.grib
DIR=`dirname
$0`
node ${DIR}/prepare.js
${1}/${GFS_DATE}${GFS_TIME}
rm
tmp.json
奈何我这种小白无法理解了，不知如何使用。
在网上找到转换为json格式后的数据文件：
{
"header":{
"discipline":0,
"disciplineName":"Meteorological products",
"gribEdition":2,
"gribLength":73286,
"center":7,
"centerName":"US National Weather Service -
NCEP(WMC)",
"subcenter":2,
"refTime":"2018-06-25T00:00:00.000Z",
"significanceOfRT":1,
"significanceOfRTName":"Start of forecast",
"productStatus":0,
"productStatusName":"Operational products",
"productType":3,
"productTypeName":"Control Forecast products",
"productDefinitionTemplate":1,
"productDefinitionTemplateName":"Individual ensemble forecast at a
point in time",
"parameterCategory":2,
"parameterCategoryName":"Momentum",
"parameterNumber":2,
"parameterNumberName":"U-component_of_wind",
"parameterUnit":"m.s-1",
"genProcessType":4,
"genProcessTypeName":"Ensemble Forecast",
"forecastTime":0,
"surface1Type":103,
"surface1TypeName":"Specified height level above
ground",
"surface1Value":10.0,
"surface2Type":255,
"surface2TypeName":"Missing",
"surface2Value":0.0,
"gridDefinitionTemplate":0,
"gridDefinitionTemplateName":"Latitude_Longitude",
"numberPoints":65160,
"shape":6,
"shapeName":"Earth spherical with radius of 6,371,229.0
m",
"gridUnits":"degrees",
"resolution":48,
"winds":"true",
"scanMode":0,
"nx":360,
"ny":181,
"basicAngle":0,
"subDivisions":0,
"lo1":0.0,
"la1":90.0,
"lo2":359.0,
"la2":-90.0,
"dx":1.0,
"dy":1.0
},
"data":[
-5.76,
……]}
包括头文件和风场数据。
最近把渲染优化，可以添加更多粒子数：
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，代码交流小伙伴在公众号发消息，我会一一回复的。
)
