這兩天重新接觸到流場，于是研究下，在大牛們的輪子上也算實現了效果：
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，代碼交流小伙伴在公眾號發消息，我會一一回復的。
)
