Web 3D智能数字机房,HTML5+WebGL匠心打造
来源:互联网 发布:乐拼积木 淘宝 编辑:程序博客网 时间:2024/06/11 17:53
在html5里面使用3D已经不是什么高深技术,它的基础是WebGL,一个OpenGL的浏览器子集,支持大部分主要3D功能接口。目前最新的浏览器都有比较好的支持,IE需要到11。
最近web 3D机房开发任务告一段落,刚好有时间整理这大半年的一些成果。使用html5时间还不久,对js的认识还不够深入。
目标效果图
下图是机房3D效果图http://www.ipleasure.cn/3droom/
机房线缆和走线架
线缆的连接走向和连接关系是管理员关注的焦点。机架中的网络设备或服务器设备会通过端口和线缆进行连接,组成一定结构的网络。而线缆的走向在物理上通过肉眼是很难看清晰的。更多线缆会从机柜连出,延伸到屋顶上方或地板下方的隐蔽工程中(例如走线架)固定和布线,用肉眼更无法观察。此刻,需要3D机房界面能清晰的显示电缆从端口到走线架再到端口的“端到端”的物理走线,方便管理员了解网络走线情况和管理。
机柜利用率
项目还有个需求是显示机柜的整个空间使用率情况。使用率不用显示具体哪里占用哪里空闲,只要显示一个整体使用比例即可,相对简单一点。先用一个线框把机柜位置显示出来,再把一个高度符合使用比例的立方块显示出来就行了,类似一个柱状图。设置一下颜色、光照等属性,让它看上去更真实:
空调风向
机房中的空调冷风流向也是一个需要监控的业务。一般冷风从地板下方吹出、穿过机柜从上方流走。如果有通道的情况,冷风的冷却效效率会更好。下图展示了冷风是如何流动的。其中箭头会用流动的动画效果展示。
防盗监测
机房会严格限制人员的进入。对于敏感区域,可以放置防盗红外或激光探头,当有人员通过,会立刻发起警报,起到防止进入和防盗的效果。报警激光对射防盗在各种场景中已经屡见不鲜了:
机架可用空间
服务器陆续上架后,会对机柜的空间产生占用和分隔。及时了解整个机房中每个机架的占用情况和空闲空间的大小情况,是非常重要的日常工作。通过3D来呈现就再适合不过了:我们把有服务器占用的空间用白色块填充,有空闲的空间根据大小不同用不同的色块填充,就有了下方的效果:
烟雾监控
现在的建筑中一般都有烟雾监控传感器,当有烟雾发生时会发生报警。下图模拟了当发生烟雾的情况,我们在着火点用一团烟雾来渲染,增加场景的逼真度。同时通过动画,来模拟烟雾的冒出情况。
电源走线
连线管理可以包括强弱电、音视频的布线走线显示。每一个机柜的供电线布局走线,可以通过不同的颜色和走向进行显示。这样会比传统的表格或2d图形显示更加直观。
资产管理功能
查看机房硬件、软件资源信息和实时数据。机房管理员可以快速查看设备运行状况,包括设计基本信息(IP地址、U数、运行软件信息等)和实时数据(CPU、硬盘、内存利用率、上下行带宽利用率、流速等),对设备进行上架下架。动力环境监控
动力环境监控的对象主要是机房动力和环境设备等设备,像配电、UPS、空调、温湿度、漏水、门禁、安防、消防、防雷等等,这些通常会有独立的采集和监控系统,我需要做的是把动环的效果用3D呈现,并且和系统的真实数据进行对接。
温度云图模拟了热衰减的过程,并在地板上留下痕迹。同样,纵向的设备上也通过温度数值来生成色差不同的温度图贴在机架上。
- Web 3D智能数字机房,HTML5+WebGL匠心打造
- 基于HTML5的WebGL电信网管3D机房监控应用
- 基于HTML5的WebGL电信网管3D机房监控应用
- 基于HTML5的WebGL经典3D虚拟机房漫游动画
- HTML5拓扑3D机房
- HTML5+WebGL:构建 3D 网页新世界
- HTML5+WebGL:构建3D网页新世界
- HTML5+WEBGL+PHP实现3D模型
- HTML5 WEBGL学习1 3D基础知识
- HTML5,不只是看上去很美(第二弹:打造最美3D机房)
- 打造最美HTML5 3D机房 —— 第二季重磅回归
- 打造最美HTML5 3D机房(MONO哥强势归来,第四季惊艳发布)
- 用webgl打造自己的3D迷宫游戏
- 打造最美HTML5 3D机房(第三季,新增资产管理、动环监控等效果)
- 打造最美HTML5 3D机房(第四季:大型园区、地球仪效果,及其他扩展)
- HTML5 WebGL Three.js 加载 3D模型文件
- 基于HTML5 WebGL实现3D飞机叶轮旋转
- 基于HTML5 WebGL实现3D飞机叶轮旋转
- 笔记
- QT无缝切换多语言
- linux ls 命令 (查看文件列表命令)
- JavaWeb: Spring框架学习2(注解)
- MainActivity and its super classes have no public methods with the @Subscribe annotation
- Web 3D智能数字机房,HTML5+WebGL匠心打造
- WEB项目web.xml文件中classpath: 跟classpath*:使用的区别
- 【theano-windows】学习笔记五——theano中张量部分函数
- redis_cluster命令官方文档翻译及实践
- java前端技术---javaScript使用详解(应用篇)
- 2018美团点评内推笔试编程题2
- leetcode 26 Remove Duplicates
- 数据库基础---三种抽象两种数据独立性
- HUSTOJ 1102: 那些四位数之二