htdaydayup

htdaydayup 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

htdaydayup 发布了文章 · 9月23日

数字孪生赋能工业发展:可视化“智”造航天新里程

前言

2020 年 6 月 23 日 9 点 43 分,随着北斗三号最后一颗组网卫星成功在西昌卫星发射中心发射,至此,我国北斗卫星导航系统已全面建成。从 2000 年到 2020 年,从北斗一号的首星发射到北斗三号的末星入轨,整整 20 年,我国终于拥有了自己的全球卫星导航系统,我们将摆脱对 GPS 的依赖。

如今北斗系统已经广泛应用于电力、金融、通信、交通、农业、测绘、减灾救灾等生产和生活的方方面面,借助北斗,我国的国防力量也将更加强大。(注:北斗卫星导航系统(BDS)和美国 GPS、俄罗斯 GLONASS、欧盟 GALILEO,是联合国卫星导航委员会已认定的供应商)

界面简介及效果预览

使用 HT for Web 自主研发的 2D/3D 引擎,经过搭建场景、搭配数据面板以及动画驱动制作了卫星发射 demo,如图是完整的界面展示:

它由中心的场景和两侧数据面板构成,场景支持常规的旋转、平移和视角缩放,数据面板模拟展示了火箭以及卫星的一些相关信息。

系统分析

火箭升空及卫星绕轨飞行动画

火箭升空的 5 个动画过程如下:

  • 完成装药检查,稳定器点火和发射部署
  • 助推器点火,加速
  • 助推器分离,二级火箭点火,释放推力
  • 整流罩被剥离,二级火箭分离
  • 释放卫星进入轨道

时间轴的五个时间节点分别对应上述五个过程,通过点击时间节点可单独播放对应过程动画,如下是飞行第三过程:

动画控制按钮

Play:开始播放动画

Pause:暂停动画

Resume:继续动画

Replay:重新播放动画

燃料剩余量表示

模拟火箭及推进器燃料储量信息。

过程事件

列表记录的是卫星升空过程中不同阶段,点击【Show】可以展示当时场景界面。

实现价值

北斗卫星导航系统是中国着眼于国家安全和经济社会发展需要,自主建设、独立运行的卫星导航系统,是为全球用户提供全天候、全天时、高精度的定位、导航和授时服务的国家重要空间基础设施。卫星导航系统是全球性公共资源,多系统兼容与互操作已成为发展趋势。中国始终秉持和践行“中国的北斗,世界的北斗”的发展理念,服务“一带一路”建设发展,积极推进北斗系统国际合作。与其他卫星导航系统携手,与各个国家、地区和国际组织一起,共同推动全球卫星导航事业发展,让北斗系统更好地服务全球、造福人类。

作为北斗卫星的唯一运载工具,长征三号系列火箭同样功不可没,20 年来累计发射多达 44 次,他装载着北斗系列卫星,承载着祖国导航系统的希望与未来,飞速驰向了浩瀚的宇宙,成功将卫星送入预定轨道,为北斗卫星导航系统的诞生和成熟做出了巨大贡献。

总结

科学家们在太空排星布阵,最终将北斗系统从设想变成现实。未来,北斗系统还将发射多颗卫星,进一步提高全球基本导航和短报文通信服务能力,并实现全球短报文通信、星基增强、国际搜救、精密单点定位等服务能力。

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:《分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇》,更多行业应用实例可以参考官网案例链接:https://www.hightopo.com/demo...

查看原文

赞 0 收藏 0 评论 0

htdaydayup 发布了文章 · 9月20日

浅谈可视化设计-数据时代的美味“烹饪师”(下篇)

​目录:

  1. 什么是大屏数据可视化
  2. 设计流程介绍

3. 结合情感打造二维设计美感

4. 构建空间感&二维与三维的融合

5. 小结

结合情感打造二维设计美感

上篇我们讲到了《可视化设计-数据时代的美味制造者(上篇)》,分析完了逻辑性的可视化概念与设计流程。

接下来让我们开始具体的讲解可视化设计进行中的设计方法。

首先,想要设计出一个好看的可视化大屏,艺术性是必不可少的。所以第一步我们来走进数据艺术的世界中,从理性走入感性,体会相斥相吸所碰撞出的艺术火花给人带来的视觉盛宴。

1.走进数据艺术

在数据艺术的世界中,要打开想象力,关注数据和情感中的联系,准确的说,数据艺术更多是为了让人们去体验那些让人感觉冰冷而陌生的数据,使它们从无形变为可见的,可动的,可互动的甚至可触摸的有形物像。就像是把冰冷的10110010的代码赋予生命,穿上衣服形成样貌,让人一看就能记住这个生命体的样子,知晓它的信息,更加人性化的与它互动。

上图是由艺术家格约拉(Quayola)和穆罕穆德·阿克坦(Memo Akten) 在“形态“图中将竞技运动轨迹模拟成粒子数据动画。视频中以点线的元素伸展动画,随着运动路径相应移动,让计算机生成的图形赋予生命力。

上图是费尔兰达·维埃加斯加和马丁·瓦滕伯格的作品“风图”(Wind Map),绘制了全美各地风的流动模式。这个可视化的制作非常实用,可以通过缩放和平移数据库进行研究,还可以把鼠标停在某处了解该地的风速和风向。地图上风流动越集中,越快,预报的风速就越大。但这个图不止实用,还更是一件艺术品,它赋予了环境生命感,同样使得冷冰冰的气象数据通过可视化的形式变得有生命力。这便是数据艺术的魅力,也是做可视化设计所追求的方向。

2.建立视觉层次

感性的感受到数据可视化带来的艺术感和生命力后,我们来通过理性的方法为我们的可视化增加美感。

当我们在拿到一张可视化大屏的时候,会快速扫一眼寻找有没有有趣的东西。而且人眼在看东西时总是趋向于识别引人注目的东西,比如明亮的颜色,较大的物体等突出的有特点的事物。利用这点,我们可以用醒目的颜色突出显示数据,而淡化周围的辅助元素,拉开背景和数据的层次。也可以用线条或者线性元素构建一个视觉路径,把人的视线逐渐引向一个兴趣点。这样就可以建立一个视觉层次,帮助读者快速关注到主数据。反之,读者就会盲目搜索而找不到重点了。

如上图我们做的一个简单的案例,左侧的图弱化了背景元素,明显比右侧的数据可读性更强,视觉感受更加舒适。

上图来源于 HistoryShots InfoArt ,以上两张图是政党史的演变图,描述了乔治·华盛顿总统到唐纳德·特朗普的迷人视觉历史。HistoryShots InfoArt 汇集了很多人文,历史的进程,把复杂凌乱的内容通过艺术性的可视化设计,变得有趣且有逻辑性。他们很擅长运用以上所说的建立视觉路径的层次建立方法,一步步引导读者跟随着引导了解到历史进程,十分抓人眼球。再分享两例 HistoryShots InfoArt 其他的可视化设计,以便更深层次的感受下建立视觉层次的不同方法与数据可视化的艺术魅力。

第一张是流行/摇滚音乐谱系图,该图表记录了流行/摇滚音乐及其最畅销的艺术家的成长和发展。记录了从1955年到1978年,由左到右的潮流映射了700多位艺术家和30种音乐风格。提供了每个音乐家成为主要流行制作者的时间长度。重叠的视觉流动线条使读者可以比较多个艺术家在同一时间段的寿命和影响力。并且列出了每个文体类别的起源和家谱,以及其在总唱片销售中所占份额的估计值。

第二张是美国陆军战役地图,此图显示了某军团的路线以及其分配的和附属的单位。第二十军于1944年7月作为乔治·帕顿中将的第三军的一部分登陆法国,并在法国和德国进行了战斗。

如上图这些案例,视觉层次可以用来研究数据的过程。假设在以上确立指标分析维度时生成了大量的图表,可以用几张图来诠释全景,在其中标注出具体的细节另做二级图表单独显示,这样会使数据更清晰。此点也说明切勿为了追求艺术效果而使视觉效果变得凌乱,设计的目的是使数据变得更加清晰易懂,分清层次,能把读者引向关注焦点。相反,层次不分明的图则缺少流动感,读者很难理解,更难进行细致研究。

3.适宜的色彩情感

在数据可视化设计中,色彩是最重要的元素之一。合理利用色彩的情感可以增强可视化设计的感知效果,调动观赏者的情绪。

不同的色彩给人不同心理感受,如:红色代表着喜庆、热情、欢乐、爱情、活力等。但是,很多时候红色也与灾难、战争、愤怒等消极情绪联系在一起;蓝色会给人带来友好、和谐、信任、宁静、希望等积极的情感体验,也会给人以冷酷、无情的心理感受。不同的色彩搭配可以表现不同的情感,用来表达与之匹配的可视化设计主题风格,调动观赏者的情感。

  • 科技/科幻感、未来感、前卫感:紫外光色、蓝色等
  • 青春、活力:红、黄、绿等
  • 高端感、质感:黑色、灰色+渐变/光照等;在色彩搭配上可以选择同色系配色,画面显得更丰富;也可以选择非同色系配色,画面会更加多彩。

色彩搭配不仅是整体风格色调把控,还有与场景融合的面板颜色搭配,如何让整个画面和谐,比较考验设计师的艺术基础功底,色彩设计在可视化应用中最重要的是要做到整体思考,不能只顾局部的颜色搭配。在搭配的时候也要注意不要使用纯色互补色进行搭配,在遇到补色,对比色时可以尝试降低其中一种颜色的纯度。画面要注意不灰,不粉,不色频,与行业相符不会让人觉得奇怪。色彩面积的应用也十分重要,在搭配颜色时要注意主色和辅色的色彩面积比例,是决定色调的重要因素。

上图是尼古拉斯·加西亚·贝尔蒙特的“美国风场图”,同样是描述风场,可以感受下同色系色彩面积不同,与不同色系带来的视觉体验与心理体验的不同。虽然颜色可以从研究物理层面上对视觉的冲击给人带来的不同感受,但更多对于设计师而言,能做到共情很重要,需要设计师自身能体验到这种色系的差别,有敏感的判断性,这种需要设计师多看案例,多观察生活而不断训练。

上图是我们做的图表配色案例,挑选了6中基础色规定了色调,作出明暗两套方案。

4.背景信息视觉暗示

这是可视化大屏设计中一个小的比较讨巧的方式,背景信息虽然在上面讲到的视觉层次上来说属于弱化的低层级,但是背景信息能够帮助读者更好地理解可视化数据。它能提供一种直观的印象,并且增强抽象的几何图形及颜色与现实世界的联系。设计时可以通过图表周围的文字引入背景信息,例如最近我们做的新型冠状病毒的疫情地图与病毒实验室demo,就适当的在背景图片和UI元素中引入了和病毒相关的元素与颜色搭配,可以更容易渲染气氛,使读者快速理解到可视化的内容主题。如下图:

5.巧用留白

留白这个说法在设计中很常见,但是这个说法并不专业。留白的设计方式属于构图中的一种,也是很考验设计师构成能力的一个点。如果做设计时间长的人会发现,在构图排版的时候,内容越多元素越多越好排,内容越少越不好做设计。现在很多的看起来“高大上”的网页设计或者 APP 界面设计大多都采用了大面积留白,仿佛这是一个设计趋势,许多人将这解释成:现在的信息太多太杂,人们需要整理简化,设计也越来越简化,所以留白盛行。事实上确实有这种社会趋势,但是更重要的是对于设计本身而言,简洁的设计是最难的,构成设计是最考验设计能力的。优秀的留白设计之所以高大上,并不是因为运用了留白的手段,而是设计师的构成能力十分优秀才可以做出如此优秀的作品。

我们可以尝试一下这种训练:给你一张白纸,如何切三刀构成出富有设计感的画面?接下来尝试如何切两刀构成出富有设计感的画面?最后尝试如果只是切一刀,如何使画面富有设计感?这样的训练可以培养构成的能力,等到可以一刀切出艺术品的时候,就可以称得上非常优秀的设计师了。

另外,在交互设计中如何留白,也是栅格化布局的一个应用点。众所周知,混乱是可读性的大敌。大量的文字和图形挤在一起,会让一幅图看起来混乱不清。而他们中留一些留白可以使图表变得很容易阅读。在一张大屏中可以用留白来分隔图形,从而划分出多个图表,形成模块化。留白会让可视化图表更易于浏览和分阶段处理。但是留白不可乱用,若不需要划分视觉元素,就不要用留白,会使内容产生歧义。

上图是设计师 Valentin Lacoste 的作品 “blank page syndrome” 运用了留白的构成方式设计出艺术性的美学动效。

6.动画的交互运用

动画与过渡效果可以增加可视化结果视图的丰富性与可理解性,增加用户交互的反馈效果,操作自然、连贯;还可以增强重点信息或者整体画面的表现力,吸引用户的关注力,增加印象。

但是,动画与过渡使用不当会带来适得其反的效果。如何巧用动画与过渡,需要做到以下几点:

  • 适量原则:动画不宜使用过多,避免陷入过渡设计的危机中
  • 统一原则:相同动画语义统一、相同行为与动画保持一致,保持一致的用户体验
  • 易理解原则:简单的形变、适量的时长、易判断、易捕捉,避免增加观赏者的认知负担。

第一类交互动画的作用主要作用于点击按钮的过渡动画,这类动画应用物理学动力学比较多,通过动效给人更加真实的交互体验。对于这类 motion design 的教学案例,比较权威的是谷歌的 Material Design ,如下案例:

由于动画这部分属于可视化中的辅助效果成分,具体的设计方法就不在文章中过多赘述,如果有兴趣可以去谷歌 material 设计中的 Motion 板块学习。

第二类交互动画可以用于模拟实物的运动,以及业务需求所需要的动效,使可视化大屏更加生动,展示方式多样。下图是我们做过的一些demo的动画效果案例为参考:

综上所述,在可视化中合理的运用微动画,很容易引起观赏者的注意力。有重要信息需要观赏者快速捕捉时,可以选择微交互动效吸引用户的注意力。此外,微交互也经常用于增加设计的趣味性,提高观赏者的兴趣,使观赏者产生情感上的共鸣。

构建空间感&二维与三维的融合

传统的数据可视化以各种通用图表组件为主,不能达到炫酷、震撼人心的视觉效果。优秀的数据可视化设计需要有炫酷的视觉效果,让可视化设计随时随地脱颖而出。这时用三维元素的添加制造出空间感可以大大的加大画面层次感,且可以多维度观察,每个角度可能会产生震撼的视觉体验。下图是我们做过的一些三维设计案例:

然而,三维的web端场景设计有一定的局限性,因为web端受性能影响,模型只有轻量的模型才可以显示流畅不卡顿。所以设计师在设计时需要严格控制面数与贴图量,以保证流畅。另外,web端的性能也无法带动庞大的渲染器,所以我们采用了使用 color 贴图来表现模型的光影和质感。通过三维的项目经验我们也总结了一套三维设计流程:

  • 准备阶段:理解需求,搜集相关资料,建模统计列表
  • 开始建模:初步轮廓,模型细化,拓扑低模
  • 展UV
  • 贴图绘制:烘培AO光影信息,材质信息。PS贴图绘制
  • 搭建场景:导入 Hightopo 引擎,搭建出场景,摆放二维图标
  • 氛围调整:添加阴影,环境光等效果。模型层级关系,命名与标签绘制。

有许多的大屏设计案例都会涉及二维和三维相融合,需要整体的考虑风格一致。风格一致可以从色调与元素使用样式来做到统一,没有违和感。我们直接展示案例来说明:

这是我们做的一个招聘 demo,整体用的是插画风格,二维与三维的融合都使用了插画风的元素,达到统一的效果。

这是我们做的一个风机的案例,以线框的风格为主,UI也配合了线框状态的风机模型样式,加上整体颜色的统一,就可以达到一个不违和的效果。

如果仔细看上方招聘demo的案例会发现在展开的地图界面里有一些 2.5d 的元素,2.5d 的设计属于哪种界定呢?其实 2.5d 的学术名是轴测插画或轴测插图。轴测插图的意思顾名思义,是一种单面投影图,在一个投影面上能同时反映出物体三个坐标面的形状,并接近于人们的视觉习惯,形象、逼真,富有立体感。也就是说用二维的制作方式画出物体的三个面。富有立体感。但轴测插画需要找透视面,对设计师的空间想象能力要求很高,在制作的时候的难度和时间成本因图形的复杂程度而定有些会高于三维的工作量。下图是我们做过的一个 2.5d 的案例:

还有一种类型的图,如下图,许多读者和客户看过后会觉得,这种效果看起来也很立体呀,是不是也是属于 2.5d 呢?

其实这种并不属于 2.5d,如果我们仔细观察每个图标,会发现我们只能看见正面一个面,而无法看到三个面,所以这种我们称为:写实风 2d 图标。写实风 2d 图标是通过调图形的渐变颜色来达到一种立体的效果,但是在绘制时不用找透视,只用绘制正面一个面就可以,所以制作起来相较于 2.5d 而言就比较简单,属于 2d 制作范畴的工作量。所以 2.5d 的界定范围并不是以写实的效果而定的,而是以物体透视所展出的观测面数而决定的。2.5d 之所以看起来立体是因为展示的面数多,而写实风 2d 之所以看起来立体是通过颜色渐变形成的一种视觉效果,两者虽然看起来不容易分别但是在设计师绘制的方法和工作量上却大大不同。

综上所述我们结合了正确的设计流程,适当的设计思维,便捷的设计技巧,二维三维的结合与丰富的动效和人性化的交互体验,一个合格的可视化设计就完成了。想要查看更多的案例可以访问我们的官网:https://www.hightopo.com/demos/index.html

小结

前言说过,设计就像烹饪,虽然每一道菜都有它的菜谱,油盐酱醋的比例都写的非常详细,但是每个人做同一道菜的味道还是各有不同。可视化设计也是如此,我们可以总结规定出许多原则,步骤,设计方法,一开始可以严格遵守这些规定做出好看的可视化大屏,但随着每个设计师的经验不同,会渐渐根据自己所有用的和看到的做出调整,就会设计出与时俱进的作品,有个性的作品。

随着科技的发展,也许你听说过有人提出过全自动化便当贩卖机的概念:所有的烹饪都由机器来进行,然后自动打包放在像自动贩卖机的柜子里扫码售卖。但是与此相比,我们可能反而更爱早上公司外大爷蒸的肠粉和下班后路边大妈做的煎饼果子。想必原因每个人心理也都有答案。设计也是如此,如今科技已经使人提出了各种各样的人工智能做设计的案例。但是和烹饪的道理一样,设计是不能被机器所取代的——因为灵魂不能被取代,每个人都有每个人独特的思想,我想这也许是设计珍贵的原因。

希望我们设计的每一张可视化大屏都可以回归到行业里,体现出设计师所理解的数据做出的设计后为社会生活带来的真实的价值。就算它可能不够炫酷,不够时尚,但是它的每一项数据的表现,每一个元素的绘制,都是经过细节的设计雕琢,细节决定成败。

最后,我认为一个好的设计标准不是它好不好看,因为好看的标准很多,每个人的审美都会不一样。我们在评估设计的时候要评估它合不合适,最合适的设计,最合适的方案,就是最好的设计。

参考文献:

1.数据可视化设计(1)情感化设计指导可视化设计理念 —— Nemo

2.数据可视化设计(2):可视化设计原则 —— Nemo

3.如何做大屏数据可视化设计?超全面设计指南 —— 鱼大大设计铺

4.Data V数据可视化:一屏在手万物可视,企业如何在数据浪潮中脱颖而出? —— 数据智能小二

5.数据之美:一本书学会可视化设计 —— Nathan Yau

查看原文

赞 0 收藏 0 评论 0

htdaydayup 发布了文章 · 9月16日

工业互联网背景下的高炉炉体三维热力图监控系统

  

前言

  在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了 5G 时代的新次元。而伴随着带宽的提升,网络信息飞速发展,能源管控上与实时预警在工业互联网中也占着举足轻重的地位。高炉作为钢铁产业十分重要的一环,它的数据监控和预警提示有着极为重要的价值和意义。

下面我们将介绍一下使用 Hightopo(以下简称 HT ) 提供的技术通过 2/3D 融合搭建的高炉炉体三维热力图监控系统。

界面简介及效果预览

  2D 面板上呈现了高炉的基本信息,热传感器信息,高炉检测信息;3D 可视化场景中呈现了高炉的真实几何结构,采用三维热力图呈现了高炉各个关键位置的温度信息,底部方位指针定位了高炉的朝向和传感器位置,两侧的高度标识展示了炉体关键位置高度信息。

  在可视化系统的实现上,3D 场景采用以 HT 轻量化 HTML5/WebGL 建模的方案,实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果;而在对应的 2D 图纸上,使用特有的矢量,在各种比例下不失真,加上布局机制,解决了不同屏幕比例下的展示问题。

HT 在高炉炼铁工业组态领域合作的项目登陆 CCTV9 《纪录频道》。

7月2日,由工业和信息化部与中央广播电视总台联合出品的中国首部大数据产业题材纪录片 《大数据时代》 第2集播出,报道了工业互联网平台炼铁大数据实现高炉数字化改造的卓越贡献。传统工业企业数字化转型是工业转型升级的一个重要议题。

虽然我国钢铁业产量已连续多年位居世界首位,但仍走在由大到强的发展阶段。我国的钢铁产业一直致力于炼铁传感器、物联网、工业模型软件、专家系统、企业级炼铁大数据平台以及行业级工业互联网平台整体解决方案的研发和推广。目前已完成国内260座高炉的数字化和智能化落地,并推动炼铁大数据平台在俄罗斯、越南、伊朗、印尼等“一带一路”国家钢铁企业中应用,单座高炉年降本增效超2400万元/年,实现了大数据、机理模型、人工智能和传统制造业的深度融合,是智能+工业的典型应用。

  

  整个高炉炼铁工艺主要涉及到以下系统: 原料系统、上料系统、炉顶装料设备、炉体系统、粗煤气系统、风口平台及出铁场系统、渣处理系统、热风炉系统、煤粉制备及喷吹系统、辅助设施系统。完整的流程演示可以参考另外一篇优秀的高炉系统文章 《 基于 HTML5 WebGL 的高炉炼铁厂可视化系统

  本文主要描述的是 炉体系统 这一部分的功能和效果,炉体系统作为整个高炉炼铁系统的心脏,它的使用寿命决定了整个高炉系统的寿命,所有的附属系统均是为炉体系统服务的,重要的化学反应也都是在炉体系统内完成。

具体功能及实现

  高炉炉体的温度监测至关重要,例如炉缸局部过热,可能出现炉体烧穿的事故,一旦烧穿,方圆 50 米范围内的设备设施将荡然无存,造成巨大的经济损失甚至人员伤亡。

  本系统的三维热力图通过读取后端实时传入的热传感器数据来动态呈现,提供热力范围调节功能,可根据需要来调节不同峰值下的热力表现,例如我们将 1000 摄氏度视为预警值,在炉体某处达到该数值时热力图呈现红色。

  这个功能用到了 HT 组件中的 slider, 可根据滑块的数值大小自动调节每个传感器产生的热力图范围大小,较大范围的热力图会聚合到一起。

  效果参考:

  高炉炉体主要分为:炉顶封罩、炉喉、炉身、炉腰、炉腹、炉缸、炉底、炉基,通过用户传入的对应位置的半径和高程信息,做简单处理后使用 HT 自带的建模组件可自动生成整个炉体。

  采用这种方式生成炉体,省去了 3D 设计师建模的过程,可用数据驱动的方式生成任意大小、高度的炉体。

  炉型的好坏关系到高炉的产出和寿命,本系统还提供了动态调节高炉炉体各个关键位置尺寸的功能,可用于高炉设计规划,以期达到在不同高炉尺寸下观测高炉产出效率、负荷能力,优化高炉造型。

效果参考:

  高炉内部的状态往往也是关注的重点,例如内衬状态、热传感器部署运行状态、内壁裂缝、炉腹渣蚀情况、炉底铁水侵蚀情况等信息。

  本系统提供了 剖切功能内窥功能 ,剖切功能可直观地查看炉体内部热力分布,在采用顶视图的观察模式下可以参考底部的圆盘刻度来定位过热处的准确方位。

效果参考:

  高炉温度检测可以采用热传感器,通过采集铁水的温度并计算分析,来反应高炉炉体各个部分的热量分布。当该系统用于设计时,可以通过调整传感器的位置来直观地观察不同传感器的分布与热力分布范围的关系,达到合理设置传感器分布位置的目的。

  本系统的内窥功能不同于剖切,内窥主要用于观测炉体内部各种设备的定位和检测数据,此时无需再用热力图做呈现,可以配合三维数据面板来展示设备设施的状态,也可以在 3D 场景以外做呈现,点选相应的设备则在 2D 页面中呈现该设备的状态。

  可以通过在点选的图元上派发事件来触发相机内窥,也可以在三维场景上做全局监听

效果参考:

总结

数字化 和 智能化 管控是 工业互联网 的发展趋势,在很大程度上解放了人力和劳力,在信息飞速传讯的时代,数据可视化和智能管控的结合,会演绎出许多惊奇的效果碰撞。在实时数据监管下,预警信息也相当重要,保障生产有序进行的同时,我们也要关注生产安全问题,生产效率问题,资源利用率问题,环境问题等等方面。

以下是 HT 另一个 高炉炼铁 全流程的演示案例: _https://www.hightopo.com/demo/large-screen-puddling/_

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

查看原文

赞 1 收藏 0 评论 0

htdaydayup 发布了文章 · 9月13日

浅谈可视化设计-数据时代的美味“烹饪师”(上篇)

目录:

1. 什么是大屏数据可视化
2. 设计流程介绍

  1. 结合情感打造二维设计美感
  2. 构建空间感&二维与三维的融合
  3. 小结

还记得大学学设计的时候学院里流传了一句话:“有百分之八十的设计师都幻想着成为一名厨师。”

我之前从未细品过这句话的缘由,只觉得是同学们之间的玩笑。在我大二的时候有幸与一位懂烹饪的学姐一起租房。从那个时候开始,我受她的影响也开始对烹饪着迷。我渐渐的发现,烹饪其实与设计是非常相似的:食材的选择,调味料的选择,切菜炒菜的技法,烹煮的方式,摆盘的方式,菜品的颜色控制,甚至是碗盘形状颜色的挑选等等......通过这些小点略微的改变,致使每个人烹饪的料理味道都完全不同。

当我懂得这些,并开始思考如何烹饪属于自己味道的美味料理时,我发现我开始了“设计料理”的过程。设计它每道工序添加调料的多少改变精致的味道,设计它的食材搭配,设计它的摆盘方式,甚至我的料理的出场方式,以达到给品尝料理的人最好的体验来充分体会到这道菜食材的精华所在。我想这就是设计师会痴迷于成为厨师的原因所在吧。对于设计师而言,这些食材都可以成为设计的对象,来达到一个最好的用户体验,来获得作为一个厨师的满足感。

在当代的数据时代里,作为可视化设计师的目的就是做到拿到任何的食材—数据,通过对它的设计,把凌乱冰冷的数据赋予它自己的“味道”,让用户一眼就可以明白它的含义,它的不同。通过设计的加工,如料理选择调料与摆盘一样,帮助用户对它的理解更深,并且增加对它的喜爱。清晰的阐明数据的含义,避免美味食材的沦陷,直观呈现大数据背后的意义,数据可视化就是这样变得有价值。下面,让我们走入数据可视化设计的方法,来看看我们的独家菜谱吧。

谈论起数据可视化设计,许多人会产生一个疑问:什么是数据可视化?我们由此问题着手,来谈论下数据可视化设计。

经研究表明,人类大脑对视觉信息的处理优于对文本的处理。因此,数据可视化是使用图表、图形和设计元素把数据进行可视化,把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段。数据可视化可以使人们更有效率的完成某些任务,我们可以理解为三点优势:

  • 美观展示: 用数据展示企业特色,大会展台,媒体现场展示等
  • 数据驱动:实时查看业务概况、监控预警、驱动内部快速响应
  • 发掘价值:可视化数据呈现后,带来的视觉感受会帮助人发现新的因素

在 HT 技术支持下,数据可视化除了“可视”,还可有可交流、可互动的特点。设计带来的不仅是瞬息处理海量数据搭配酷炫的可视化样式所引起的视觉震撼,更应注重为业务需求服务,设计出符合不同行业需求的个性定制可视化,利于企业做出正确的商业决策,以有根据的数据呈现而帮助企业进行更科学的判断而避免决策的失误。

1. 从业务需求分定优先级

关键指标是一些概括性词语,是对一组或者一系列数据的统称。通过规定主,次,辅,三个指标的关键词来概念性的清晰大屏的主要展示内容,例如我们做的一个照明的监测项目,我们可以归类成这三种:

  • 主:主要指标位于屏幕中央,为地图展现照明区域使用数据。
  • 次:次要指标位于屏幕两侧以图表的形式展现。
  • 辅:主要指标的补充信息鼠标点击或悬停展示以及交互动效展示。

这样就可以方便在脑海中确定大屏的整体构架,以便于我们接下来的细化。

2. 通过指标分析维度确立可视化图表类型

同一个指标的数据,从不同维度分析就有不同结果。如果分析的维度没有找准或定义的比较混乱,就会使可视化图表无法清晰的看清楚含义,使人困惑。这里我们引用Stephen Few 的文章 《Visual Business Intelligence》的四项维度-比较,联系,分布,构成,来分析数据的逻辑性。

在思考四项维度的时候我们要思考几个问题:
1.数据之间的相关性?
2.指标里的数据主要集中在什么范围、表现出怎样的规律?
3.数据之间存在何种差异、差异主要体现在哪些方面?
4.指标里的数据都由哪几部分组成、每部分占比如何? 以上的示例图表的样式比较传统,但是思考问题的逻辑性是相通的,值得借鉴使用。

3.根据大屏尺寸,规划页面布局,确立交互稿

确立图表类型后,下一步要进入到布局具体的信息位置,确立交互稿的步骤。确立交互稿的第一步就是要确定大屏的尺寸。客户的大屏尺寸不用会影响到整体的布局和效果,设计的时候也要考虑下是否有拼接大屏接缝的问题,尽量以拼接屏尺寸来确立栅格化布局。

尺寸确立后,接下来要对设计稿进行布局和页面的划分。布局这里我们就要参考第一项的业务需求优先级来布局画面分割面积。核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。视觉上要尽量规避文字罗列或图表罗列,注意方圆图表的面积比例问题等,也是布局期间需要注意的事项。

4.确定设计风格与设计进行

设计风格的确定主要以以下几点来确定: 设计风格的选择切勿追求效果炫酷而不符合业务需求,选择最合适的而不是选择最绚烂的尤为重要。因为设计中涉及的范围比较广,我们在后两章节单独着重讲解。下面展示部分我们做的不同行业对应的不同构图布局与元素的应用案例:

发动机的可视化以突出发电机产品为主,周围UI以大圆角形式设计,使视觉由四周向中间包围,集中于中心。

挖掘机的可视化采用了大地色进行设计,采用了色彩共情的原理,结合简洁的线性UI,使大屏在接地气的同时不失高端雅致的效果。

医院的可视化设计以冷白色为主,突出医院给人的干净,严肃的感觉,仿佛能闻到消毒水的气味。以模型展示为主,按钮样式也采用了以面为主的设计配合大面积色块分布为主的模型设计。

地铁站的可视化以写实风格为主,再现了真实地铁站的样貌,以及身临其境的动画交互体验。

农业可视化案例尝试了 low poly 风格,以简洁插画风与略抽象画的模型浓缩了农业的运作场景,色调以贴近植物的绿色为主,设计出可爱的动画风格可视化效果。

5.沟通与修改

在做设计中一个很重要的点就是沟通,无论是设计师内部的沟通还是设计师与客户的沟通都会对大屏最后的修改效果产生一个很大的影响。设计师在内部沟通时要从专业角度吸取知识与建议,并从客户那里吸取业务需求与客户心理诉求。这时对于意见的筛选取舍就很重要,设计师可能会被复杂的审核流程和不同外行人士的不同喜好而干扰,这时设计师需要综合意见,与项目经理一起把控设计的走向,在和客户沟通中彼此商讨相互学习与意见的妥协从而一步步优化设计方案。当然设计没有标准答案,也没有完美的面面俱到的设计方案,最理想的标准就是达到客户的理想诉求但对于自己做的设计一定要过了自己的这一关,能协调好自己的审美与客户的需求两赢的状态才是一个好的设计。

同时在设计时因为使用的设备不同,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出demo,反复测试多次来修改协调最终上屏效果。在测试时从设计上可以重点注重以下几点:

1、之前确立的布局在放入设计内容后是否依然合适

2、确立的图表类型带入数据后是否仍然客观准确

3、根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受

4、已有的样式、数据内容、动效等在开发实现方面是否存在问题

5、大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象

6.开发与测试

将设计稿交与前端进行制作,与程序沟通交互切换效果,大屏动效等,一起实现把控大屏的最终效果。

上篇我们了解了大屏数据可视化的概念与设计流程,下篇将带领大家进入数据艺术世界,发散设计思维,体验设计乐趣,《可视化设计-数据时代的美味制造者(下篇)》,欢迎各位看官评论关注!

查看原文

赞 1 收藏 1 评论 0

htdaydayup 发布了文章 · 9月9日

加速城市轨道交通发展,数字化运营新基建搭建地铁管理系统

前言

HT for Web 自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎,为可视化提供了丰富的展示效果。在 2D 组态 和 3D 组态 上,Hightopo(以下简称 HT )的 HT for Web 产品有着丰富的组态可供选择,本文将介绍运用 HT 丰富的 2/3D 组态 搭建出的一个 地铁数字孪生管理系统 。

数字孪生指现实世界以及利用数字化技术营造的与现实世界对称的数字化镜像,以数字化方式拷贝一个物理对象,模拟对象在现实环境中的行为。数字孪生的模型概念包括三大要素,即物理世界、虚拟空间以及两者的交互接口。其目标在于精准映射现实空间的物理信息,呈现给管理者进行相关决策。

数字孪生的优势

提高可靠性和可用性。

降低风险。

降低维护成本。

改善生产。

更少的时间创造更多的价值。

系统结构

地铁数字孪生管理系统,该系统首先针对地铁车站这一物理对象,以及针对安防、环控等需求来分析物理对象特征,建立三维虚拟模型,并融合设计建造阶段、运维阶段产生的所有信息,借助传感器、设备运行历史等数据构建物理实体和虚拟空间的交互关系,最终为用户提供各类服务应用。该系统结构主要包括以下四个模块。

一、三维建模

需要针对地铁车站该物理实体作一一映射,包括建筑结构如墙、天花板、楼板、风机盘管、水管管道等构件,并根据最终服务应用的目标分析其他物理实体的特征,即地铁屏蔽门、电梯、灯光照明、进出口闸机、消防栓、火灾报警器等设施。三维虚拟模型的建立是实现数字孪生系统的基石,无论是信息融合还是预测分析都必须基于虚拟模型。

1、站台整体概览

2、站厅整体概览

3、自动售票机

4、安检机

5、进出口闸机

二、运维信息

将设计施工阶段、运维阶段产生的所有信息集成至孪生系统中,比如用户信息、设备信息、采购信息保修信息和财务信息等。实现模型和信息的一体化,简化业务流程和解决方案,为高效运维提供可能。

三、虚实交互

利用传感器采集实时数据,并根据各个设备的历史运行数据等,完成物理世界与虚拟空间的虚实交互。传感器动态获取的实时数据,结合照明系统、 监控系统、暧通系统等系统的运行历史数据和当前状态,存储入服务器中,为虚拟空间的构建提供必要前提。在虚拟空间中,以三维虚拟模型为基础,利用不同计算方法,获得相应的运营策略、环控策略和能耗预测方案。

四、预测分析

读取服务器中的相关数据,获取地铁进出站客流量的历史数据,依据不同时段,不同星期,不同月份的客流量数据,依据不同权重比,提前计算预测进出站客流量。在此基础上,可以根据预测客流量合理调派地铁工作人员,以及调整地铁进站安检通道,选择合理的方案以应对地铁站客流高低峰时段,帮助地铁站平稳运营。

根据服务器中的相关数据,计算在地铁车站上不同位置温湿度、空气质量的三维分布并可视化。在此基础上,可以计算不同平面以及各边界表面的热舒适度,保证地铁环境的热舒适性。同时能对不同的通风、制冷加热方案做能耗分析,选择合理方案控制能源消耗,节约运维成本。

总结

对于地铁这样规模庞大且人流密集的重大设施,监测、控制其环境质量,满足乘客的舒适度体验又能在紧急情况下保证乘客的人身安全是非常必要的。传统地铁环境控制系统采用自动化管理与控制系统,面对获取的大量运行状态监测数据,难以用可视化的方式呈现。

数字孪生技术与地铁环控系统相结合,具有以下优势:
1、三维可视化。数字孪生打破了通过平面图纸整合建筑信息的传统模式,通过 3D 建模技术映射物理现实世界的建筑模型。能够逼真还原地铁车站的建筑结构、管道系统、通风空调系统、电梯系统、安全警报系统等,同时涵盖所有的几何、材料和状态信息。
2、全生命周期。 数字孪生从规划设计到施工再到运维阶段的信息集成,保证了数据的完整性和一致性,贯穿地铁车站全生命周期。改善了传统模式中设计、建造阶段的信息与运维阶段的信息分别储存的弊端,减少了维护成本。
3、预测性分析。 数字孪生技术的引入为预测性决策和分析提供了基础。利用传感器监测大功率或易燃易爆等危险物品的关键数据;可借助深度学习算法,分析监控采集的乘客行为图像;根据通风空调系统的配置和传感器采集的数据等,分析车站热舒适度,同时预测能耗。

通过多年的积累,HT 还拥有许多其他优秀的三维可视化案例。例如 数据中心机房 等,如有兴趣,可以查看.

 

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

查看原文

赞 0 收藏 0 评论 0

htdaydayup 发布了文章 · 9月7日

数字孪生打破距离,卫星监测可视化助力征服星辰大海

前言

5月31日,美国当地时间星期六下午3点22分,SpaceX太空船成功载人发射,实现了全球首次商业载人发射。更值得一提的是其使用的猎鹰9号运载火箭因其可回收利用的特性,极大的降低了发射的成本。

卫星产业伴随着新基建、物联网等技术飞速发展的影响下也向着数字化、网络化、智能化方向转型。但是目前可视化软件偏重于飞行轨道和运动姿态的单一展示,很少能实时的反映卫星本体上部件的在轨运行状态。

这次带来的解决方案是基于hightopo的卫星监测,通过数字孪生实现了卫星机体上事件状态的可视化。

主界面

结合数字孪生技术利用卫星轨道参数、卫星位置信息等有效数据构建出卫星在轨运行的场景,从而重现卫星实时运行的状态。2D数据面板上显示出每一个受监控卫星的编号、当前位置、在轨状态分析和预警系统。实时有效的获取在轨卫星的工作状态,用醒目的颜色提醒有卫星出现异常状况。卫星的运行轨道和运行姿态是决定卫星应用功能的两个关键因素,实时显示卫星轨道运行的全过程,给卫星实时管理提供了重要的辅助决策。

异常卫星简易信息

直观的将单颗卫星的具体数据,通过UI界面展示出,该卫星目前内存使用情况;Cpu的运行状态;连通性和处理器的具体数值。有助于轨道管理人员对卫星在轨工作状态的掌控,能够及时的发现卫星在轨的异常状况,并提供必要的安全措施和处理对策,提高发现卫星故障概率。从而相对应的减少卫星运行的风险,使得运行的安全可靠,降低卫星在轨运行维护成本,快速及时地发现卫星在轨问题,防止异常和问题的扩大和恶化,及时止损。

卫星详细参数

卫星在太空中运行的位置和姿态是处于随时变化之中,由于存在外干扰力矩的影响,这种变化经常不能如研究人员所期待的规律进行,因此对其姿态监控并调整尤为重要。而利用可视化直接展现出对应通讯卫星的详细参数。其中包括卫星俯仰角度与速度、蓄电池的电量状况、综合电子系统的的运行状况、多方位的查看卫星表面以及用条形统计展现出的充电阵电流状况。更加便于管理人员,随时了解卫星的运行状态,预估各项参数,为人工操作和分析提供了坚实的数据基础。

切换查看模式

为矩阵模式将卫星平铺开来变为2D展示模式,可更为直观的找到异常卫星,满足不同情况下监控检查的需求。

总结

在各国太空竞争日益激烈的情况下,追求减少卫星运行成本的环境下,卫星在轨状态综合检测和可视化技术成为了提高卫星的运行安全性、可靠性的有效手段。同样,智能化的改造可以为地球提供精准的信息帮助科研,由于卫星数据量很大,hightopo可将大量的卫星数据转化为直观的图像现实,为征服星辰大海提供了有力帮助。

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

查看原文

赞 0 收藏 0 评论 0

htdaydayup 发布了文章 · 8月30日

加油站三维可视化监控系统,安全管理智慧运营

前言

加油站是指为汽车和其它机动车辆服务的、零售汽油和机油的补充站,一般为添加燃料油、润滑油等。由于加油站所销售的石油商品具有易燃爆、易挥发、易渗漏、易集聚静电荷的特性,故加油站以“安全”为第一准则。

国家经济的高速发展,使得国民的收入日益增强,对机动车辆的购买力也不断地增加。因此,加油站的数量也在不断增多,遍布全国城乡各交通道路沿线,已形成一个相当规模的行业,但加油站由于自营店和加盟店众多,管理分散,一些早期的监控管理系统不能扩容和联网,以及人工的管理监控不当引起的事故多发。为了提高管理质量和效益,实现智能化管理和发展,未来对于加油站的运维管理也提出了新的要求。

HT for Web 自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎,为可视化提供了丰富的展示效果。在 2D 组态 和 3D 组态 上,Hightopo(以下简称 HT )的 HT for Web 产品有着丰富的组态可供选择,本文将介绍借助  HT 的 3D 可视化以及 2D 监控面板来实现对加油站的可视化监控。

界面效果预览

预览地址:http://www.hightopo.com/demo/gas-station-demo/

加油站外场景:

加油站内场景:

实现价值

由于加油站火灾事故具有突发性、高热辐射性、燃烧与爆炸交替发生,特别是由于燃烧过程中油气浓度不断变化,使得燃烧和爆炸不断相互转化,火情不断扩大,而在火灾初期只能依靠站内自救,扑灭非常困难,这就会造成难以估量的人员伤亡和经济损失。特别是地处繁华市区的加油站,发生着火爆炸,极有可能造成群死群伤的重大恶性伤亡事故,给无辜的人们带来巨大的创伤。从历年发生的加油站安全事故进行分析,造成事故的主要原因表现在以下三方面:

一、设备管理问题

加油站在建设过程中就形成的设备和设施隐患,如储罐、加油机接地不符合要求,罐式储油和管沟未用沙土填实,电气设备不符合防爆要求等。

二、人员管理缺失

员工思想素质和业务素质不够,具体表现在存侥幸心理,不负责任,违章作业,缺乏油品,设备等有关知识,容易引起作业事故,作业事故主要发生在卸油、量油、加油、油罐四个环节,这四个环节都使油品暴露在空气中,如果在作业中违反操作程序,使油品蒸发在空气中与火源接触,就会导致爆炸燃烧事故的发生。

三、安全管理滞后

随着技术的发展和市场的变化,安全管理也必须创新,加强事故预防措施。利用可视化管理监控来解决加油站的管理弊端。

随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA。SCADA 系统的推广使用,大大提高了我国加油站的监控效率。三维可视化监控系统是将三维的可视化技术和数据采集与监控技术融合,充分发挥了两种技术的核心优势,并通过数据库进行数据共享,共同构成一种全新的 SCADA 系统。该系统中也结合了海康的摄像头监控,通过调用海康提供的摄像头地址,实时的将视频流传输到前台,并且展示在 2d 页面上。在真实的系统中,每个加油机以及加油罐都有自己对应需要展示的数据,这个可以根据自己需要展示的内容来设计 2d 面板,之后根据后台传来的数据进行展示。数据采集与监控系统通过各类的传感器实时采集监控对象的各类数据,上传数据库并实时共享给三维可视化技术搭建的监控对象的三维可视化模型及场景,最后通过监控系统直观的展示出来,极大的提高了监控对象数据的表达能力和工作人员的工作效率,以及加油站的实况管理。

效果分析

一、视频监控效果

全日24小时不间断的视频监视,保证加油车道、营业厅、财务室和油库区等重要位置的监视清晰,对加油站内的出入车辆情况、设备运行情况、收费情况以及加油站工作情况进行实时监看和记录。

二、加油机监控效果

加油机是直接为机动车加油的输油计量设备。它与油罐、管线、管件阀门等构成了一个完整的供油系统。加油机是由油泵、油气分离器、计量器、计数器四大总成以及电动机、油枪等其他一些部件构成,任何各类加油机都可看作是由这大总成和其他一些简单的部件构成。

三、油罐监控效果

油罐是储存原油或其他石油产品的容器。用在炼油厂、油田、油库以及其他工业中。油罐区由多个油罐组成。每个油罐区一般储存一种油品。油罐的分类主要有按材料分和结构分两大类,我国绝大多数加油站的汽车和柴油采用的油罐都是卧式钢罐,至于非金属油罐,因其具有渗漏等许多缺点,在加油站中一律不采用。所以规范规定加油的油罐应采用卧式钢罐。

总结

对石油行业来说,加油站是与大众直接面对面的窗口,是第一阵地。为紧跟时代步伐,探索智慧经营方式, HT 通过油气浓度检测、油罐油量监控、视频监控的可视化,为加油站的安全运行保驾护航,降低事件响应时间,提高事件处置效率。使场景中各设施具有更加灵活的表现形式和直观生动的可视化效果,实现对加油站科学、有效的管理。HT 也在行业上不断地摸索和技术上的钻研提升,总结出了许多工业互联网上各个行业的解决方案。

 2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA 同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

查看原文

赞 0 收藏 0 评论 0

htdaydayup 发布了文章 · 8月26日

海上平台作业三维虚拟仿真

前言

海上平台是高出海面且具有水平台面的一种桁架构筑物,是在海上工作时在海水中搭建的便于人行走的仿陆地区域,供进行生产作业或其他活动使用,如在海底采石油、海上施工作业等。近年来,随着海上测绘工程的日益趋向大型化和在恶劣的自然环境下作业的必然性逐渐增加,海上作业平台已成为开发海洋的主要设备之一,在海上油气开发中也扮演着极其重要的角色。三维可视化作为搭建数字化工业领域的必备技术,为用户虚拟施工作业的全貌,便于管理者和施工人员看到系统整体的同时,还能观测局部细节。于是,本文将介绍利用 Hightopo (以下简称 HT )的 HT for Web 产品构造轻量化的 3D 可视化场景,借助 3D 组态,以三维动画为主,信息展示为辅,模拟了海上安全作业的整个动态过程,便于人们真实直观的了解海上作业流程及工作环境。

界面简介及效果预览

该场景采用 HT 技术,实现海上平台利用吊柱和吊钩针对海中设施进行捞起、移动、放置等操作,直升机与轮船主要用于配合海上平台进行相关的施工操作,同时搭配作业环境参数信息的展示,呈现出海上作业平台施工时的三维可视化效果。

系统分析

我国海洋资源极其丰富,其中近海石油储量约100多亿吨,但曾经,我们因没有足够强大的工业背景,无设备开采石油等海洋资源,经济受到影响。随着科技的迅速发展,我国实力不断壮大,打造出了多种类型的海上平台,如中国自主研发的蓝鲸系列,是全球最先进的超深水双钻塔半潜式钻井平台。海上钻井平台被称为“流动的国土”,主要由上部平台、下浮体(沉垫浮箱)和中部立柱三部分组成,平台上安装钻井、动力、通讯、导航等设备,以及安全救生和人员生活等设施。工作原理是沉垫通过充水下入海中,只留部分立柱和上部平台在海面上,顶部驱动钻井,在钻探出石油之后,即可迅速转入采油,钻完井后将沉垫中的水排出,再移动到新井位。钻井施工工序包括:钻前工程、钻进工程和完井作业三个阶段,下图为主要工序:

事实上,随着技术的进步及海洋工程对先进设备的需求,不同种类的海上工程平台开始出现,使得海上作业平台应用于多领域多方面:

  1. 铺设、修建、检测、拆除水上水下设施,如:码头、堤岸、桥梁、水下电缆、水下隧道等公共设施;
  2. 救助遇难船舶,打捞沉船、沉物,清理海上污染物,保护海上环境;
  3. 进行影响水上交通安全的海洋及气象观测、水纹测量、地质调查、科学研究等活动;
  4. 开采石油、天然气、可燃冰等海上资源;
  5. 用于影响通航水域交通安全或对通航环境产生影响的施工作业。

实现效果以及价值

1、海上作业平台动画效果

HT 提供了动画函数,可通过控制动画帧数、动画间隔、变化方式等,将物体的某些属性值从起始值逐渐变到目标值,以实现动画效果。机械臂的是实现是通过对机械模型细节零件的拆分,即通过改变吊柱高度的同时实时的改变吊钩的高度位置,以实现放钩的操作,并且可调用动画结束后的函数,实现与收钩、旋转、放钩、收钩、旋转回起始位置的动画无缝衔接。两机械臂可配合操作一起捞起海中某一设备结构,并同步旋转吊臂到指定位置后放钩,完成海中设施各结构的准确拼接。

机械臂的应用是海上作业平台的核心功能之一,可用于调运设备、海上救援、辅助修建海上设施等等,是海上最重要的生产和安全设备之一。它具有操作简单、制动性能好、通用性强、抗风性强、可重复作业等特点,可以代替人们去完成一些复杂沉重的搬运工作或辅助人们实现高危险性的工作任务,也可以代替工人完成大批量的生产任务,这大大提高了劳动生产效率,保障了工人们的人身安全,节约了人力资源。因而广泛应用于机械制造、施工作业、物流系统等众多工业行业。

2、信息条动画效果

通过改变沿 Y 轴的旋转角度来实现以不同速度变化的风力/风向、安全作业天数、钻井启用进程三个信息条的旋转过程。海上作业是高技术、高投入、高风险的一项工作,工况条件比陆地复杂、恶劣,除了受与陆上作业一样的天气因素影响外,自身还受到海洋特殊环境的影响,如海流、潮汐、风暴潮等恶劣天气影响,因此,海上作业可以与当地气象部门建立联系,将信息条中的内容根据工程师当天的环境状况进行信息绑定,及时掌握海上气候动态,确保施工时的安全性。

3、飞机行驶的动画效果

海上直升机是海上作业平台正常运行时的一种交通工具,主要用于运送物资、处理突发事件及运送人员。可根据自定义的轨道、设置飞机的起始、结束位置、飞行状态等属性,来指定飞机的飞行方式及线路,结合HT中的动画函数实现飞行效果。

4、海水的波动

通过改变海水、船的高度位置和浪花透明度的随机变化,来呈现海面的波动状态。轮船主要用于配合海上作业平台完成海上作业,用户也可自行建立两者间的联系。

总结

随着科技的发展和社会的进步,海上作业平台逐渐得到了广泛的应用,如在海洋勘测、资源采集、环境护理、科学研究等方面,在面对风、浪、流等各种复杂的海洋作业环境及海上安全与技术规范条款的要求等,其对各种类型的海上作业都有着积极的意义,是人们海洋工作中不可或缺的设备,为海上作业提供了稳定的工作场所,其重要性不言而喻。

而 HT 将三维动画与工业化领域相结合,使场景中各设施具有更加灵活的表现形式和直观生动的可视化效果,生动的动画演示便于工程师迅速理解和制定海上作业的施工流程,同时实时、直观呈现出海上施工的工作环境信息,可辅助管理人员及时做出准确决策,实现对整个施工项目科学、有效的管理。

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

查看原文

赞 0 收藏 0 评论 0

htdaydayup 发布了文章 · 8月23日

搭建太阳系可视化系统,带你探索宇宙的未知奥秘

前言

近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球、所在的太阳系有一定的认识,对 8 大行星各自的运行轨道、质量、资源存储量甚至是地形有一定的了解。

HT for Web 不止自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎,为可视化提供了丰富的展示效果。介于 2D 组态 和 3D 组态上,Hightopo(以下简称 HT )的 HT for Web 产品上的有着丰富的组态化可供选择。本文将运用 Hightopo(以下简称 HT )的 HT for Web 产品搭载出一个基于 HTML5 WebGL 结合 2D/3D 的 太阳系可视化系统。

界面简介及效果预览

本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该系统使用轻量高效的 ht 库,矢量平面信息与 3D 对象进行关联,并采用 3D 拓扑可视化呈现,相对位置清晰直观,3D 地形与等高线图对应,海拔高度和相互遮挡关系都可以准确把握,该系统满足了最基本的太空场景和数据呈现的框架。

预览地址: https://www.hightopo.com/demo/solar-system/

实现价值

1.作为科研成果、新发现的载体,做 3D 太空数据可视化呈现,用于向普通民众科普太阳系的构成、各行星组织结构等知识,可置于博物馆大屏、学校大屏,也可用于互联网产品,作为航空航天类网站的门户页、展示页。

2.作为宇航局、航空航天相关研究机构的驾驶舱,在 3D 可视化界面中对行星相对位置、星体状态、星体气象、星体地形有一个直观快速的了解,在宇宙空间探索越来越成功的当下,在数据传输技术得到速度和质量上的突破后,甚至可以通过该系统对行星状态做实时监控呈现,对宇航员的作业点、作业情况做在线监控。在配置上人造卫星轨道、监控区域的数据后,本系统可用作卫星系统,描述覆盖范围和呈现观测数据。

效果实现

主题一:太阳系检测系统

本系统主要展示8大行星绕太阳公转轨道、相对位置、星体质量、资源含量等信息。

右上角行星按钮会触发视角切换,切换至相对应的行星观测点。行星的图标分别为水星,金星,地球,火星,土木星,土星,天王星,海王星。图标的造型也是根据行星的特色进行的设计,能够更家直观的分辨出8大行星。

在这里我简单介绍下太阳系及8大行星,加深下对太阳系的了解:

1.水星是八大行星中最小的一个,水星上的温差极大;

2.金星以顺时针方向自转,太阳西升东落;自转速度非常缓慢;

3.地球是人来已知的唯一有生命存在的星球,大约71%的面积被水覆盖。

4.火星是岩石星球,它有两颗卫星。它的土壤和大气中富含铁矿物,因此呈红色。

5.木星上的它自传很快,每10小时自转一圈,因此能产生强风;

6.土星是气态巨行星,土星上的风速是地球上的5倍,这使土星看上去就想有一条金黄色的云带;

7.天王星是冰质巨行星,有13层光环,它侧躺着自转,自转方向为顺时针。天王星上的一年约等于地球上的84年;

8.海王星也是一颗冰质巨行星,它有着荧荧的淡蓝色光。

而太阳系中所有天体都围绕太阳这颗恒星运转。

效果如下:

该主题提供两种视角,鸟瞰和斜视,其它视角可以通过鼠标自行旋转

两种视角的切换由右上角第二、三个圆形按钮触发。

效果如下:

信息框默认采用跟随星体一起旋转,这可以达到俯视视角不出现信息框,看起来更清爽。

如果需要查看星体详情,可以通过点击右上角播放按钮,该按钮会触发所有信息框朝向屏幕方向。

效果:

主题二:戴森球星体 3D 拓扑结构

本系统主要展示用户所点选的行星与其它星际物质的相互作用,也可用于展示行星周围卫星的分布情况,以及展示星体间引力、辐射范围等的拓扑结构。

鼠标悬停在一个星体上会触发选中状态,右侧会监控该星体的相关数据。

主题三:星体气象、地形检测系统

该主题主要用于呈现在场景二中点选的星体上具体的检测点位,点位周边的等高线在左侧自动生成一个 3D 的地形和闪烁的点位示意,并与右侧的检测点位一一对应。

该功能可用于地形的呈现,也可以用于星体大气层的气象状态展示。

左下角实时监控点位的地质热量、气象流动数据。

点选右侧对应检测点,会触发右侧点的缩放动画,同时左侧对应的 3D 点位也会同步变化,其它的点则调用 setAnimation(null)

关联:三个主题(系统)的联动

三个系统是互相关联的,相互切换的方式有三种。

1.点选左上角的切换按钮:

左上角部分均为导航栏的响应范围,鼠标悬停时会改变动画控制器 animationFlags 的对应值,触发导航栏落下来,悬停和点选按钮会通过 setImage 方法设置不同的背景

2.点击最下方的标尺栏,分别对应 3 个模块:

3.点选主题一中的行星跳转到的主题二的拓扑结构,点选主题二的星体跳转主题三的地形,主题三无法向前关联,只能通过前两种方式进行跳转:

总结

随着物联网、大数据等新兴技术大幅崛起,人工智能、大数据、深度学习等新兴概念已逐步渗透至生活的各个领域。Web 3D 有着无限的想象空间,有着非常丰富的数据呈现方式,更有着诸多让人眼前一亮的可视化效果,利用 HT 提供的二三维引擎可以轻松地实现太阳系的可视化。让人们在足不出户的情况下就可以了解到宇宙的奥秘,探索到人类许多未知的信息。并且 HT 长久以来一直致力于多样化行业系统可视化的搭建,涉猎的技术行业所累积的经验,通过自主创新研发的技术产品,已经打造出许多行业上具有代表性意义的可视化管控系统。

 2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

查看原文

赞 3 收藏 2 评论 0

htdaydayup 发布了文章 · 8月19日

用科技力量建设海洋强国:海上风力发电场三维可视化管理平台

前言

我国是一个海洋大国,拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出:“坚持陆海统筹,加快建设海洋强国”。从海洋大国到海洋强国,符合我国发展规律、世界发展潮流,是实现中华民族伟大复兴“中国梦”的必然选择。

风能,作为一种清洁无公害,取之不尽,用之不竭的可再生资源,非常适合用来发电。我国风能资源丰富,可开发利用的风能储量约为 10 亿千瓦,其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源,加快海上风电项目的建设和发展,对加速沿海地区的能源转型,推动地方经济发展,提升沿海地区的生态环境,推动风电技术进展和产业升级,促进能源结构调整具有重要的意义。因此,海上风力发电场应运而生。

介于 2D 组态和 3D 组态上, Hightopo (以下简称 HT) 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案,希望能够抛砖引玉,给大家带来更多海上风电场的思考和讨论。

界面简介及效果总览

Demo 主页面中展示了海上风电场的基本构成,包括一定规模数量的风电机组,输电系统和升压台。风电机组有序排放,叶片随风向和风速不停转动,将海洋上丰富的风的动能经过一系列转换,转化为宝贵的电能输出;每个风电机节点产生的电能经过输电系统源源流动,如同水流般汇聚于海上风电场的“心脏”——升压台。

点击风机叶片,可以进入叶片的微观世界,以微观视角看风机的详细信息,包括风机参数,环境参数,发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成,其中的动画和人机交互也是基于自主研发的组件,依托于 JavaScript 和 HTML5 完成。

实现过程

场景加载

在前面部分,文章提到本案例的场景都是通过自主研发的渲染引擎完成,那么搭建好的场景如何通过代码加载,呈现给用户呢?在 HT 中,我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景,然后通过反序列化完成场景的加载。

开场动画

本案例的开场动画相对比较简单,动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim(),通过启动一个动画对象来使整个动画运行起来。ht.Default.starAnim() 支持 Frame-Based 和 Time-Based 两种方式的动画,Frame-Based 的方式是用户通过指定 frames 动画帧数,以及 interval 动画帧间隔参数来控制动画效果,而 Time-Based 的方式是用户只需要指定 duration 的动画周期的毫秒数即可,HT 将在指定的时间周期内完成动画;还设定了 delay 动画延迟执行的时间来搭配动画实现的效果;easing 参数则是用于让用户自定义函数,通过数学公式控制动画,如匀速变化、先慢后快等效果;action 函数的第一个参数 v 代表通过 easing(t) 函数运算后的值, t 代表当前动画进行的进度 [0, 1],一般属性变化根据 v 参数进行。finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数,通过一些效果的搭配使用,可以使用户达到平滑的动画效果。本案例的开场动画通过设置起始和终止视角的位置,在一定周期内, 使用 setEye(eye) 来完成视角的变化。

风电机组:随风而动,将海上风能转化为电能

在海上风电场项目中,风电机组的数量都是具有一定规模的,这些风电机组收集海上丰富的风能,转化为人类所需的电能。那对于这些一定规模数量的风电机组,如何保证其运行的流畅性呢?本案例使用了 HT 提供的批量 (batch)提高系统性能。

批量的原理即如果图元一个个单独绘制模型时性能较差,但是当一批图元聚合成一个大模型进行一次性绘制时,则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量,再对 Data 使用 .s('batch', 'batchName') 设置对应的 batch 批量名。流程如图所示:

在本案例中,每个风机模型被分为三部分,标签部分1,叶片部分2 和 主体部分 3。在上面图示的 batch 流程中,可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作,但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动,其属性会发生频繁变化,在 batch 里面的图元尽可能避免频繁的变化,如果属性频繁变化,将可能起到反作用。

风电机的详细信息:进入微观视角,将风电机的一切尽收眼底

点击每个风电机的叶片,都能打开风电机的详细页面。在此场景中,我们采用了科技线框风格来展示风电机的内部架构,相对于大部分的实景搭建,感官上更为震撼和炫酷。在展示风机内部结构的同时,两侧还展示了该风机周围的环境参数,海上风向风速信息,风机本身的数据监测,发电参数等。点击风电机的某个部位,可以看到以 billboard 样式展示的详细信息。

输电系统:不辞劳苦,将电能源源不断地输送给升压台

经过风电机转换而来的电能,通过输电系统源源不断地输送给升压台,如同涓涓细流汇入大江大河。在本案例中,输电系统是使用空间管线 ht.polyline 实现的,ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。

在本案例中,输电系统的管道也是数量庞大的,因此也采用 batch 实现。其流程如图所示:

总结

建设海洋强国,寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境,全面、准确而深刻地了解海洋,掌握海洋的运动规律,才能为建设海洋强国提供坚实的基础。开发海洋,经略海洋,保护海洋,拓展蓝色经济空间,已经成为人类生存和社会发展的趋势。海洋经济,海洋科技将来是一个主攻方向,而海上风力发电场作为海洋强国的一部分,也将会涌现一批又一批精品工程,给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发,在力所能及的领域贡献一份力量。

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 49 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-10-13
个人主页被 368 人浏览