Cesium 场景设置~黑白、夜视和描边
效果图
功能说明
场景设置主要基于PostProcessStage方法进行设置,在Cesium中创建一个蒙版式的后期处理,
主要处理是根据Shader进行渲染,有点类似于Canvas的滤镜效果一般,对全屏进行处理。
所以场景设置实际为后期处理,全球雨雪雾天气,PostProcessStage方法无法做到局部。
需要局部下雨下雪可以参照官网的示例
核心代码
以下的代码,首先创建PostProcessStage对象。通过在PostProcessStage类中uniforms属性修改雨的倾斜度、大小和速度,就可以创建出所需要的PostProcessStage对象~雨天气
雨天气的场景设置
var tiltAngle = Cesium.defaultValue(options.tiltAngle, -0.6);
var rainSize = Cesium.defaultValue(options.rainSize, 0.3);
var rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
var rainStage = new Cesium.PostProcessStage({name: 'czm_rain',fragmentShader: "uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\n\uniform float tiltAngle;\n\uniform float rainSize;\n\uniform float rainSpeed;\n\float hash(float x) {\n\return fract(sin(x * 133.3) * 13.13);\n\}\n\void main(void) {\n\float time = czm_frameNumber / rainSpeed;\n\vec2 resolution = czm_viewport.zw;\n\vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\vec3 c = vec3(.6, .7, .8);\n\float a = tiltAngle;\n\float si = sin(a), co = cos(a);\n\uv *= mat2(co, -si, si, co);\n\uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\c *= v * b;\n\gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\}\n\";,uniforms: {tiltAngle: () => {return tiltAngle;},rainSize: () => {return rainSize;},rainSpeed: () => {return rainSpeed;}}});
viewer.scene.postProcessStages.add(rainStage);
雾天气的场景设置
var fogthicknessnum = 1.0;//可见度
var nowfragmentShader =`uniform sampler2D colorTexture;uniform sampler2D depthTexture;varying vec2 v_textureCoordinates;uniform float fognum;void main(void){vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);float depth = czm_readDepth(depthTexture, v_textureCoordinates);vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);float f=(depthcolor.r-0.22)/fognum;if(f<0.0) f=0.0;else if(f>1.0) f=1.0;gl_FragColor = mix(origcolor,fogcolor,f);}`;
var ProcessScenes = new Cesium.PostProcessStage({fragmentShader: nowfragmentShader,uniforms: {scale: 1.1,offset: function() {return new Cesium.Cartesian3(0.1, 0.2, 0.3);},fognum: () => {return fogthicknessnum;},},
})
viewer.scene.postProcessStages.add(ProcessScenes);
雪天气的场景设置
var snowSize = Cesium.defaultValue(snowopt.size, 0.02);
var snowSpeed = Cesium.defaultValue(snowopt.speed, 60.0);
var fragmentShader =`uniform sampler2D colorTexture;varying vec2 v_textureCoordinates;uniform float snowSpeed;uniform float snowSize;float snow(vec2 uv,float scale){float time=czm_frameNumber/snowSpeed;float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);return k*w;}void main(void){vec2 resolution=czm_viewport.zw;vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);vec3 finalColor=vec3(0);float c=0.;c+=snow(uv,30.)*.0;c+=snow(uv,20.)*.0;c+=snow(uv,15.)*.0;c+=snow(uv,10.);c+=snow(uv,8.);c+=snow(uv,6.);c+=snow(uv,5.);finalColor=(vec3(c));gl_FragColor=mix(texture2D(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);}`;
var ProcessScenes = new Cesium.PostProcessStage({fragmentShader: fragmentShader,uniforms: {snowSize: () => {return snowSize;},snowSpeed: () => {return snowSpeed;},},
})
viewer.scene.postProcessStages.add(ProcessScenes);
不足之处
该场景设置只能运用到全球,不能实现局部下雨
脚本下载
没有压缩,可以HTML文件,里面有黑白场景、夜视场景和描边场景。
https://download.csdn.net/download/qq_35984445/86031544
包含有添加天际线场景设置脚本
https://download.csdn.net/download/qq_35984445/86744804
Cesium 场景设置~黑白、夜视和描边相关推荐
- JMeter场景设置叙述
Jmeter场景设置叙述 JMeter的线程组设置里有一个调配器设置,用于设置该线程组下脚本执行的开始时间.结束时间.持续时间及启动延迟时间.当需要半夜执行性能测试时会用到这个功能. 设置调度器配置, ...
- JMeter场景设置与监控
随着IT技术的飞速发展和企业互联网+业务规模不断扩张,IT架构经历了以数据计算为核心的C/S架构.以聚焦业务功能及服务化构建应用的经典互联网架构和如今整合IT资源和按需使用的云计算架构三个阶段. 与之 ...
- LoadRunner场景设置里的各参数解释
1.Start Vuser ep1: Strat 100 Vusers :2 every 00:00:15(HH:MM:SS) 解释: 场景总共要跑100个虚拟用户,每15秒启动2个虚拟用户Vuser ...
- LoadRunner的场景设置
loadrunner场景设置的方法: 1.逐步增加用户数,分多次去运行场景.比如:第一次运行50并发,第二次运行100并发-- 2.针对同一个脚本设置多个组,使用组策略(点击Edit Schedule ...
- 云智慧压测实战分享之JMeter场景设置与监控
随着IT技术的飞速发展和企业互联网+业务规模不断扩张,IT架构经历了以数据计算为核心的C/S架构.以聚焦业务功能及服务化构建应用的经典互联网架构和如今整合IT资源和按需使用的云计算架构三个阶段. 与之 ...
- Cesium场景泛光
Cesium场景泛光 效果 效果 详情参见 Cesium实战项目
- cesium开发加油站1:cesium场景添加多边形贴地形或模型
cesium开发加油站1:cesium场景添加多边形贴地形或模型 前言 原代码 更改后代码 前言 本篇文章主要介绍ceisum场景中,用GroundPrimitive替换Primitive加载多边形时 ...
- adobe acrobat设置黑白打印
通常,文章总是采用黑白打印,打印出来的往往与电脑显示效果不同,为不必在打印店白跑一趟,可采用虚拟打印,随时预览"打印结果",下面是adobe acrobat设置黑白打印的方法: 选 ...
- 铁匠smith_铁匠的制作:场景设置,阴影,照明
铁匠smith In the previous blog posts in this series we have looked at the team that created The Blacks ...
- 翻金币游戏-大体介绍和资源文件,主场景,选择关卡场景设置
现在要开始实战做一个翻金币游戏,是这样的环境 一共二十关,金币一面金色,一面银色.翻一个会使周围四个一起翻转,目标是所有金币都是金色. 首先需要添加这些图片资源,方法不多说,主要是资源包括八张金币不同 ...
最新文章
- Orchard:如何生成Hello World模块
- jvm空间分配担保机制
- java 增量,Java增量运算符查询(++ i和i ++)
- 未来计划让儿子和他爷爷出国游一次
- 奇数求和(信息学奥赛一本通-T1065)
- ORACLE数据库自动备份压缩的批处理脚本 rar 7z
- 高可用Hadoop平台-Oozie工作流之Hadoop调度
- Function Maps: A Flexible Representation of Maps Between Shapes
- python3+Neo4j+flask,汽车行业知识图谱项目实战
- 项目记事【SpringMVC-1】:后台接收前端传来的JSON,并转成对象
- windows 7旗舰版升级windows 10专业版,全过程
- 图解OAuth 2.0协议族(一):授权码 auth code
- EXCEL常用函数汇总
- php 生成合同,万能合同文书自动生成软件系统
- 【一款好用的安卓投屏软件Androidscreen】
- CDBN卷积深度信念网
- python写android抢票软件,如何用python写一个简单的12306抢票软件
- mysql 删除临时表的语句_MySQL如何创建和删除临时表_MySQL
- 泰克MSO2014B|MSO2024B|MSO2022B混合信号示波器使用教程
- Multi-Task Video Captioning with Video and Entailment Generation阅读笔记
热门文章
- 大学论文的研究框架是什么?
- android 模拟器 锁屏,如何在模拟器中测试Android锁屏小部件?
- linux 桌面时间,桌面锁屏时钟下载-桌面锁屏时钟appv2.8.1-Linux公社
- 2013.07.10《播音主持之绕口令训练…
- c语言程序代码分享,一些简单的C语言程序代码(最新整理)
- IAR 软件激活步骤
- 51单片机2个按钮逻辑设计http://www.51hei.com/bbs/forum.php?mod=viewthreadtid=165521page=1#pid720113
- 2021李宏毅机器学习、深度学习笔记
- 使用Python基于BibTeX引用格式自动生成文献的IEEE引用格式
- 从学习2021美赛O奖论文到获得2022美赛M奖——论文精读经验分享