本文目录一览:
- 1、Cesiumjs可以加载倾斜摄影的OSGB数据吗
- 2、Cesium 3Dtiles模型多边形裁剪简单整理
- 3、Cesium的扩展工具包-EarthSDK使用指南1
- 4、影像加载篇:WebMapTileServiceImageryProvider
- 5、cesium 和 Three.js有什么区别,以及二者与WebGL 的关系
Cesiumjs可以加载倾斜摄影的OSGB数据吗
可以!
不过不是加载原始的OSGB格式的数据,必须经过转换(OSGB2B3DM.exe),转换后为b3dm格式,是cesium支持的切片模型加载的格式。
--------------------cesium加载b3dm代码------
var model=_teemo_scene.primitives.add(new Cesium.Cesium3DTileset({
id: o.id,
url: o.url,
maximumMemoryUsage:1024,//内存使用最大量
skipLevelOfDetail : true,//↓↓↓LOD优化项↓↓↓
baseScreenSpaceError : 1024,
skipScreenSpaceErrorFactor : 16,
skipLevels : 1,
immediatelyLoadDesiredLevelOfDetail : false,
loadSiblings : false,
cullWithChildrenBounds : true
}));
Cesium 3Dtiles模型多边形裁剪简单整理
快三年了,在写了四篇文章,关于Cesium的基本都是水一下,不是不想写,一是没时间,二来确实比较懒,关于Cesium已经一年多没有看过了,最多也就关注一下官网的更新内容,对于Cesium深入了解还真没有下功夫。
最近公司业务调整,手头的业务也停掉了,只剩下维护了,也没有继续待着的意义了,趁着换工作的空,整理一下以前抄过、请教过、写过的一些东西吧,不确定能写多少,就简单记录一下吧。
Ceisum本身有一个clipPlane可以进行裁剪,但是不支持多边形裁剪,想要支持多边形裁剪也要费一番功夫。
多边形裁剪的主要原理:
一、构造裁剪多边形;
二、将构造多边形的定点归化到模型局部坐标系,并获取模型Rectangle,记录并传递给片元着色器;
三、将多边形渲染到到一张构造的纹理上,给多边形一个绘制的颜色,并将纹理赋值给片元着色器;
四、在顶点着色器中把从attribute获取到的定点传递给片元着色器,如
gl_Position = czm_projection*u_modelViewMatrix* viewPos; //投影矩阵*模型视图矩阵*顶点坐标
中的viewPos.xyz;
五、在片元着色器中,根据(四)中传递过来的顶点,判定该顶点是否在(二)中的rectangle中,若在,则计算该顶点在(三)中纹理的uv坐标,用texture2D(texture,uv)获取当前顶点的color值,若不为空,则继续,若为空则discard并返回。
通过以上步骤就可以实现以多边形为边界的模型裁剪。
Cesium的扩展工具包-EarthSDK使用指南1
Cesium作为三维GIS和BIM应用的主力引擎,目前已经受到越来越多的开发者的青睐。这两年笔者也一直做Cesium相关的开发工作,真切地感受到Cesium的强大,其丰富的API、丰富的示例为开发三维GIS/BIM应用提供了极大的便利。
为了进一步丰富Cesium的开发生态,我们把之前在Cesium基础上开发的功能,以及大量的改良功能,封装成若干个独立的js包。这样也避免开发者重复造轮子。对于大屏展示、C端替代等直接本地部署Cesium的应用场景,可以直接免费使用我们封装的EarthSDK扩展包。
EarthSDK中主要包括XbsjEarth.js和XbsjCesium.js两个js包。
XbsjCesium.js用来扩展Cesium所不具备的三维可视化功能,例如视频融合、分析工具、模型压平等。
XbsjEarth.js则主要目标在于封装出更加易于使用的API接口,尽可能屏蔽掉前端开发工程师所不熟悉的图形学、GIS相关内容。会在Cesium的基础上封装好一些复杂的交互操作,并提供极其简单的API接口方便调用。
EarthSDK从前端开发者的角度考虑设计API,大部分类的属性都是响应式设计,通过简单操作即可监控相应的属性变化,通过bind方便可以实现属性的相互绑定。特别针对Vue的开发者,实现了和vue的响应式属性的无缝融合。具体可以参考这篇文章的介绍: 三维应用的响应式设计探索 。
之前使用过ECharts的同学可能对ECharts的操作简单印象深刻。ECharts相当于把大量的API转成配置式,真正使用时,只需要通过setOptions来进行一个大JSON对象的配置,即可完成图表的创建。
EarthSDK的API设计也是受ECharts的启发,会尽量减少不需要的API,减轻开发者的记忆负担。只需要通过一个大JSON配置,就可以完成整个场景的搭建。
而且,EarthSDK比ECharts更进一步,可以直接修改相应的属性,即可完成三维场景的动态变化。而ECharts则需要不停地调用setOption来进行配置。以后的文章中会详细说明此特性。
EarthSDK创建场景后,内置viewer和scene对象,用户可以通过viewer或者scene来向场景中添加Cesium的原生对象,和调用所有原生的Cesium API函数。
为了更易于理解EarthSDK的使用,我们开发了一个样例程序 XbsjEarthUI(这个程序也同时集成到了CesiumLab中)。此样例程序已经开源放在Github和Gitee上,基于MIT协议,用户可以任意修改。
XbsjEarthUI在github上的地址:
XbsjEarthUI在gitee上的地址:
EarthSDK可以加载百度地图、高德地图等三十多种地图数据,并可以做到实时纠偏。
交通安防领域需要用到的视频监控、视频融合功能。可以将视频映射到倾斜摄影、BIM模型上(3dtiles模型),视频会覆盖到非平面物体上,不会出现闪烁等现象。
针对模型位置、姿态进行编辑。方便进行多个模型数据组合使用。并且这里的模型位置编辑可以很方便的在全球任意位置拖放。
结合CesiumLab数据生产,使用EarthSDK调整数据后期亮度,可以做出较好的特效。方便进行大屏展示。
可以指定模型数据显示在某一个视口,方便进行方案对比等操作。
Cesium的地面本身不能做到透明显示,我们进行改进,使得透明度可以实时调节。
动态实现视域分析效果。
可以对路径进行编辑,编辑好的路径,可以用于控制相机的漫游,也可以控制物体的移动。
对原始Cesium的标签效果进行改进,并可以使用类似html5标签增加onClick属性,来自动执行自定义操作。
影像加载篇:WebMapTileServiceImageryProvider
WebMapTileServiceImageryProvider是用来加载Web Map Tile Service (WMTS) 服务,下面简要说明下WMTS服务吧。
WMTS 1.0.0 支持三种实现模型:
WMTS 1.0.0 定义了 GetCapabilities、GetTile、GetFeatureInfo 3个操作
可以结合图2和图3,理解每个参数的意思,对接的需要注意 tileMatrixLabels 和 tilingScheme
其他参数:
1.clock以及time:可参考Cesium官方示例
2.rectangle:默认全球范围,可根据能力文档里面的BoundingBox进行设置
cesium 和 Three.js有什么区别,以及二者与WebGL 的关系
二者都是基于WebGL技术开发的js库
Threejs受众面比较广,是封装了webgl的一些底层用法,让初学者更容易上手;例如绘制一个立方体,使用webgl原生api可能要写50行代码,包括构建坐标点,顶点组织、着色器等信息;在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api),只是做了更大粒度的封装
Cesium受众面相对较小,是Gis相关的,也是基于WebGL开发的,它主要是三维地球相关的js库,可以展示二维地图服务(百度高德)、倾斜摄影模型;还可以在上面做一些三维分析,可以参考