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

2023-12-15 09:52

本文主要是介绍【超图】SuperMap iClient3D for WebGL/WebGPU ——暴雪,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

作者:taco

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


        先来看下效果

暴雪

1.修改天空盒子

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

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

	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的方法可以直接打开我们的场景。场景中包含了楼房,树木、道路及湖。

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:速度

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

viewer.scene.postProcessStages.snow.uniforms.density = 10;
viewer.scene.postProcessStages.snow.uniforms.angle = 0;
viewer.scene.postProcessStages.snow.uniforms.speed = 3;

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

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

	layer.setPBRMaterialFromJSON("./SampleData/pbr/MaterialJson/M_Brick_Clay_Old_.json");

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

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)

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

         

这篇关于【超图】SuperMap iClient3D for WebGL/WebGPU ——暴雪的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/496038

相关文章

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

SuperMap iManger 单个镜像更新流程

1. 下载镜像 docker pull registry.cn-beijing.aliyuncs.com/supermap/common-dashboard-api:11.1.1-240802-amd64 label 没区分架构,在 x64 环境 pull arm64 镜像 通过 --platform=arm64 参数可以实现 docker pull mariadb:10.5.26

Kubernetes 1.25 containerd 环境部署 SuperMap iManager

超图官网目提供的Kubernetes 版本为 1.20 版本,容器运行时为 docker 本次部署使用已有的 Kubernetes 1.25 版本集群,容器运行时为 containerd Kubernetes ,containerd 部署请自行了解,本次不做介绍,下面介绍在此环境上如何部署 iManager 11i 并创建云套件 1. 环境介绍 虚拟机 CPU 内存 操作系统 Ku

解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘,不能使用手机内置输入法的问题

整整花费了一天时间测试和解决。试验了多个方法,花了不少美刀,最终才发现抖音这个官方文档,哭了: https://partner.open-douyin.com/docs/resource/zh-CN/mini-game/develop/guide/game-engine/rd-to-SCgame/open-capacity/capability-adaptation/sc_webgl_keyboa

superMap mapboxgl初始化地图时,地图旋转api与设置地图中心api,同时进行无法完成实现效果

superMap mapboxgl初始化地图是,地图旋转api与设置地图中心api,同时进行无法完成实现效果 map = new mapboxgl.Map({center: [113.29840006822727, 23.395243424972175]})map.on("load", () => {map.rotateTo(-75)map.easeTo({center: [lng, lat]

superMap mapboxgl 跳转其他页面并改变浏览器窗口大小,在跳回地图页面,地图大小异常,变为300*400大小。

superMap mapboxgl 跳转其他页面并改变浏览器窗口大小,在跳回地图页面,地图大小异常,变为300*400大小。 window.addEventListener("resize", onResize)const onResize = () => {map.resize()}添加监听事件,调用地图api,resize()。

WebGL:二、ThreeJs 简介

在初步学习OpenGL 和 WebGL(基于 OpenGL ES) 之后,发现这两者都对初学者不够友好,繁多复杂的API,以及高深的建模原理矩阵运算,线代等大大提高了学习的门槛。 ThreeJs是对webGL提供的接口进行了良好的封装,简化了很多专业知识,学习成本明显降低。 以下,是用webGL绘制一个矩形的样例片段: (ps:我就画一个矩形,一下子就整这么多方法,这还算是

WebGL on iOS8 终于等到了这一天

WWDC2014刚结束,这次的大会是名符其实的开发者大会,更贴切的应该说的确是一次软件开发者的大会,对于OSX和iOS的更多功能特性让人兴奋,Swift新语言促成了如上图片 但我更感兴趣的是WebGL终于官方的在OSX和iOS上得到了支持,这篇《A first look at what iOS8 means for Phaser and Pixi.js》分享了在iOS下运行We

HTML5的WebGL实现的3D和2D拓扑树

在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观,一眼望去可以把整个树状结构数据看个大概,但是在弹力布局的作用下,其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了,那

基于HTML5的WebGL结合Box2DJS物理引擎应用

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,最终例子效果: http://hightopo.com/demo/box2djs/ht-box2d-demo.html