Author Archives: eric

分享数百个 HT 工业互联网 2D 3D 可视化应用案例

过去的 2018 年，我们认为是国内工业互联网可视化的元年，图扑软件作为在工业可视化领域的重度参与者，一线见证了众多 HTML5/Web 化、2D/3D 化的项目在工业界应用落地，我们觉得有必要在此分享下过去一年，基于 HT 实施的数百个工业互联网 2D 3D 可视化应用案例，希望能激发行业和学术工作者对可视化的深度思考，为推进国内工业互联网发展出份薄力。

数百个工业互联网2D/3D可视化案例集：http://www.hightopo.com/demos/index.html

提到工业互联网往往会涉及：物联网、IoT、5G、数字孪生、边缘计算、PaaS平台、SaaS应用、产业互联网、互联网+、工业4.0、智慧城市、智慧园区、智慧楼宇、智能制造等概念，但本文将围绕可视化的话题，围绕更基础的 HTML5/WebGL/WebVR 等底层技术，我们觉得业界还没达到智能化、平台化的成熟阶段，走得太快即使是 GE Predix 也会从明星变流星，了解垂直行业需求，采集足够多有效数据，做好实时的、稳定的、美观的、Web 化的 2D 和 3D 数据可视化呈现，是工业互联网需要走好的第一步。

基于 HTML5 WebGL 的地铁站 3D 可视化系统

工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示一个地铁站的现实场景，包括地铁的实时运行情况，地铁上下行情况，视频监控，烟雾报警，电梯运行情况等等，帮助我们直观的了解当前的地铁站。[……]

基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注。
传统的智慧楼宇/楼宇自动化/楼宇安防/智慧园区常会采用 BIM（建筑信息模型 Building information modeling）软件，如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件，但这些 BIM 建模模型的数据往往过于庞大臃肿，绝大部分细节信息对楼宇自控意义不大，反而影响拖累了行业 Web SCADA 或 Web 组态监控的趋势，所以我们采用以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。
ef95587d7f3d4635 [……]

基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型

随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中，尤其是高清时代的来临，更加快了网络摄像机的发展和应用。
在监控摄像机数量的不断庞大的同时，在监控系统中面临着严峻的现状问题：海量视频分散、孤立、视角不完整、位置不明确等问题，始终围绕着使用者。因此，如何更直观、更明确的管理摄像机和掌控视频动态，已成为提升视频应用价值的重要话题。所以当前项目正是从解决此现状问题的角度，应运而生。围绕如何提高、管理和有效利用前端设备采集的海量信息为公共安全服务，特别是在技术融合大趋势下，如何结合当前先进的视频融合，虚实融合、三维动态等技术，实现三维场景实时动态可视化监控，更有效的识别、分析、挖掘海量数据的有效信息服务公共应用，已成为视频监控平台可视化发展的趋势和方向。目前，在监控行业中，海康、大华等做监控行业领导者可基于这样的方式规划公共场所园区等的摄像头规划安放布局，可以通过海康、大华等摄像头品牌的摄像头参数，调整系统中摄像头模型的可视范围，监控方向等，更方便的让人们直观的了解摄像头的监控区域，监控角度等。
ef95587d7f3d4635 [……]

图扑招聘

求贤若渴，诚意求扰

手机/微信：13564678417

邮箱/简历：eric@hightopo.com

HTML5 技术在风电、光伏等新能源领域的应用

随着新一轮工业革命兴起，应对气候变化日益成为全球共识，能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国，以风能、光伏发电为代表的新能源产业发展迅速，可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心，发电技术继续沿着大规模、高效率和低成本方向持续进步，中国在风能和光伏发电领域的累计装机量和新增装机量已经跃居世界首位。

相比传统能源稳定、可控的生产方式，风能、太阳能本身具有先天的不可预测性，很大程度上要“靠天吃饭”，因此构建一个集物联网、大数据、云计算于一体的新能源设备管理平台，提升设备“能量可利用率”与“时间可利用率”，成为企业自身乃至整个新能源产业带来运营管理方式升级与转型的关键，其中必不可少的就是前端大数据可视化的重要环节。

以下是致创能源公司多年前基于 HT for Web 技术实现的 Web SCADA 光伏发电站智能管理解决方案系统截图：

基于 HT for Web 的 HTML5 技术除了在传统电信、电力和工业控制领域的应用外（参见《基于HT for Web的Web SCADA工控移动应用》），如今也已广泛应用于风电、光伏等新能源领域，基于 Web 技术的 HT for Web 天然就是如今物联网监控的 PaaS 和 SaaS 云平台服务首选方案，这里我们将基于一家国内首批采用 Internet of Things (IoT) Solutions | Google Cloud Platform （https://cloud.google.com/solutions/iot/），整合图扑软件 HT for Web 前端图形界面组件中间件，成功打造物联网监控云端大数据平台的一个光伏监控界面为例，为大家介绍这个已陆续应用于全国各地数千余台风力发电机组和光伏逆变器和汇流箱的系统前端技术。
[……]

数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

http://www.hightopo.com/demo/pipeline/index.html

《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果，例如 http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 这个 3D 电信机房监控例子整个都是通过 HT 提供的 API 构建而成。

对于这个餐座椅的例子，特别是一些不规则的花盆、酒杯、圣诞树和那颗爱心，很多人好奇我们是怎么搞出来的。其实蛮简单，就用了《HT for Web 建模手册》中的 createRingModel 和 createExtrusionModel 两个构建模型的函数，其中 createRingModel 顾名思义用来构建围绕一圈的环状模型，createExtrusionModel 用来构建基于某个形状的凸出效果，这两个函数生成的 3D 模型都是靠平面的 2D 图形衍生而来，都是靠 HT 系统中构建 2D 不规则多边形时采用的 Points 和 Segments 两个数组参数搞定， Points 和 Segments 的意义可参考《HT for Web 形状手册》：
[……]

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智能楼宇等应用场景。

HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎，但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术，只需要掌握基本的 3D 坐标系和相机 Camera 的概念，剩下需要掌握的也就是基本 JavaScript 的面对对象编程知识，即可快速开发各种丰富的 3D 场景应用。

大家可玩下电信网管 3D 机房监控系统场景中，常见的服务器机柜和带风扇旋转功能的例子：http://www.hightopo.com/demo/fan3d/demo-enhanced.html

[……]

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.

这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 HTML5 例子，还没体验过的同学可以点击 http://www.hightopo.com/guide/readme.html HT 手册入口玩一玩。

这样综合并可搜索的手册入口居然还常被问及 HT 的 Demo 在哪里？只能怪这些年深入人心的极致用户体验理念，把人惯得包括很多程序员都如此之“懒”，当然也怪我们没把用户体验的最后一公里做到位，于是最近 wangyinlong 同学人工例子抓图，将数百个手册例子进行了归类整理，最终形成了方便大家直观查找所有 HT 例子的页面：http://www.hightopo.com/demos/index.html

Screen Shot 2016-08-09 at 4.46.48 PM [……]

HTML5的WebGL实现的3D和2D拓扑树

在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们来一起目睹下~[……]