Cesuim中线的波动纹理

HTML格式

  var viewer=ysc.createNormalCesium("cesiumContainer",{});var data= {flowing:true,height:100000,//抛物线最大高度flowImage:"img/colors.png",center:{id:0,lon: 114.302312702, lat: 30.598026044,size:20,color:Cesium.Color.PURPLE,},points: [{ id:1,"lon": 115.028495718, "lat": 30.200814617,color:Cesium.Color.YELLOW,size:15},{ id:2,"lon": 110.795000473, "lat": 32.638540762,color:Cesium.Color.RED,size:15},{ id:3,"lon": 111.267729446, "lat": 30.698151246,color:Cesium.Color.BLUE,size:15},{ id:4,"lon": 112.126643144, "lat": 32.058588576,color:Cesium.Color.GREEN,size:15},{ id:5,"lon": 114.885884938, "lat": 30.395401912,color:Cesium.Color.BLUE,size:15},{ id:6,"lon": 112.190419415, "lat": 31.043949588,color:Cesium.Color.BLUE,size:15},{ id:7,"lon": 113.903569642, "lat": 30.932054050,color:Cesium.Color.BLUE,size:15},{ id:8,"lon": 112.226648859, "lat": 30.367904255,color:Cesium.Color.BLUE,size:15},{ id:9,"lon": 114.861716770, "lat": 30.468634833,color:Cesium.Color.BLUE,size:15},{ id:10,"lon": 114.317846048, "lat": 29.848946148,color:Cesium.Color.BLUE,size:15},{ id:11,"lon": 113.371985426, "lat": 31.704988330,color:Cesium.Color.BLUE,size:15},{ id:12,"lon": 109.468884533, "lat": 30.289012191,color:Cesium.Color.BLUE,size:15},{ id:13,"lon": 113.414585069, "lat": 30.368350431,color:Cesium.Color.SALMON,size:15},{ id:14,"lon": 112.892742589, "lat": 30.409306203,color:Cesium.Color.WHITE,size:15},{ id:15,"lon": 113.160853710, "lat": 30.667483468,color:Cesium.Color.SALMON,size:15},{ id:16,"lon": 110.670643354,"lat":31.748540780,color:Cesium.Color.PINK,size:15}],options:{name:'yscNoNeedEntity',polyline: {width:2,//线宽度material:[Cesium.Color.GREEN,3000],//混合颜色、(红绿混合透明后 就是黄色了)3000秒发射间隔,单纯材质无法展示飞行动态。}}}ysc.creatFlyLinesAndPoints(viewer,data,function (id,lon,lat) {console.log(id)});

关于js部分的代码分为几个部分
第一个部分，数据的引入，绘出点的位置

 function creatFlyLinesAndPoints(viewer,initData,callback) {viewer.scene.globe.depthTestAgainstTerrain =false; // 设置该属性为true之后，标绘将位于地形的顶部；如果设为false（默认值），那么标绘将位于平面上。缺陷：开启该属性有可能在切换图层时会引发标绘消失的bug。viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); //取消双击事件 ，双击的话，会视角直接切到该实体，且无法拖拽//创建线creatParabola(viewer,initData);//创建点var center = initData.center;var cities =initData.points;/*   ***********  这个可以修改成其他实体  *********** **///中心点viewer.entities.add({id:center.id,position: Cesium.Cartesian3.fromDegrees(center.lon, center.lat, 0),point: {pixelSize:center.size,color: center.color,}});//散点for (var i = 0; i < cities.length; i++) {viewer.entities.add({id: cities[i].id,position: Cesium.Cartesian3.fromDegrees(cities[i].lon, cities[i].lat, 1),point: {pixelSize: cities[i].size,color:cities[i].color}});}/*   ***********  这个可以修改成其他实体  *********** **/leftCilck(viewer,callback);}

第二部分，点的已经绘制完成，接下来就是线的绘制问题；

    function creatParabola(viewer,data) {var material = null;var center=data.center;//起始点var cities=data.points;//可以为多组哦！if(data.flowing==true){if (material != null) { } else {initPolylineTrailLinkMaterialProperty(data);var str1=data.options.polyline.material[0];var str2=data.options.polyline.material[1];data.options.polyline.material=new Cesium.PolylineTrailLinkMaterialProperty(str1,str2);}}for (var j = 0; j < cities.length; j++) {var points = parabolaEquation({ pt1: center, pt2: cities[j], height: data.height, num: 100 });var pointArr = [];for (var i = 0; i < points.length; i++) {pointArr.push(points[i][0],points[i][1],points[i][2]);}data.options.polyline.positions=Cesium.Cartesian3.fromDegreesArrayHeights(pointArr);viewer.entities.add(data.options);}}

其中关于抛物线的计算公式封装成parabolaEquation；

 //抛物线方程function parabolaEquation(options, resultOut) {//方程 y=-(4h/L^2)*x^2+h h:顶点高度 L：横纵间距较大者var h = options.height && options.height > 5000 ? options.height : 5000;var L = Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat) ? Math.abs(options.pt1.lon - options.pt2.lon) : Math.abs(options.pt1.lat - options.pt2.lat);var num = options.num && options.num > 50 ? options.num : 50;var result = [];var dlt = L / num;if (Math.abs(options.pt1.lon - options.pt2.lon) > Math.abs(options.pt1.lat - options.pt2.lat)) {//以lon为基准var delLat = (options.pt2.lat - options.pt1.lat) / num;if (options.pt1.lon - options.pt2.lon > 0) {dlt = -dlt;}for (var i = 0; i < num; i++) {var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);var lon = options.pt1.lon + dlt * i;var lat = options.pt1.lat + delLat * i;result.push([lon, lat, tempH]);}} else {//以lat为基准var delLon = (options.pt2.lon - options.pt1.lon) / num;if (options.pt1.lat - options.pt2.lat > 0) {dlt = -dlt;}for (var i = 0; i < num; i++) {var tempH = h - Math.pow((-0.5 * L + Math.abs(dlt) * i), 2) * 4 * h / Math.pow(L, 2);var lon = options.pt1.lon + delLon * i;var lat = options.pt1.lat + dlt * i;result.push([lon, lat, tempH]);}}if (resultOut != undefined) {resultOut = result;}return result;}

点和线都绘制完成，接下来就是动态特效的渲染问题，这里把动态特效封装到这个函数中initPolylineTrailLinkMaterialProperty

function initPolylineTrailLinkMaterialProperty(data){function PolylineTrailLinkMaterialProperty(color, duration) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined;this.color = color;this.duration = duration;this._time = (new Date()).getTime();}Cesium.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {isConstant: {get: function () {return false;}},definitionChanged: {get: function () {return this._definitionChanged;}},color: Cesium.createPropertyDescriptor('color')});PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {return 'PolylineTrailLink';}PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);result.image = Cesium.Material.PolylineTrailLinkImage;result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;return result;}PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {return this === other ||(other instanceof PolylineTrailLinkMaterialProperty &&Property.equals(this._color, other._color))};Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';Cesium.Material.PolylineTrailLinkImage = data.flowImage;//图片Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\{\n\czm_material material = czm_getDefaultMaterial(materialInput);\n\vec2 st = materialInput.st;\n\vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\material.alpha = colorImage.a * color.a;\n\material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\return material;\n\}";// material.alpha:透明度;material.diffuse：颜色;Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {fabric: {type: Cesium.Material.PolylineTrailLinkType,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),image: Cesium.Material.PolylineTrailLinkImage,time: 0},source: Cesium.Material.PolylineTrailLinkSource},translucent: function (material) {return true;}});}

Cesuim中线的波动纹理相关推荐

OpenGL（十九）——Qt OpenGL波动纹理(旗子的飘动效果)
OpenGL(十九)--Qt OpenGL波动纹理(旗子的飘动效果) 一.场景在日常的项目中,我们经常会实现波动的一些纹理效果,比如飘动的旗子,水的波纹,地图上某一点的波浪圈圈等...,本篇介绍波动 ...
WebGL 水波及焦散（刻蚀）的渲染总结
本文作者:木的树关于小区域水波渲染以及焦散的技术原理,推荐下面两篇资源: https://github.com/martinRenou/threejs-caustics https://zhuanl ...
Qt OpenGL（二十）——Qt OpenGL 核心模式版本
Qt OpenGL(二十)--Qt OpenGL 核心模式版本一.写在前面在之前的OpenGL教程(1~19)中,采用的方式都是固定渲染管线,也就是OpenGL3.2版本之前的写法,但是OpenG ...
OpenGL（十八）——Qt OpenGL绘制一个3D世界
OpenGL(十八)--Qt OpenGL绘制一个3D世界一.说明本篇介绍构建一个3D的世界. 二.简介加载3D世界,并在其中漫游: 在这一课中,你将学会如何加载3D世界,并在3D世界中漫游. ...
股票投资--中线篇(转)
中线篇 1.趋势法则这里的趋势指的是大盘或者个股运行的走向.大家都知道上升趋势中容易获利,下降趋势中容易亏损.对于投资者来说,把握住了趋势等于看对了方向,投资也就事半功倍.如何判断趋势?一般有很多思 ...
GPU Gems1 - 7 无数波动草叶的渲染
本文部分参照该文章https://zhuanlan.zhihu.com/p/35974789 1.引言本章介绍了一种灵活的,广泛应用的草模拟.该方案渲染的草不仅生长得自然,也能够逼真地在风中舞动,而 ...
柏林噪声实践水与火,顶点纹理拾取
在上文中,会发现,调用3维柏林实现海水的波动效果,实在是难为CPU了,在这里,我们用着色器Cg语言来把相关计算过程移到GPU,看下效果. 先说下,原来纹理我们拿来只限于给模型着色,而在现代GPGPU中 ...
计算机图形学与opengl C++版学习笔记第5章纹理贴图
目录 5.1 加载纹理图像文件 5.2 纹理坐标 5.3 创建纹理对象 5.4 构建纹理坐标 5.5 将纹理坐标载入缓冲区 5.6 在着色器中使用纹理:采样器变量和纹理单元 5.7 纹理贴图:示例程序 ...
Qt OpenGL 旗帜效果（飘动的纹理）
这次教程中,我将教大家如何创建一个飘动的旗帜.我们所要创建的旗帜,说白了就是一个以正弦波方式运动的纹理映射图像.虽然不会很难,但效果确实很不错,希望大家能喜欢.当然这次教程是基于第06课的,希望大家确 ...

Cesuim中线的波动纹理

Cesuim中线的波动纹理

Cesuim中线的波动纹理相关推荐

最新文章

热门文章