cesium风场图【译】

cesium风场图

以下大部分内容来源于 开源博客 的英文翻译，为自己以后查阅方便 。

这是Rayman Ng的特邀帖子，介绍了他基于CesiumJS构建的开源风向图。

风是研究天气和气候的重要元素，它以各种方式影响我们的日常生活。在许多领域，例如气候分析和风电场管理，分析风是至关重要的。可视化它对于能够快速了解​​测量设备收集的数值风数据至关重要。
已经有一些风力可视化应用程序，例如Earth Nullschool和Windy，但是不幸的是，似乎它们都无法显示地形，这对于估计特定位置的风力影响非常重要。

鉴于找不到适合我所有要求的现有可视化应用程序，我决定自己制作。我找到了Cesium，其中包含了几乎所有我需要的东西：3D地球和地形，Web Map Service图层显示以及功能强大的渲染引擎。
基本上，我只需要实现风可视化部分。您可以在浏览器中运行实时演示，或访问GitHub上的源代码。

图：Cesium使用Cesium World Terrain可以轻松可视化动态风数据

图：动态风覆盖在WMS风速层上

怎么运行的

可视化风的常用技术是使用粒子系统，该系统会将大量粒子放置在风场中，并根据风力定期更新其位置。运动粒子的踪迹可用于揭示风的流动模式。

最初，尝试使用Entity API绘制粒子轨迹，但是当放置超过10,000个粒子时，性能无法令人满意。经过一番调查后，意识到Entity API在CPU上执行计算，而对于超过10,000个粒子的计算对于CPU来说实在太多了。为了获得更好的性能，需要将计算移至GPU，但仍然必须渲染轨迹，这意味着必须使用低级Cesium Renderer模块。
在Cesium中，渲染过程的关键对象是Cesium.DrawCommand：它在渲染引擎中创建Cesium.Primitive，由调度Cesium.Scene并在渲染引擎中执行。
该Cesium.DrawCommand包含在渲染所需的一切，例如Cesium.Framebuffer，Cesium.Texture和Cesium.ShaderProgram。要执行自定义渲染，需要自定义DrawCommand。
要构建DrawCommand，第一初始化组件，其是ShaderProgram，Texture，Uniforms，和Framebuffer，一块一块，然后将它们结合在一起来创建DrawCommand对象。要将其注入DrawCommand渲染引擎，需要一个自定义的原始对象。它不需要实现的所有方法Cesium.Primitive，仅需要update isDestroyed，和destroy方法。在每次渲染开始之前将调用update方法。
至于在GPU（也称为GPGPU）上的计算，通过使用渲染到纹理的技术，类似于进行自定义渲染；只需将全屏四边形用作顶点着色器，然后将计算代码写入片段着色器即可。幸运的是，Cesium已经提供了渲染到纹理的功能-我所要做的只是简单地将片段着色器代码传递给Cesium.ComputeCommand并用于Cesium.ComputeEngine执行GPGPU。最后一步是将CustomPrimitive包含自定义的的添加DrawCommand到的PrimitiveCollection中Scene。

图：使用GPU可以计算这么多的粒子，因为否则太慢了，无法实时渲染。

下面是一个完整注释的示例，说明如何使用自定义绘制命令创建图元并将其添加到场景中。

class CustomPrimitive {
    constructor() {

        // most of the APIs in the renderer module are private,
        // so you may want to read the source code of Cesium to figure out how to initialize the below components,
        // or you can take my wind visualization code as a example (https://github.com/RaymanNg/3D-Wind-Field)
        var vertexArray = new Cesium.VertexArray(parameters);
        var primitiveType = Cesium.PrimitiveType.TRIANGLES // you can set it to other values
        var uniformMap = {
            uniformName: function() {
                // return the value corresponding to the name in the function
                // value can be a number, Cesium Cartesian vector, or Cesium.Texture
            }
        }
        var modelMatrix = new Cesium.Matrix4(parameters);
        var shaderProgram = new Cesium.ShaderProgram(parameters);
        var framebuffer = new Cesium.Framebuffer(parameters);
        var renderState = new Cesium.RenderState(parameters);
        var pass = Cesium.Pass.OPAQUE // if you want the command to be executed in other pass, set it to corresponding value


        this.commandToExecute = new Cesium.DrawCommand({
            owner: this,
            vertexArray: vertexArray,
            primitiveType: primitiveType,
            uniformMap: uniformMap,
            modelMatrix: modelMatrix,
            shaderProgram: shaderProgram,
            framebuffer: framebuffer,
            renderState: renderState,
            pass: pass
        });
    }

    update(frameState) {
        // if (!this.show) return;
        // if you do not want to show the CustomPrimitive, use return statement to bypass the update

        frameState.commandList.push(this.commandToExecute);
    }

    isDestroyed() {
        // return true or false to indicate whether the CustomPrimitive is destroyed
    }

    destroy() {
        // this method will be called when the CustomPrimitive is no longer used
    }}

// To begin the custom rendering, add the CustomPrimitive to the Scenevar viewer = new Cesium.Viewer('cesiumContainer');
var customPrimitive = new CustomPrimitive();
viewer.scene.primitives.add(customPrimitive);

结论

与Entity API相比，带有自定义绘制命令的Primitive API提供了较低级别的功能，可以实现更好的性能，但需要更多的编码工作。通过使用功能强大的渲染引擎，可以以令人满意的性能实现风的可视化，我相信还有许多其他方式可以使用此功能强大而通用的渲染引擎。例如，能够在不同的图像层之间切换非常有用，因此您可以在全局上下文中查看动态风数据，并轻松地将其与历史风数据进行比较。这在下面使用滑块显示。

致谢

我花了几个星期来编写此演示程序。如果没有以下帮助，它肯定会花更长的时间：铯论坛的专家，尤其是铯团队成员Omar Shehata。GitHub上Cesium自定义基元教程的作者，该教程提供了在Cesium中自定义渲染的代码示例

---

已验证以上分享出来的开源代码可以正常运行，转载到自己的git上留存。
cesium3D-Wind-Field

---

后面补充
风场数据的解析：
A) 风场数据部分的前半部分：
1.lon经度网格，范围是0~359.5，网间格距 0.5，网格数共720；
2.lat纬度网格，范围-90~90，网间格距 0.5 ，网格数共361 ；
3.lon、lat经纬度网格，总网格数量= data.lon.array.length * data.lat.array.length = 720 * 361 = 259920 ;
4.data.U.array.length = 259920 ， data.V.array.length = 259920 ,两者刚好一致的，也必须是一致的；
B) 风场数据部分的后半部分，网格数据data部分

1. data.U 和 data.V 都是按行存储的，data.U.array(index) , X经度lon =index%lonsize,Y纬度 lat=index/lonsize；
2. data.U 中记录了在正东方向的风速值，每个值对应网格上一个点。
3. data.V 中记录了在正北方向的风速值，每个值对应网格上一个点。
4. 最后渲染的时候，每个网格点上的正北方向、正东方向的风速值，需要对两个值向量加运算，即该点的风速向量。

此博客中的代码比较接近cesium和gpu底层,我现在的功力有些看不懂Cesium.DrawCommand自定义封装的部分，尤其是风场数据如何渲染，颜色如何更改变换，始终没看懂；说不定过几个月之后就懂了。

本文转自 https://www.jianshu.com/p/bff42183ce2c，如有侵权，请联系删除。