Drawsee从底层自研    专注性能和渲染效果    

Drawsee发布4.3.0,支持Maplibre style渲染

矢量切片  New

Drawsee矢量切片技术重磅升级,直接支持Maplibre style,渲染效果获得跨越式提升,成为支撑省级“三维一张图”应用的强力WebGIS平台。 详细内容见技术文章  加载Maplibre style地图到三维地球


原生API:通过map对象支持Maplibre原生API,控制图层显隐和绘制参数

自动贴地:标注和线条自动高速实时贴合地形以及倾斜摄影

自动避让:交互操作时,标注实时自动避让,合理安排信息密度


全球三维地图:矢量切片数据源来自maptiler,style配置为适合卫星影像背景的模式


矢量切片


>>矢量切片全球三维地图演示


流场粒子

大量的微小粒子,通过流场网格改变速度和方向,运动轨迹直观表现出流动效果。在WebGPU模式,可以并发计算每个粒子的运动,使得粒子密度和渲染性能, 远远超过线性计算的gl模式,差距达到10倍以上。


性能:5万+粒子60FPS实时绘制,入门级1030显卡,使用率低于5%

密度:缩放场景时自动调节远近粒子密度,运动细节精确展示

渲染:通过颜色表,混合模式配置,控制不同的渲染效果

数据:加载标准风场Json,或者自定义网格

贴地:shader高速计算贴地高度


请看典型的风场和降雨汇流演示


全球风场 山地降雨

>>全球风场演示 >>降雨汇流演示



作为对比,gl模式下,js主线程和显卡都接近满负荷运转      >>全球风场演示(gl版)


倾斜摄影

Drawsee vs Cesium:  县城级倾斜摄影,飞行对比测试。结束后可手工操作浏览

数据各自独立:首次访问,最考验流式下载能力;再次访问,浏览器缓存会加速

提示:Drawsee使用鼠标右键旋转视角。触屏滑动屏幕右边和底边旋转视角


城市倾斜摄影


>>Drawsee WebGPU版                         >>Cesium浏览(耐心30秒)

>>Drawsee gl版 对比测试


性能测试:这个级倾斜摄影演示,非常适合于观察WebGPU的性能提升效果

⇨  打开Windows任务管理器,切换到性能一栏,观察GPU使用率,注意不是CPU

⇨  如果要认真对比,需要等到加载了相当的精细数据之后,否则开始的小量数据不能说明问题

⇨  对比路线飞行、旋转、静止渲染不同工况的GPU使用率

⇨  以GeForce 1030为例,gl版约30%,则WebGPU版,飞行时大约会在15%, 旋转稳定时低至6%,静止时低至4%。gl版则无法低于30%,这就是峰值4-6倍速度差异的涵义;场景内显示的数据不同时,绝对值会有波动,但上述比率基本保持

⇨  WebGPU版在漫游拖拽时,由于渲染能力足够富裕,浏览过的数据,保持流畅的高清显示

⇨  至于Cesium,根据显示内容的不同,大约会在40-80%之间,经常还会卡顿一下

➤  这5倍的性能差距,还不算额外渲染的三维地球和洪水下雨仿真。相当于Drawsee用中等的GeForce 1060,就能打平Cesium使用顶级的3080

另,如果您的显卡很高端,网络版演示小数据测不出差别,请用您自己的海量数据做本地测试。如1060, 就可以在测试程序中把Drawsee.Setting.LodRatio设置为2.0,提高数据分辨率

Bim

由于光影效果需要用到大量的动态Texture,Chrome WebGPU支持不够稳定,所以还是由gl版担当主力


材质插件:轻松编写shader,控制对象显示效果

昼夜交替:提供内置night暗光系统,自动控制灯光启停

阳光系统:太阳和和阴影渲染,天空云彩。充分优化,海量数据毫无压力

暗光系统:主要针对室内点光源,动态多点阴影,对系统要求稍高

树状结构:完全保持Fbx数据中定义的树状逻辑结构,可单独选取、高亮、显隐模型结点;使用名称路径查询

高压缩比:通过共享纹理等技术,数据大幅度压缩到原Fbx二进制数据的20%以下,海量数据也能在互联网流畅使用

相机操作:当接近物体观察时,无缝切换第一人称视角,类似3dsmax。滚轮以鼠标指取位置精确放大,+-号微调; 前进后退方向键控制自由飞行,配合鼠标左键拖动、右键激发旋转,可在任意位置和视角观察复杂工业设备

行走模式:使用W键切换,地表行走,碰撞检测。只适合Bim图层和倾斜摄影


县级城市演示,所有大街小巷,店铺门面都有精细贴图、门牌号码俱全,如同亲临逛街,清晰度远胜倾斜摄影

渲染效果:观察日出、日落不同时间点、各种天气状况下的效果


bim bim


>>光影城市演示         Cesium完全做不出来的光影效果


3dtiles用于Bim为什么数据量大?原因是缺少全局共享材质的概念:几十栋楼,侧墙、楼顶、窗户贴图都一样,但是在不同的数据块里需要重复拷贝几十次。 i3dm仅适合完全相同模型,很少用到

体积云

体积云能够明显改善天空视效,技术体系相当复杂。经过若干版本的优化,最常用的低云量天空,Drawsee已经达到较好的渲染效果。 下面六幅小图,三张是照片,三张是Drawsee生成,你能一眼看出吗?看答案


体积云比较


Drawsee作为轻量化Web平台,设计目标是简单易用、效果中等。目前的方式是使用Perlin-Worley基本噪声纹理,随机组合变形,可生成数万种不同的云场景。 云的形状变化较多,但符合个人审美的空间分布和搭配,还得看手气。

通过开发员工具可以获得场景唯一码,调整云量多少,触发生成新场景。


>>体积云演示

体积云


微观仿真

Drawsee作为WebGIS,与微软游戏平台BabylonJs深度融合,可在数字地球中完美展示其微观场景,支持全部原生API,支持物理引擎、WebXR等, 为数字孪生应用提供了宏观与微观相结合的三维可视化平台

游戏级仿真什么效果?下图是BabylonJs的场景效果,涉及半透明物体在环境光中的渲染,包括折射、反射、半透明软阴影等, 这种精细的渲染技术WebGIS很难企及,所以Drawsee采用的技术路线是融合使用,享受其不断发展的红利


babylon渲染



>>三维仿真演示                       >>BabylonJs官网


平台版本

➤  学习版  具备平台基础功能,免费授权给开发者,用于学习目的,有学习版标识,超15分钟需刷新

➤  正式版  包括正式产品质量保证和商业使用授权

➤  行业版  已有管线、水利行业化产品;可以针对用户特定行业协商定制新功能。





如果Drawsee的性能和渲染效果,有助于提升您的行业项目,欢迎联系合作!

联系    QQ: 825095663