cesium
关注
分享
扫一扫
A873054267
这个作者很懒，什么都没留下…
展开
-
cesium for unreal源码编译学习(一)
对于n年没碰过C++，unreal也不怎么熟悉的人来说，编译操作一脸懵逼，但还是想弄清楚编译过程中在做啥，所以耐着性子慢慢查了下；编译的步骤官方仓库readme有，但不够详细本文参照 用源码编译Cesium for Unreal - 知乎一文做；...原创 2022-03-07 09:59:42 · 2345 阅读 · 0 评论 -
cesium渲染半透明物体无效
先看神庙的测试对比图正常webgl渲染半透明物体需要执行OIT但是查看model.js中的isTranslucent 值为false，scene.js中的PASS.Translucent drawcommond.length=0，可以肯定的是该物体未走OIT渲染；实际上cesium源码在处理半透明物体时，会通过alpha测试丢弃掉小于阈值的片元，我所用的工程集成了three.js的pbr源码，源码中需要宏定义ALPHATEST才会生效导致cesium一直无法正..原创 2022-01-05 17:23:00 · 1958 阅读 · 0 评论 -
下载cesium ION资源
有两种方式，一种是遍历全量下载另一种是根据已经请求到的下载需要在Cesium3DTile.prototype.requestContent函数中将请求到的arrabuffer下载function downloadFile(name,blob){ const url = window.URL.createObjectURL(new Blob([blob])) const link = document.createElement('a') link.style.display = '原创 2022-01-04 15:23:20 · 1499 阅读 · 1 评论 -
./cesium/source/thirdparty/zip.js 6365:57
cesium185之后使用webpack启动会报modul parse failed:unexpected token错误解决方法在webpackmodules中增加对worker的解析逻辑package.json中增加配置并安装 "@open-wc/webpack-import-meta-loader": "0.4.7"原创 2021-12-09 11:54:52 · 424 阅读 · 0 评论 -
cesium 自定义地形 heightmap无法获取最大层级高层
使用该函数 sampleTerrainMostDetailed(terrainProvider, positions)，只能获取第一级高层。官方地形服务使用的是STK地形QuantizedMeshTerrainData会为节点创建子节点，sampleTerrainMostDetailed时，会向下寻找最高精度的地形瓦片，但是高度图没有，导致该函数不生效，整理源码发现STK接收terrain数据buffer的逻辑太过复杂，使用sampleTerrain，获取指定层级的高程更加简单。im...原创 2021-10-12 11:42:46 · 1189 阅读 · 0 评论 -
cesium drillPick实现原理
首先谈谈webgl的pick实现原理：即给每一个渲染的物体绑定一个唯一的id，在内存中这个是很容易做到，但是GPU只有渲染的图像，没有像内存一样的东西（这也是为何调试shader只能通过颜色来判断）因此要绑定这个id，则需要用相应的颜色来记录这个id，颜色的表示方法为rgba(1,1,1,1)，每个分量的取值范围为0-255，因此cesium可记录的最大的pickid entity限制为256*256*256*256 =2的32次方，刚好是一个Uint32的记录长度。_nextPickColor会依次递原创 2021-03-31 17:08:54 · 1627 阅读 · 0 评论 -
webgl导出视频，cesium导出为视频
主要是基于MediaStreamRecorder来实现https://github.com/streamproc/MediaStreamRecordervar MediaStreamRecorder = require('msr');const chunks = new Set()let mediaRecordfunction createRecord () { const mediaStream = viewer.canvas.captureStream(10) // 设置帧频率原创 2020-09-22 16:23:49 · 1947 阅读 · 1 评论 -
cesium内置shader变量说明
尝试将shadertoy的效果搬到cesium上面来，但shadertoy有许多内置变量，因此开一篇博客记录一下cesium中内置的变量，会慢慢更新1 v_textureCoordinates：片元坐标，已经归一化了，在渲染后处理中会遇到...原创 2020-06-11 19:16:21 · 3055 阅读 · 1 评论 -
cesium贴图-旋转图片,着色器方式
源代码参照https://mp.weixin.qq.com/s?__biz=MzU1ODcyMjEwOA==&mid=2247484016&idx=1&sn=4566516a8a9d4d6abf170d5987db2a9c&chksm=fc237f23cb54f635e81424197a77cbd08fa64f21c86838866dac9c2b9a80e61e...原创 2020-01-13 10:33:21 · 4303 阅读 · 2 评论 -
cesium加载离线地图
其实跟二维里面没什么区别，讲道理就是一个东西，二维地图的服务和三维地图的服务是一样的，原理和操作步骤可参见https://blog.youkuaiyun.com/A873054267/article/details/87616504加载的代码就很简单了var arcgis_blue = viewer.scene.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url:'./gma原创 2020-07-15 17:16:32 · 1185 阅读 · 0 评论 -
cesium蓝色立方体 -建筑物
主要依靠于贴图，使用的图片 //已成功 var arrowMaterial = new Cesium.Material.fromType('Image', { image : './building.png', //image : './03.png', repeat : { x : -1, y : 1 } }); let instance = new C原创 2020-07-02 10:32:07 · 2132 阅读 · 2 评论 -
将shadertoy的效果移植到cesium中
采用后处理方式接口作为shader的入口原效果地址https://www.shadertoy.com/view/MdlXz8最终实现代码，参照前几篇博文就可以顺利做出来了。原文的分辨率是自己获取的，初学就直接写死了 let viewer = new Cesium.Viewer('cesiumContainer',{ imageryProvider:new Cesium.WebMapTileServiceImageryProvider({ u原创 2020-06-12 10:53:43 · 3735 阅读 · 2 评论 -
cesium 路径漫游
之前写过相似的轨迹回放，按路径飞行demo的理解，但与实际数据结合起来的时候还是花了一些时间。且之前的数据是已经处理成满足cesium要求的格式的了，实际上很多时候并不是，因此重新来梳理如何实现这个效果先看数据格式拿到这样的json之后，我们需要将时间与postion成对的存入property中然后赋值给模型的position属性即可。那么拿到这样的数据，首先对时间进行处理...原创 2020-05-07 16:41:55 · 5856 阅读 · 5 评论 -
cesium 点云渲染探索二
跟踪代码可以发现，cesium中的绘图操作在drawCommand中；顶点着色器：attribute vec3 a_position; varying vec4 v_color; uniform vec4 u_pointSizeAndTimeAndGeometricErrorAndDepthMultiplier; uniform vec4 u_constantColor; u...原创 2020-04-17 17:24:30 · 2890 阅读 · 2 评论 -
cesium 点云渲染探索一
由于公司本身的点云数据已经是经过切片索引的，不需要通过中间过程处理；因此考虑改造ceisum原生的渲染点云函数；在此之前就得先理解原来的点云是如何渲染的；追踪代码逻辑，可以发现点云的嵌套调用逻辑如上图所示；输入参数为tileset.json，真正获取索引子级文件中的数据在fetchArrayBuffer函数中；然后再完成加载。上图是构造逻辑；但真正渲染到屏幕上的是另一个逻辑顺序...原创 2020-04-15 17:40:38 · 3230 阅读 · 0 评论 -
cesium 泛光 bloom效果
实际上核心就是获取bloom对几个属性值进行设置 let viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: mapbox, contextOptions: { webgl: { ...原创 2020-04-07 15:58:35 · 7422 阅读 · 3 评论 -
cesium着色器学习系列7- PostProcessStage渲染 后处理，以圆形扩散为例
网上有很多效果都是基于后处理来实现的如bloom，雷达扫描，圆形扩散等；尽管前期学习了一些关于着色器的知识，但是要直接上手写代码还是比较困难实际上，理解的都比较困难因此在痛苦的折磨之后，终于算是摸清了一点点门道。下面这篇文章对于与PostProcessStage做出了解释，文中的每一句话我都懂，但最后读代码就不懂了。https://www.cnblogs.com/webgl-a...原创 2020-04-07 15:40:53 · 10676 阅读 · 3 评论 -
cesium着色器学习系列6- scene的render函数 渲染调度
render函数是cesium最核心的模块。scene.js中的Scene.prototype.render 3316行参照法克鸡丝大神的博客，文中讲到的updateAndExecuteCommands 和scene.globe.endFrame函数https://www.cnblogs.com/fuckgiser/p/5744509.html前者负责调度，后者负责执行渲染。调度...原创 2020-03-30 18:01:34 · 2990 阅读 · 0 评论 -
cesium着色器学习系列5- 最长的一帧入口 理解
cesium大神法克鸡丝在最长的一帧中讲到过，cesium的起始入口点在startRenderLoop 函数中。当时看的时候就觉得有点懵，现在有时间理了一下执行逻辑。可见的入口函数一定是new Cesium.viewer()那么是如何执行到render函数的呢view.js中第一步：第二步：第三步：调用startrenderloop第四步：调用wi...原创 2020-03-27 18:30:02 · 1369 阅读 · 0 评论 -
cesium着色器学习系列3-着色器方式绘制图元
通过前两篇文章的研究，那么就可以基于着色器写自己的图元实现逻辑了 let viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcg...原创 2020-03-27 14:33:33 · 5171 阅读 · 1 评论 -
cesium着色器学习系列2-Appearance对象
先查阅APItranslucent Boolean true optionalWhentrue, the geometry is expected to appear translucent soAppearance#renderStatehas alpha blending enabled. closed Boolean false opt...原创 2020-03-27 14:30:08 · 4196 阅读 · 1 评论 -
cesium着色器学习系列1-Geometry对象
参照网页的一些demo可知，primitive就是对geometry的二次封装。primitive需要指定geometryInstance属性和appearance属性，因此脱离entity和primitive来实现图元的渲染，则需要构造geometry和appearance。首先来看geometry，查阅API可知有四个属性attributes GeometryAttribut...原创 2020-03-27 10:55:15 · 3217 阅读 · 0 评论 -
cesium计算两次视角范围之差
计划是用来根据新增的范围来请求数据，但是发现，如果是N次视角变化之后，此前请求过的数据又会识别为未请求，因此暂时放弃这种方式来计算，虽然目前没什么用，也记录一下吧；其中黄色部分为新增视角范围；红色为当前视角范围，蓝色为上次视角范围 var initCesium = new InitCesium(); var viewer = initCesium.initViewer(...原创 2020-03-13 18:12:13 · 831 阅读 · 0 评论 -
cesium-动态编辑primitive探索 ( 六) -模块化
前期已完成可编辑primitive的初步探索，现在将其模块化，源码已上传至npmnpm ieditable-primitive实现效果圆形效果：矩形线段：线的第一个点不知道怎么掉了（后续看看）现存问题：1 目前事件的监听在每一个primitive对象中；如果大量的对象，会造成内存的浪费，后续再完成大部分primitive的编辑原则后计划整合到一个j...原创 2020-02-06 11:30:22 · 1417 阅读 · 0 评论 -
cesium修改PerInstanceColorAppearance 构造生成的primitive颜色
参见：https://blog.youkuaiyun.com/A873054267/article/details/104059241由此方法可以得知，其实很多cesium的对象没有set方法，而有get方法，可以通过get到了之后，再尝试set...原创 2020-01-21 10:37:12 · 1769 阅读 · 0 评论 -
cesium-PolylineGeometry 使用PerInstanceColorAppearance 无效
该问题已经反馈给cesium官方；看看官方怎么回复吧；issue地址：https://github.com/AnalyticalGraphicsInc/cesium/issues/8556目前使用SimplePolylineGeometry 来构造instance可以（现知的问题是，线条的宽度无法更改了；了解了一下webgl中绘制有宽度的线的原理，看起来PolylineGeome...原创 2020-01-21 10:23:36 · 4402 阅读 · 2 评论 -
cesium-动态编辑primitive探索 ( 五) API实现方式
实际上这种方式为粗暴的移除重新添加。对于单个primitive来说，没有卡顿现象，可以考虑以此种方式来进行；下一步计划看看entity的property回调如何来实现let layer=new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/re...原创 2020-01-20 16:58:47 · 1881 阅读 · 0 评论 -
cesium动态水面
原文：https://blog.youkuaiyun.com/qq_31709249/article/details/81303291使用图片实现效果：实现原理：primitive面+水面材质由此demo可以学习到一种动态材质的制作方法uniform参数说明：原文有许多冗余代码，去掉方便看到核心//河道关键点数组var River1Point =[ ...原创 2020-01-19 10:48:21 · 3209 阅读 · 0 评论 -
cesium-动态编辑primitive探索 ( 四) 动态圆柱体
有了前面的经验，再同理做出可拉伸的圆柱体就很轻松了。缺陷在于：1 目前只能编辑高度，没有区分三个bill的功能；实际上也不难，下一版就可以修改好了；2 bill没有随着圆柱的上升而变动3 拉伸的高度计算有点问题，后续再解决js代码function changeLinePrimitive(options) { let {semiMajorAxis,sem...原创 2020-01-18 17:49:15 · 5258 阅读 · 5 评论 -
cesium-动态编辑primitive探索 ( 三)
在昨日基础之上改进之后可以进行正常的编辑了，目前相较于原始的逻辑，缺少点的添加逻辑和删除逻辑；删除逻辑相对容易，添加的逻辑还需进行研究，因为原始不是每次拉动都会在两点的中间添加一个新的点。相对上一版本，将处理逻辑放在left_down中。，构造primititive的js文件没有做任何修改；此外，有一个问题是，每次刷新时，浏览器会异常卡。这也是后续需要解决的一个问题。(解决方法是，在获...原创 2020-01-18 15:47:08 · 3572 阅读 · 0 评论 -
cesium-动态编辑primitive探索 ( 二)
磕磕绊绊，终于完成了动态可修改的第一版，但存在的问题还很多js部分function changeLinePrimitive(options) { this.positions=options.positions}changeLinePrimitive.prototype.getGeometry = function () { return new Cesiu...原创 2020-01-17 18:18:14 · 3487 阅读 · 2 评论 -
cesium-动态编辑primitive探索 ( 一)
调试了一天，终于搞清楚了核心原理：即扩展一个primitive类，实现一个函数update当这个类加入到primitive中时，cesium底层会自动调用update函数进行渲染。当动态primitive实现了之后，剩下的只需要与鼠标事件结合起来就可以搞定动态编辑primitive了实现效果：全部测试代码:function changeLinePrimitive...原创 2020-01-17 17:33:39 · 7567 阅读 · 6 评论 -
cesium-获取构造primitive的坐标/geometry
由于cesium的机制，为了节约内存，会将构造的geometry销毁，因此在生成时，需要将此选项关闭才能在渲染后取得坐标。即将该属性设置为false，releaseGeometryInstances:false,let pr=new Cesium.Primitive({ geometryInstances : new Cesium.GeometryInstance({ ...原创 2020-01-15 18:34:00 · 3460 阅读 · 0 评论 -
cesium-动效弹窗- （三）div部分
首先脱离框架来实现该效果css文件html,body{ width:100%; height: 100%;}.ysc-dynamic-layer{ /*重要*/ display: none; user-select: none; /*禁止选中*/ pointer-events: none; /*鼠标穿透*/ /*重要*/ ...原创 2020-01-15 15:27:31 · 3029 阅读 · 0 评论 -
cesium-动效弹窗- （二）动态entity
1 动态entity的效果之前在简书上就已经见过，但还未实际操作过，结合该例正好学习；property的使用说明https://www.jianshu.com/p/f0b47997224cbox有一些特殊之处，其坐标高度要指定立方体的中间高度，因为立方体在进行伸长时，是两端同时伸长那么要设置的代码即为其中间位置不断更改。dimensions也随高度不断更改当达到最大高度时，停...原创 2020-01-15 11:09:47 · 1931 阅读 · 0 评论 -
cesium-动效弹窗- （一）环形旋转实现
源码参照https://www.wellyyss.cn/ysCesium/views/index.html最终效果图首先实现底部环形旋转实现原理为添加一个圆，用一张只有一段的环形图作为其材质，通过回调函数，不断重置纹理坐标的旋转角度即可。所用图片：完整代码：//取消双击事件viewer.cesiumWidget.screenSpaceEventHandle...原创 2020-01-15 10:33:55 · 3419 阅读 · 1 评论 -
cesium-动态添加entity闪白材质
此问题出现在entity需要贴图时，由于cesium在生成entity时会默认指定白色材质，在entity生成完成之后才开始贴图逻辑，因此导致，每次鼠标点击生成entity时，有一个闪白的效果要解决这个问题有两种思路，一种是，当entity材质贴完之后再进行显示，当然要准确做到这一点需要修改cesium底层简单一点，我们可以设置定时器来控制entity的显示即可。一种方式：var...原创 2020-01-15 10:29:43 · 3633 阅读 · 1 评论 -
cesium添加环形扩散圆，动态扩散
1 首先实现添加一个圆的逻辑let entity= viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(103.0, 40.0), name: 'Red ellipse on surface with outline', ellipse: { semiMinorAxis: 250000.0, ...原创 2020-01-14 11:32:44 · 7943 阅读 · 2 评论 -
cesium贴图-旋转图片-API方式
方法1：//图片目录必须在静态文件夹下，否则会被打包导致找不到，无贴图效果var image="../../../../static/arrow/"+key+".png"//var image = '../img/arrow/'+key+".png";// 设置x,y的正负值，可完成图片的正反面交替var arrowMaterial = new Cesium.Material.fr...原创 2020-01-13 10:37:26 · 3246 阅读 · 0 评论 -
地图结合echarts
1 最近在学习cesium，发现无论哪种地图都少不了要结合echarts。echarts极出名的迁徙图在地图中也经常用到。，但是往往换了一个地图框架，我就不知道怎么用了，因此打算深究一下原理；https://github.com/FreeGIS/Ol3-Echarts做法是在map容器里面追加一个div，用于echarts渲染利用map对象将地理坐标转换为屏幕坐标，在设定echa...原创 2020-01-09 10:20:15 · 1669 阅读 · 1 评论