告别传统机房：机房3D数据可视化实现智能与VR技术的全新碰撞供配电、UPS、空调、消防、保安等机房，必须时刻为计算机信息系统提供正常信息。操作环境。一旦机房环境和电力设备出现故障，将对数据传输、存储和系统运行的可靠性构成威胁。如果不能及时处理故障，可能会损坏硬件设备，造成严重后果。对于银行、证券、海关、邮局等需要实时交换数据的单位的机房来说，机房的管理显得尤为重要。一旦系统出现故障，所造成的经济损失是无法估量的。因此，很多机房管理人员不得不使用24小时专人值守，定期对机房环境设备进行巡检，不仅增加了管理人员的负担，更多的时候，故障无法排除及时，并且没有对事故发生的时间进行科学管理。随着工业4.0的变革与兴起，以及工业互联网、5G等新基建的发展，工业控制越来越广泛地配备可视化系统。与传统机房相比，智能机房可以节省大量人力。也带来了更稳定的环保。HTforWeb不仅自主研发了强大的基于HTML5的2D、3D渲染引擎，还为可视化提供了丰富的展示效果。在2D配置和3D配置之间，Hightopo的HTforWeb产品（以下简称HT）拥有丰富的配置选项。本文将使用HT搭建一个基于HTML5WebGL和VR技术的3D机房数据中心可视化系统。界面介绍及效果预览在场景搭建中，采用基于HT旗下HTforWeb产品的轻量级HTML5/WebGL建模方案，实现快速建模和轻量级运行，即使是移动端浏览器也可以进行3D可视化运维同时同时配备了HT特有的矢量图标作为控制面板，可以适配各种屏幕的不同分辨率和尺寸，不失真。3D机房场景与2D控制面板相结合，打造机房数据中心可视化系统解决方案。项目预览地址：基于HTML5的WebGL自定义3D摄像头监控模型1.整体场景-摄像头渲染2.局部场景-摄像头渲染系统分析在3D机房数据中心的可视化应用中，随着视频监控联网系统的不断普及与发展与发展，网络摄像机更多地应用于监控系统，尤其是高清时代的到来，加速了网络摄像机的发展与应用。在监控摄像头数量不断增加的同时，监控系统面临着严峻的现实问题：海量视频分散、孤立、视角不完整、位置不清晰等问题始终围绕在用户身边。因此，如何更直观、更清晰地管理摄像机和控制视频动态成为提升视频应用价值的重要课题。因此，本项目就是从解决这一现状的角度出发的。着眼于如何改进、管理和有效利用前端设备采集的海量信息服务于公共安全，特别是在技术融合的大趋势下，如何结合当前先进的视频融合、虚拟现实融合、3D动态等实现3D场景实时动态可视化监控的技术，对海量数据进行更有效的识别、分析和挖掘，以提供有效的信息服务公共应用，已成为视频监控平台可视化发展的趋势和方向。目前在监控行业，海康威视、大华等监控行业的龙头企业可以基于此方法规划公共场所、公园的摄像机布局，并通过海康威视、大华等摄像机品牌的摄像机参数进行系统调整.中间是摄像机模型的可视范围和监控方向，更方便人们直观的了解摄像机的监控区域和监控角度。系统效果实现1.相机模型及场景项目中使用的相机模型是通过3dMax建模生成的。建模工具可以导出obj和mtl文件。在HT中，可以解析obj和mtl文件以生成3D场景。相机型号。项目中的场景由HT的3d编辑器搭建而成。场景中有的模型是用HT建模的，有的是用3dMax建模的，然后导入到HT中。场景中地面上的白光是由HT的3d编辑器制作的。地面纹理呈现的效果。2.锥体建模3D模型是由最基本的三角面构成的。例如，一个长方形可以由2个三角形组成，一个立方体可以由6个面或12个三角形组成。以此类推，更复杂的模型可以由许多小三角形组成。因此，3D模型的定义就是对构成模型的所有三角形的描述，每个三角形由三个顶点vertex组成。顶点构造三角形面的前面。在HT中，函数ht.Default.setShape3dModel(name,model)可用于注册自定义3D模型。摄像机前面生成的锥体就是通过这种方法生成的。圆锥体可以看作由5个顶点和6个三角形组成。具体图如下：ht.Default.setShape3dModel(name,model)1.name为模型名称，如果名称与预定义的相同，则替换预定义的。定义的模型；2.model是一个JSON类型的对象，其中vs代表顶点坐标数组，is代表索引数组，uv代表纹理坐标数组。如果要单独定义一个面，可以使用bottom_vs、bottom_is、bottom_uv、top_vs、top_is、top_uv等定义，然后可以通过shape3d.top.*、shape3d.bottom.*单独控制某个面等。圆锥体建模效果如下：我用当前相机的tag值作为模型的名字。tag标签在HT中用于唯一标识一个原语，用户可以自定义标签的值。使用pointArr记录当前五面体五个顶点的坐标信息。代码中使用from_vs、from_is、from_uv分别构造五面体的底面，用于显示当前相机呈现的图像。在实现中，设置了圆锥样式对象的wf.geometry属性。通过该属性可以将模型的线框添加到圆锥体中，增强模型的三维效果，线框的颜色可以通过wf.color、wf.width等参数调整粗细etc.3.相机图像生成原理1.透视投影。透视投影是在二维纸面或画布平面上进行绘图或渲染，以获得接近真实三维物体的视觉效果的一种方法。它也被称为透视图。透视使远的物体变小，近的物体变大，平行线会先相交，更接近人眼观察到的视觉效果。如上图所示，透视投影最终在屏幕上只显示截锥体（ViewFrustum）的内容，所以Graph3dView提供了eye、center、up、far、near、fovy和aspect参数来控制截锥体具体体的范围。具体透视投影请参考HTforWeb的3D手册。根据上图的描述，在本项目中，初始化相机后，可以缓存眼睛的位置和当前3d场景的中心，然后可以设置眼睛和3d场景的中心到摄像头中心点的位置，然后在获取当前3D场景此时的截图，也就是当前摄像头的监控画面，然后将3D场景的中心和眼睛设置到positions一开始缓存的眼睛和中心。该方法可以实现任意位置的3D场景抓拍，从而实现摄像机监控图像的实时生成。摄像头成像效果如下：经过测试，该方法获取图像会导致页面卡顿，因为是获取当前3D场景的整体截图。由于现在的3d场景比较大，toDataURL获取图片信息很慢，所以我采取了离屏的方式获取图片，具体方法如下：1.新建一个3d场景，设置width和当前场景的高度为200px，并且当前3d场景的内容与主屏相同。newht.graph3d.Graph3dView(dataModel)用于在HT中创建新场景。其中的dataModel是当前场景的所有图元，所以主屏和离屏3d场景共享同一个dataModel，保证与场景一致。2.将新建场景的位置设置到屏幕上看不到的地方，并添加到dom中。3、将之前在主屏上获取图像的操作改为在屏外获取图像的操作。此时离屏图像的尺寸比之前在主屏上获取的图像要小很多，离屏获取不需要保存原来的眼睛位置和中心位置，因为我们没有改变眼睛的位置和主屏幕的中心位置，因此切换带来的开销也减少了，相机获取图像的速度也大大提高了。在透视的实现中，有一个getCenter方法，用于获取A点在3d场景中的位置，该方法是在3d场景中A点绕B点旋转一个角度得到的。该方法使用HT封装的ht.Math的如下方法这里应用于vector的部分知识如下：OA+OB=OC该方法分为以下几个步骤来求解：varmtrx=newht.Math。Matrix4()创建一个变换矩阵，通过mtrx.makeRotationFromEuler(euler.set(r3[0],r3[1],r3[2]))得到围绕r3[0],r3[1],r3[2]即x轴、y轴、z轴。通过newht.Math.Vector3()创建两个向量v1和v2。v1.fromArray(pointB)是创建一个从原点到pointB的向量。v2.fromArray(pointA)是创建一个从原点到pointA的向量。v1.fromArray(pointB).sub(v2.fromArray(pointA))是向量OB-OA，此时得到的向量是AB，此时v1就变成了向量AB。v2.copy(v1)v2向量复制v1向量，然后通过v2.copy(v1).applyMatrix4(mtrx)将旋转矩阵应用于v2向量。变换后，v1向量绕pointA旋转后成为向量v2。此时通过v2.sub(v1)，起点为pointB，终点为pointB旋转后的点组成的向量。向量现在是v2。向量公式得到旋转后的点为[pointB[0]+v2.x,pointB[1]+v2.y,pointB[2]+v2.z]。项目中的3D场景实例，其实就是海拓近期贵州数博会的VR实例，HT上的工业互联网展台。大众对VR/AR抱有很高的期望，但这条路还是要一步一步走，即使已经融资23亿，MagicLeap的首款产品也只能是FullofShit。这个话题稍后会展开。下面是上节场景的视频照片：2.3D模型上粘贴2D图像。通过上一步的介绍，我们可以得到当前相机位置图像的截图，如何将当前图像粘贴到之前构建的五面体的底部呢？最下面的矩形是由from_vs、from_is构造的，所以在HT中可以将五面体样式中的shape3d.from.image属性设置为当前图像，其中from_uv数组用于定义贴图的位置，如下图所示：定义纹理位置的代码from_uv:from\_uv:\[0,0,1,0,1,1,0,1\]from_uv是定义纹理的位置数组。根据上图的解释，可以将2d图粘贴到3d模型的from面上。3.在控制面板HT中，使用newht.widget.Panel()生成如下图所示的面板：面板中的每个摄像头都有一个模块来呈现当前的监控画面。其实这个地方也是一个canvas，配合场景中锥体前面的监控图像是同一个canvas，每个摄像头都有自己的canvas来保存摄像机的实时监控图像当前相机，这样画布就可以粘贴到任何地方，将画布添加到面板的代码如下：formPane.addRow(\[{2element:camera.a('canvas')3}\],240,240);代码中，canvas节点存放在camera图元的attr属性下，然后可以通过camera.a('canvas')传入，获取当前相机图像。面板中的每个控制节点都是通过formPane.addRow添加的。详见HTforWeb的表单手册。然后通过ht.widget.Panel将表单面板formPane添加到面板面板中。详见HTforWeb面板手册。控制面板通过addRow添加控件元素，实现方法是添加相机绕y轴旋转的控制。onValueChanged在滑块的值改变时被调用。此时使用camera.r3()获取当前相机的旋转参数。因为它是绕y轴旋转的，所以x轴和z轴的夹角是恒定的，改变y轴的旋转角度，所以通过camera.r3([cameraR3[0],this.getValue(),cameraR3[2]])调整相机的旋转角度，通过rangeNode.r3([cameraR3[0],this.getValue(),cameraR3[2]])，然后调用之前封装的getFrontImg函数来获取此时旋转角度下的实时图像信息。项目中可以通过Panel面板的配置参数titleBackground:rgba(230,230,230,0.4)将标题背景设置为带透明度的背景，其他类似的标题参数如titleColor,titleHeight等可以通过separatorColor、separatorWidth等进行配置。split参数可以设置内面板之间的分割线的颜色、宽度等。最后panel通过panel.setPositionRelativeTo('rightTop')设置panel的位置为右上角，通过document.body.appendChild(panel.getView())将panel的最外层div添加到页面中，panel.getView()用于获取面板最外层的dom节点。在控制面板中，可以调整摄像头的方向、摄像头监控的辐射范围、摄像头前方锥体的长度等，实时生成摄像头的图像。以下是运行截图：以下是本项目使用的3D场景结合HTforWeb先进的VR技术实现的操作：概要3D机房数据中心可视化系统保证了机房日常运行的监控状态机房在很大程度上，及时反馈机房内部的实时信息，这是可视化系统的一大优势。对接数据的可视化展示，数据变化的集中监管，突发事件的捕捉，及时的响应预案，很大程度上发挥了智慧机房的最大价值，可视化系统的用处还是很大的。广义上，在各行业监管的可视化展示，以及自身产品的研发上，HT积累了很多解决方案。感兴趣的小伙伴可以看看：3D线框图数据中心机房2019我们还更新了上百个工业互联网2D/3D可视化案例集，在这里你可以找到很多新奇的例子，发现不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA同时，您还可以查看更多案例及效果：https://www.hightopo.com/demos/index.html
