首页 > 其他分享 >Cesium实例化绘制(Instanced Drawing)

Cesium实例化绘制(Instanced Drawing)

时间:2023-04-05 17:11:20浏览次数:53  
标签:自定义 Instanced 接口 entity cesium 实例 Cesium 绘制 Drawing

上篇《WebGL-实例化绘制》我们学习了实例化webgl底层实现原理,基于webgl1.0标准的扩展。这篇博客我们来了解下cesium引擎是如何支持实例化功能的。该篇公众号主要参考了博客:《Cesium原理篇:6 Render模块(6: Instance实例化)》。

假如有这样的需求:有四个不同颜色的点,它们的相对位置(模型坐标)固定,现在要求在不同地面(世界坐标)绘制这四个点。例如下图中的在10个不同位置各绘制出四个点:图略。

四个点相对位置:图略。

在cesium引擎中如何实现呢?

方式一: 通过entity接口逐个点绘制由于cesium封装的entity接口没有现成的这样的几何形状的接口,我们只能逐个点计算出世界坐标再绘制。或者可以自己封装一个这样几何形状的entity接口。

方式二: 自定义实现一个一次绘制四个点primitive接口,然后调用10次大部分人可能考虑到entity接口的效率低,自定义primitive接口来实现一次绘制这样的四个点。这样的话如果绘制更多次的话(10W+)绘制效率可能仍然满足不了。

方式三: 自定义primitive接口,在一个drawcommand命令下绘制所需所有点可能有人更近一步,何不在一个drawcommand命令下绘制所有点呢?这样做当然效率最高,如果没有实例化这个功能,这也是目前最高效最方便的方式。但是有了实例化功能我们大可不必这样,因为这需要计算每个点世界坐标(坐标转换)。再者,如果图形稍微复杂则需要构建索引,那么计算整体顶点的索引也是一个棘手的工作。

方式四:实例化

可以看到,cesium底层对实例化做了很好的封装,而且考虑到了webgl版本兼容性。

接下来我们用cesium引擎以实例化的方式实现上述例子,至于VBO、VAO、ShaderProgram、uniformMap、DrawCommand等cesium接口这里不详细叙述,因为每个都是cesium的要点,需要精力去熟悉。

标签:自定义,Instanced,接口,entity,cesium,实例,Cesium,绘制,Drawing
From: https://www.cnblogs.com/2008nmj/p/17289846.html

相关文章

  • OGRE中的Entity与InstancedGeometry
    OGRE中的Entity很常用,InstancedGeometry却少有介绍。在我的开发过程中。遇到了这样的问题。我用Entity来做地表块。其中需要对某些地表块的顶点进行修改。但当我修改一个Entity时,会发现所以使用此Mesh的Entity的顶点都受到修改。 后来经过查OGRESDK源码及各种例子发现Entity在使用......
  • System.Drawing跨平台问题
     一、问题描述项目报出了如下错误:  二、问题分析后端项目部署在Linux系统,有一个接口涉及到数据流转图片,部分代码如下:Imageimage=Image.FromStream(stream);......
  • [Algorithm] Dynamic programming - 01 - Drawing 2-d matrix
    Problem:LevenshteinDistanceWriteafunctionthattakesintwostringsandreturnstheminimumnumberofeditoperationsthatneedtobeperformedonthefir......
  • Cesium:entity闪烁(点、面以及billboard)
    entity的闪烁主要是通过回调函数CallbackProperty,控制样式改变或是否显示1.点的闪烁functionf2(){ varx=1; varflog=true; viewer.entities.add({ name:"圆点p......
  • Cesium 与 Babylon.js 可视化 glsl 特效篇(十八)
    我决定不从Babylonjs基础来讲了直接整合cesium与babylonjs可视化来讲我整合一个类库后续不断更新中npmi@haibalai/cesium-babylonjs初始化cesium-babylonjs类库,map......
  • cesium导航
    推荐:将 ​​NSDT场景编辑器​​ 加入你的3D开发工具链今天看到GoogleEarth上的导航栏,想起百度地图,高德地图,leaflet(插件)等等好像都有提供导航条,但是cesium官方包里面......
  • Cesium官方教程——Fabric
    1、简介Fabric是Cesium中定义的描述材质Material的JSON结构体。Material代表了一个物体的外观。材质Material可以是比较简单的,比如直接将一张图片赋予表面,或者使用条......
  • Cesium贴地线和不贴底线
    贴地线:entity和primitive。entity只需要clampToGround为true。Primitive方式贴地,需要使用GroundPolylinePrimitive和GroundPolylineGeometry来创建Primitive与Geometry对......
  • Cesium 与 Babylon.js 可视化 glsl 特效篇(四十三)
    我决定不从Babylonjs基础来讲了直接整合cesium与babylonjs可视化来讲我整合一个类库后续不断更新中npmi@haibalai/cesium-babylonjs 初始化cesium-babylonjs......
  • Cesium近地天空盒,解决图片旋转问题
    前言当我们使用官网的例子设置天空盒后,会发现天空云彩是斜的,比如下边这张图:通过查阅网上资料,需要修改cesium的源码,以下是修改后skybox的源码,在自己的项目中引入即可:实......