风场可视化：绘制粒子

引子

了解风场数据之后，接着去看如何绘制粒子。

• 源库：webgl-wind

• Origin

• My GitHub

绘制地图粒子

查看源库，发现单独有一个 Canvas 绘制地图，获取的世界地图海岸线坐标，主要格式如下：

{
   
  "type": "FeatureCollection",
  "features": [
    {
   
      "type": "Feature",
      "properties": {
   
        "scalerank": 1,
        "featureclass": "Coastline"
      },
      "geometry": {
   
        "type": "LineString",
        "coordinates": [
          [
              -163.7128956777287,
              -78.59566741324154
          ],
          // 数据省略
        ]
      }
    },
    // 数据省略
  ]
}

这些坐标对应的点连起来就可以形成整体的轮廓，主要逻辑如下：

  // 省略
  for (let i = 0; i < len; i++) {
   
    const coordinates = data[i].geometry.coordinates || [];
    const coordinatesNum = coordinates.length;
    for (let j = 0; j < coordinatesNum; j++) {
   
      context[j ? "lineTo" : "moveTo"](
        ((coordinates[j][0] + 180) * node.width) / 360,
        ((-coordinates[j][1] + 90) * node.height) / 180
      );
  }
  // 省略

按照 Canvas 实际的宽高度，与生成的风场图片宽高按比例映射。

绘制地图的单独逻辑示例见这里。

绘制风粒子

查看源库，单独有一个 Canvas 绘制风粒子。看源码的时候，发现其中的逻辑涉及较多状态，计划先单独弄明白绘制静态粒子的逻辑。

静态风粒子效果见示例。

先理一下实现的主要思路：

• 风速映射到像素颜色编码的 R 和 G 分量，由此生成了图片 W 。
• 创建显示用的颜色数据，并存放到纹理 T1 中。
• 根据粒子数，创建存储粒子索引的数据并缓冲。还创建每个粒子相关信息的数据，并存放到纹理