cesium风场图【译】

2021-09-09 21:33:19 阅读：425 来源： 互联网

标签：自定义渲染网格 var Cesium 风场 cesium data

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部分

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

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

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

标签：自定义,渲染,网格,var,Cesium,风场,cesium,data
来源： https://www.cnblogs.com/hustshu/p/15248858.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

cesium风场图【译】

cesium风场图

怎么运行的

结论

致谢