【超图】SuperMap iClient3D for WebGL/WebGPU ——暴雪

作者:taco

时隔多年北京又开始降下了特大暴雪。身为打工人的你有没有居家办公呢?反正小编我是没有。既然没有借着暴雪的功劳居家办公,那就接着雪来输出一篇博客好了。基于SuperMap iClient3D for WebGL/WebGPU 实现暴雪仿真效果。


先来看下效果

暴雪

1.修改天空盒子

看看北京这天气,雾霾霾的。为了与真实场景去匹配可定去修改一下天空盒子让他也变成一个阴天。

天空盒子使用了SkyBox的方法直接加载本地资源的图片。资源图片分辨率没有过多的限制,但是由于外包围盒子是一个正方体的盒子,所以这里尽量保证边长一样分辨率长乘宽也保持一致。初始化好后我们直接将cloudyBox赋予scene.skyBox即可。

javascript 复制代码
	var cloudyBox = new SuperMap3D.SkyBox({
					sources: {
						positiveX: './images/SkyBox/cloudy/Right.jpg',
						negativeX: './images/SkyBox/cloudy/Left.jpg',
						positiveY: './images/SkyBox/cloudy/Front.jpg',
						negativeY: './images/SkyBox/cloudy/Back.jpg',
						positiveZ: './images/SkyBox/cloudy/Up.jpg',
						negativeZ: './images/SkyBox/cloudy/Down.jpg'
					}
				});
				cloudyBox.show = true;
				scene.skyBox = cloudyBox;

2.场景

光有雪没有下的地方也不行的啊,此时我们加载我们的模型至场景中。使用scene.open的方法可以直接打开我们的场景。场景中包含了楼房,树木、道路及湖。

javascript 复制代码
scene.open("http://www.supermapol.com/realspace/services/3D-CBD-2/rest/realspace");

场景加载完成后我们开启下雪接口即可。雪使用的viewer.scene.postProcessStages.snow 这个方法去创建雪,主要应用的是PostProcessStage这个类去创建的特效。将物体进行一个描边。这里相关的api文档并没有,我们根据提供的方法进行说明一下。我们通过打印viewer.scene.postProcessStages.snow发现

density:密度

angle:角度

测试发现当角度的数值在0-2内都是向下飘落的雪花,如果是大于等于2则会向上飘走

speed:速度

修改速度的话,雪花的碎片会有明显的增多,但是与实际降落的速度还是有偏差的。

javascript 复制代码
viewer.scene.postProcessStages.snow.uniforms.density = 10;
viewer.scene.postProcessStages.snow.uniforms.angle = 0;
viewer.scene.postProcessStages.snow.uniforms.speed = 3;

上述操作只会影响到屏幕前的雪花特效的效果,并不会让地面上铺满雪花。那如何操作才能让地上铺满雪花呢。

这里采用的是给图层赋予pbr。

javascript 复制代码
	layer.setPBRMaterialFromJSON("./SampleData/pbr/MaterialJson/M_Brick_Clay_Old_.json");

在去使用定时函数去更改pbr属性中PBRMaterialParam中的pbrMetallicRoughness.snowEffect降雪影响。如果想要修改地表变化的速度可以适当更改snow_coverage增加的大小。或者setInterval的速度。

javascript 复制代码
let intervalValue = setInterval(() => {
if (layer._PBRMaterialParams.pbrMetallicRoughness.snowEffect !== undefined) {
layer._PBRMaterialParams.pbrMetallicRoughness.snowEffect.snow_coverage += 0.0006;
}
if (layer._PBRMaterialParams.pbrMetallicRoughness.snowEffect !== undefined &&
layer._PBRMaterialParams.pbrMetallicRoughness.snowEffect.snow_coverage - 1 > 0)
clearInterval(intervalValue);
}, 30)

这样我们就完成了降雪的操作!还不快来试试!

相关推荐
长风清留扬28 分钟前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
m0_7482478043 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
joan_852 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特2 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
一个处女座的程序猿O(∩_∩)O5 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.11 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖12 小时前
[react]searchParams转普通对象
开发语言·前端·javascript