前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之前有部分订阅者咨询我,关于cesium动态纹理的例子,刚好之前我有在网上搜索过别人的共享例子,在这里整理一下,具体实现大家可以各自去github那下载源码demo下来,细节研究看看. cesium流动纹理-线cesium流动纹理-线github源码 cesium流动纹理-围墙github源码 ces…

内容比较多,完整看完需要大概10分钟,废话不多说,撸起袖子,加油干!!! 1.前言 按照套路,先介绍一下什么是Cesium. Cesium ['siːzɪəm]是JavaScript开源库,通过Cesium,实现无插件的创建三维球和二维地图.它是通过WebGL技术实现图形的硬件加速,并且跨平台,跨浏览器,并提供动态数据的可视化展现. 在本示例代码中,cesium有两个版本,分别为1.37和1.43.其中cesium1.37是早些时间在1.37版本随便写的几个示例没有系统性,cesium1.43是…

前几篇博客我们了解了自定义点.线.面绘制,这篇我们接着学习cesium自定义纹理贴图.我们完成点线面的绘制,只是绘制出了对象的框架,没有逼真的外观.逼真外观是需要设置材质来实现:Material . 再次查看appearance对象:   image.png 属性里面的material就是设置对象的材质,查看material:   image.png 我们发现,cesium提供很多材质接口,如果要自定义设置纹理贴图,我们使用fabric接口定义自己材质. 首先看cesium给出的demo:  …

本文代码基于Vue-cli4和使用WebGL的地图引擎Cesium,主要内容为三维场景下不同对象的动态材质构建. 参考了很多文章,链接附在文末. 为不同的几何对象添加动态材质 不知道这一小节的名称概况是否准确,在我的理解中Cesium中的集合实体分成两类:Primitive和Entity,一般翻译成图元和实体,图元更接近底层,实体是封装后的高级对象,使用更加简便,这里不对使用场景进行分析,但会介绍如果为这两种集合对象添加材质. 使用Primitive生成泛光墙 一般来说,Primitive的使用…

今天来看看GroundPrimitive,选择GroundPrimitive有三个目的:1 了解GroundPrimitive和Primitive的区别和关系 2 createGeometry的特殊处理 3 如何通过阴影体的方式实现贴地效果. GroundPrimitive.prototype.update 可以认为GroundPrimitive是Primitive的扩展,通过Update我们可以很好的理解这个过程: GroundPrimitive.prototype.update = func…

通过之前的Material和Entity介绍,不知道你有没有发现,当我们需要添加一个rectangle时,有两种方式可供选择,我们可以直接添加到Scene的PrimitiveCollection,也可以构造一个Entity,添加到Viewer的EntityCollection中,代码如下: // 直接构造Primitive,添加 rectangle = scene.primitives.add(new Cesium.Primitive({ geometryInstances : new Cesi…

如果把地球比做一个人,地形就相当于这个人的骨骼,而影像就相当于这个人的外表了.之前的几个系列,我们全面的介绍了Cesium的地形内容,详见: Cesium原理篇:1最长的一帧之渲染调度 Cesium原理篇:2最长的一帧之网格划分 Cesium原理篇:3最长的一帧之地形(1) Cesium原理篇:3最长的一帧之地形(2:高度图) Cesium原理篇:3最长的一帧之地形(3:STK) Cesium原理篇:3最长的一帧之地形(4:重采样) 有了前面的"骨骼",下面我们详细介绍一下影像篇的调度…

       这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维护地形切片的相关逻辑:接着,在requestTileGeometry中,TileTerrain会请求对应该切片的地形数据.如果读者对这部分有疑问的话,可以阅读<Cesium原理篇:1最长的一帧之渲染调度>:最后,如果你是采用的高度图的地形服务,地形数据对应的是HeightmapTerrainDat…

刚刚结束完地球切片的渲染调度后,打算介绍一下目前大家都很关注的3D Tiles方面的内容,但发现要讲3D Tiles,或者充分理解它,需要对DataSource,Primitive要有基础,而这要求对最底层的渲染模块,也就是Render有一个了解,真的是书到用时方恨少的代入感,索性从头到尾的说清楚.所以,下面几篇(估算四篇)先把Render模块介绍清楚. Render,顾名思义就是渲染模块,在Cesium中,所有的对象,都是通过Render模块完成最终调用WebGL的渲染过程.换句话说,Rend…

Texture也是WebGL中重要的概念,使用起来也很简单.但有句话叫大道至简,如果真的想要用好纹理,里面的水其实也是很深的.下面我们来一探究竟. 下面是WebGL中创建一个纹理的最简过程: var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl"); // 创建纹理句柄 var texture = gl.createTexture(); // 填充纹理内容…