三维可视化# #3D开发
- WebGL 3D技术
- 新一代3D框架-ThingJS
- 3D可视化告警零碎案例
- 基于ThingJS的通用架构设计
WebGL 3D技术
WebGL是一种在网页浏览器中渲染3D图形的 JavaScript API，无需加装插件，只需编写网页代码即可实现3D图形的展现。WebGL技术相较于传统的Web3D技术有两大长处：第一，通过JavaScript脚本语言实现网络交互式三维动画制作，无需依赖任何浏览器插件；第二，WebGL基于底层的 OpenGL接口实现，具备底层图形硬件(GPU)减速性能。
WebGL绘制3D模型的过程分为四个步骤如下：
第一，获取顶点坐标。顶点坐标通常来自三维软件导出，在获取到顶点坐标后，存储到显存以便GPU更快读取；第二，图元拆卸，画出一个个三角形。图元拆卸就是由顶点生成一个个图元(即三角形)，这个过程是由顶点着色器实现的。顶点着色器会先将顶点坐标通过矩阵变换为屏幕坐标，而后由GPU进行图元拆卸；第三，进行光栅化，即生成片元 (一个个像素点)。第四，在图元生成结束之后，还须要给模型“上色”，由运行在GPU的“片元着色器”来实现。
新一代3D框架
如果间接应用 WebGL开发3D效率比拟低，须要开发者对图形学常识有很深刻的理解，碎片化的概念并不易于开发。为了解决开发效率低的问题，呈现了基于 JavaScript语言的第三方库-three.js，这是开源的技术，受到了宽广前端转3D开发师的追捧。
three.js是一个跨浏览器的脚本，它封装了底层的图形接口，对 WebGL有很好的反对，不须要把握简单的图形学常识就能实现三维场景的渲染。如渲染彩色背景下的红色正方体和三角形, WebGL须要编程代码大概150行，而 threejs编程只须要30行左右的代码，工作量只有 WebGL的五分之一，大幅提高了开发效率。
相较而言，近两年新兴的3D框架-ThingJS，封装了简直所有的3D概念，开发人员甚至不须要3D专业知识储备，间接应用JavaScript调用3D源码，轻松实现3D成果，顺利完成二次开发。如加载3D场景，three.js须要100行左右的代码，ThingJS仅需1行，间接JavaScript脚本调用3D场景URL。
3D可视化告警零碎案例
3D可视化告警零碎常见于城市交通指挥、地铁通信、智能家居、消防安全畛域，工业自动化设施运维治理过程中，常遇到故障设施定位艰难、监控数据不形象不直观等问题，基于 WebGL技术的3D框架开发，本案例实现了一个通用的3D可视化告警零碎设计方案，不仅解脱了传统3D可视化计划依赖插件的解放，解决了出错率高、数据难以积淀等问题。
从用户角度登程，采纳 WebGL技术在浏览器端对工业生产设施进行虚拟化仿真模仿，并基于综合监控治理平台采集到的设施运行数据进行车间设施运行状况的形象立体化展现，3D场景动效给管理者以良好的沉迷感和交互感，解脱表格、文本等比拟传统的治理形式。
某港口的数字告警监控可视化利用界面
基于ThingJS的通用架构设计
一个通用的告警零碎，分为数据存储层、数据处理层和数据展现层。
数据存储层次要应用 mysql数据库存储设备、数据根本信息和采集到的告警信息，应用json文件存储3D模型数据信息；数据处理层次要联合Ajax数据对接形式在线判断告警信息，利用JavaScript脚本对数据进行解决剖析以及业务逻辑的实现；数据展现层次要应用基于 WebGL的 ThingJS平台组件实现对3D场景的加载渲染，并提供在线我的项目分享性能，用户能够生成惟一URL和二维码，在其余web零碎嵌入iframe链接进行演示。【官网注册链接】
1. 根底性能构建
根底操作含3大功能模块：设施治理模块、3D场景漫游模块以及设施衰弱状态治理。
(1) 设施治理。
用户能够查看设施根本信息，通过拖拽的模式扭转设施在场景中的地位，实现设施的缩放和旋转操作，还能够依据本人的须要增加和删除设施。ThingJS的开发师调用js脚本，管制物体的地位、旋转、缩放，包含Z轴方向挪动。【查看残缺示例】
// 地位app.on('click', function(event) { if (event.picked) car.position = event.pickedPosition;});// 挪动，z轴方向function obj_translate() { car.translate([0, 0, -1]);}// 旋转，y轴方向function obj_rotate() { car.rotateY(45.0);}// 缩放function obj_scale() { car.scale = [1, 2, 1];} (2) 3D场景自在漫游。
用户通过鼠标实现对整个3D场景的挪动，缩放和旋转操作，从而满足用户360度查看场景的须要，给用户带来良好的交互感和浸入感。ThingJS示例采纳js脚本让摄像机主动盘绕某看点地位（世界坐标系下）或某物体旋转。【3D演示】
某能源储能电站告警零碎可视化利用
(3) 设施衰弱状态治理。
用户可自在查看机房内任意设施的衰弱度，衰弱度分为三个区间，别离用红黄绿三种色彩来示意设施的衰弱状态。当零碎检测到设施呈现告警信息时，在该设施的上方弹出对应的告警标记，用户点击告警标记，弹出告警详情，包含告警工夫、告警类别、告警起因等。ThingJS平台内，基于Ajax技术能够实现根本的数据申请，对设施温度、衰弱状态进行判断，并设定一个报警界线值。【查看残缺示例】
function updateData(obj) { // 如果网站是 https 接口则对应 https 申请 // 如果网站是 http 接口则对应 http 申请即可 $.ajax({ type: "get", url: "https://3dmmd.cn/getMonitorDataById", data: { "id": obj.id }, dataType: "json", // 返回的数据类型 json success: function (d) { console.log(d); var temper = d.data.temper; // 设置物体身上的监控数据 obj.setAttribute("monitorData/温度", temper); changeColor(obj); // 每隔3s 申请一次数据 timer = setTimeout(function () { updateData(obj) }, 3000); } });}// 进行申请数据function stopUpdate() { clearTimeout(timer);}// 如果温度>25 扭转色彩function changeColor(obj) { var temper = obj.getAttribute("monitorData/温度"); var value = temper.substr(0, temper.indexOf("℃")); if (value > 25) { obj.style.color = 'rgb(255,0,0)'; } else { obj.style.color = null; }}2. 主动巡航性能
不仅仅是主动驾驶零碎，工业设施可视化也能够退出主动巡航性能，以匀速的状态挪动后退。
用户能够依据厂房环境和设施布局状况，设定巡航门路，当用户点击主动巡航按钮时，能够沿着设定好的门路进行巡视，无需用户手动操作，就可能对门路上的设施衰弱状况进行全局理解，大大减少了用户的工作量，进步了工作效率。
ThingJS利用js脚本中的摄像机概念来确定察看3D场景的视角，让摄像机始终追随物体，达到设定巡航路线的目标。【查看残缺示例】
new THING.widget.Button('摄像机追随物体', function () { // 每一帧设置摄像机地位 和 指标点 car.on('update', function () { // 摄像机地位为 挪动小车后上方 // 为了便于计算 这里用了坐标转换 将绝对于小车的地位 转换为 世界坐标 app.camera.position = car.selfToWorld([0, 5, -10]); // 摄像机指标点为 挪动小车的坐标 app.camera.target = car.position }, '自定义摄影机追随'); }); new THING.widget.Button('进行', function () { car.off('update', null, '自定义摄影机追随'); });}); ThingJS我的项目次要采纳B/S架构，基于WebGL技术并采纳更高效的3D封装库实现，用户间接在浏览器上通过url地址拜访我的项目，不须要装置任何插件。
ThingJS平台的在线开发计划在浏览器端对自动化设施以及各个监控零碎采集到的设施运行数据进行三维仿真模仿，不仅使得3D数据的展现更加形象、平面，达到了辅助运维的目标；同时一次在线开发，能够在多种终端设备、多种屏幕尺寸的零碎上运行，随时随地查看监控画面，大大降低了经营老本，缩小了3D可视化我的项目的施行工夫和老本。