Cesium-通过Shader添加圆形扩散效果

实验效果
代码
- 自定义GLSL代码
- 外部调用
总结
参考链接

实验效果

代码

自定义GLSL代码

const DynamicCircle = `
uniform sampler2D colorTexture;    //颜色纹理
uniform sampler2D depthTexture;    //深度纹理
varying vec2 v_textureCoordinates; //纹理坐标
uniform vec4 u_scanCenterEC;       //扫描中心
uniform vec3 u_scanPlaneNormalEC;  //扫描平面法向量
uniform float u_radius;            //扫描半径
uniform vec4 u_scanColor;          //扫描颜色// 根据二维向量和深度值 计算距离camera的向量
vec4 toEye(in vec2 uv, in float depth) {vec2 xy = vec2((uv.x * 2.0 - 1.0), (uv.y * 2.0 - 1.0));// 看看源码中关于此函数的解释是，cesium系统自动生成的4*4的反投影变换矩阵// 从clip坐标转为眼睛坐标，clip坐标是指顶点着色器的坐标系统gl_position输出的vec4 posInCamera = czm_inverseProjection * vec4(xy, depth, 1.0);posInCamera = posInCamera / posInCamera.w; //将视角坐标除深度分量return posInCamera;
}// 点在平面上的投影，输入参数为 平面法向量，平面起始点，测试点
vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point) {// 计算测试点与平面起始点的向量vec3 v01 = point - planeOrigin;// 平面法向量与 测试点与平面上的点 点积  点积的几何意义，b在a上的投影长度，// 即v01在平面法向量上的长度float d = dot(planeNormal, v01);// planeNormal * d 即为v01在平面法向量上的投影向量// 根据三角形向量相加为0的原则 即可得点在平面上的投影return (point - planeNormal * d);
}// 获取深度值，根据纹理坐标获取深度值
float getDepth(in vec4 depth) {float z_window = czm_unpackDepth(depth);  //源码解释将一个vec4向量还原到0，1内的一个数z_window = czm_reverseLogDepth(z_window); // czm_reverseLogDepth解开深度float n_range = czm_depthRange.near;      //float f_range = czm_depthRange.far;return (2.0 * z_window - n_range - f_range) / (f_range - n_range);
}void main() {gl_FragColor = texture2D(colorTexture, v_textureCoordinates);          //片元颜色float depth = getDepth(texture2D(depthTexture, v_textureCoordinates)); //根据纹理获取深度值vec4 viewPos = toEye(v_textureCoordinates, depth);                     //根据纹理坐标和深度值获取视点坐标// 点在平面上的投影，平面法向量，平面中心，视点坐标vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);// 计算投影坐标到视点中心的距离float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);// 如果在扫描半径内，则重新赋值片元颜色if (dis < u_radius) {// 计算与扫描中心的距离并归一化float f = dis / u_radius;// 原博客如下，实际上可简化为上式子// float f = 1.0 -abs(u_radius - dis) / u_radius;// 四次方f = pow(f, 2.0);// mix(x, y, a): x, y的线性混叠， x(1-a)  y*a;,// 效果解释：在越接近扫描中心时，f越小，则片元的颜色越接近原来的，相反则越红gl_FragColor = mix(gl_FragColor, u_scanColor, f);}
}
`export function createDynamicCircleStage(viewer, Cesium, cartographicCenter, maxRadius, scanColor, duration) {// 中心点var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);// 中心点垂直高度上升500m的坐标点，目的是为了计算平面的法向量var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);// 当前时间var _time = (new Date()).getTime();// 转换成相机参考系后的中心点，上升高度后的中心点以及平面法向量var _scratchCartesian4Center = new Cesium.Cartesian4();var _scratchCartesian4Center1 = new Cesium.Cartesian4();var _scratchCartesian3Normal = new Cesium.Cartesian3();// 自定义PostProcessStagevar dynamicCircle = new Cesium.PostProcessStage({fragmentShader: DynamicCircle,uniforms: {// 将中心点坐标转化到相机参考系u_scanCenterEC: function () {return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);},// 计算相机参考系下的平面法向量u_scanPlaneNormalEC: function () {var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);_scratchCartesian3Normal.x = temp1.x - temp.x;_scratchCartesian3Normal.y = temp1.y - temp.y;_scratchCartesian3Normal.z = temp1.z - temp.z;Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);return _scratchCartesian3Normal;},// 动态半径u_radius: function () {return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;},u_scanColor: scanColor}});return dynamicCircle;
}

外部调用

var lng = 117.90365282568267
var lat = 40.16773126252592
var cartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(lng), Cesium.Math.toRadians(lat), 0)
var scanColor = new Cesium.Color(1.0, 0.0, 0.0, 1)
// 创建自定义的 PostProcessStage
var dynamicCircle = createDynamicCircleStage(viewer, Cesium, cartographicCenter, 1500, scanColor, 4000)
// 添加进场景
viewer.scene.postProcessStages.add(dynamicCircle)

总结

实现该效果的原理就是：判断片元与圆心的距离是否大于半径，如果小于半径，则更改该片元的颜色，否则使用原来的片元颜色。

我们看到的是一个圆形，实际上，该圆形也是由若干个片元构成的~

如果您觉得这篇文章对您有帮助，欢迎给我的 github项目点一个⭐ ο(=•ω＜=)ρ⌒☆

参考链接

cesium着色器学习系列7- PostProcessStage渲染后处理，以圆形扩散为例

Cesium-通过Shader添加圆形扩散效果相关推荐

Cesium-通过Shader添加雨雪天气效果
前言实验效果代码自定义GLSL代码外部调用总结参考链接前言作为一个三维地球,在场景中来点雨雪效果,貌似可以增加一点真实感.Cesium 官网 Demo 中有天气系统的实例,用的是 Ce ...
小程序wifi圆形扩散效果
小程序wifi圆形动态扩散效果代码实现 wifstatus.wxml wifstatus.wxss @import "-/-/style/weui.wxss"; .imagecs ...
arcgis飞行轨迹动画_高德地图，百度地图，arcgis地图利用canvas动画绘制圆形扩散、运动轨迹等动态效果...
本文转发自热爱前端知识的博客原博客地址介绍在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原 ...
纯CSS实现地图标记光圈扩散效果
给地图上定位的多个点添加光圈扩散效果,光圈由小变大,颜色由深色过渡到浅色. 效果图 html代码 <div class="map-bg"><p class=&qu ...
android水波纹加光圈扩散效果,swift UIView优雅的添加点击事件 android Material Design 水波纹扩散效果...
效果图: image 使用方式 UIView,UIImageView,UIButton 一样 let mView = MView() //是否开启水波纹效果,默认开启 mView.rippleEnab ...
android 清空canvas部分内容_Android自定义View实现圆形头像效果
在我们的APP中通常会遇到,展示圆形头像的需求,一般通过Glide就能实现,但是让我们做一个圆形头像,如果让我们自定义实现这种效果,该怎样做呢? 好,接下来本文通过三种方式来实现这种效果! 注意:这是 ...
android自定义控件几种,Android 自定义View一个控件搞定多种水波纹涟漪扩散效果 - CSDN博客...
效果图实现思路这个效果实现起来并不难,重要的是思路此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化根据上面的样式,可以看出此View需要满足以下变化圆圈从中心可循环向外扩散 ...
用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
canvas 擦除动画_用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

Cesium-通过Shader添加圆形扩散效果

实验效果

代码

自定义GLSL代码

外部调用

总结

参考链接

Cesium-通过Shader添加圆形扩散效果相关推荐

最新文章

热门文章