最近上线了的基于HTML5的燃气3D培训仿真系统，以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的，OSG引擎性能和渲染效果各方面还是不错的，但因为这次新产品需求要求能运行多移动终端，多年前基于MFC封装OSG的老系统架构也实在该退休了，这年头找能维护MFC这种古董级GUI的靠谱人也非易事。

系统最终采用HT for Web的3D框架实现，项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命，虽然大家都只有C++的开发经验，对HTML/CSS/JS并不熟悉，但毕竟HT for Web已经做了极佳的组件封装，CSS和DOM、包括跨平台的兼容性等棘手问题交给HT框架透明处理，程序员只需要掌握基本的js用法就可以快速上手，按HT的说法类比与关系数据库ORM(Object-relational mapping)映射框架，HT提供的是OVM(Object-View mapping)的框架，只需要基本的面对对象的js操作即可驱动控制各种View组件，当然对于明白原理的人依然可以不受框架约束自如操作HTML的View层。

系统主要分为设备介绍、门站组装、业务培训和模拟考核四大部分：

让我感觉比较爽的是控制3D图元部分，以前不同的设备类型得体力活的写一堆代码，才能好不容易的实现些旋转移动等操作控制，界面控件和3D模型之间的数据同步也得费不少劲，现在用js这种动态语言真是非常灵活，界面都可以非常方面的动态生成，加上HT for Web统一的数据模型自动就能处理好3D图元与控件之间的数据绑定和联动，我干起活来就像搭积木一样轻松，脑子里想的就是业务功能和业务数据，不用再去折腾不同组件如何同步这些数据，控件也无需做什么特殊扩展。

当然目前项目还仅仅是初版移植，业务功能上还未有太大创新，但就目前的进度我们已经体会到HTML5的开发快速性，js语言也不是想象中那么弱，团队控制好一定的编码规范后js的灵活性带来的开发进度提高还是非常显著，刚开始选型大家还在争论OSG基于C++和OpenGL的性能会优于JS和WebGL的方案，但现在回头看我们还是走对路子了，毕竟我们这样的企业应用也不需要像游戏级别的渲染和性能的要求，产品发布轻量，开发可快速迭代更是我们需要追求的路线。

以下是一段平板上的操作视频供参考 http://v.youku.com/v_show/id_XNzA0NjE2MjY0.html

基于HTML5的燃气3D培训仿真系统的更多相关文章

  1. 基于 HTML5 + WebGL 实现 3D 可视化地铁系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  2. 基于 HTML5 WebGL 的 3D SCADA 主站系统

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 的模拟一般需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算是我对这次项 ...

  3. 基于VR技术的输电线路巡检仿真系统

    基于VR技术,搭建电力输电仿真系统用于培训,提供用户沉浸式学习体验.交互式操作体验,VR设备能够提供沉浸式真实感的模拟场景,使得输电线路巡检内容视觉化,跨越了空间和时间的限制,有针对性的解决传统输电运 ...

  4. 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统

    前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...

  5. 基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用

    基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用 前言 在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接 ...

  6. 基于 HTML5 WebGL 的智慧楼宇可视化系统

    前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...

  7. 基于html5顶部导航3D翻转展开特效

    基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header cla ...

  8. 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...

  9. 基于 HTML5 + WebGL 实现 3D 挖掘机系统

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

随机推荐

  1. Find Minimum in Rotated Sorted Array leetcode java

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...

  2. Awesome C/C++

    Awesome C/C++ A curated list of awesome C/C++ frameworks, libraries, resources, and shiny things. In ...

  3. bash可改动的环境变量

    环境变量名 变量的用途 CDPATH 包括cd命令要逐个查找的路径,cd命令在这些路径下查找作为參数传递给它的文件夹名.假设CDPATH没有设置,cd命令则查找当前文件夹 EDITOR 用户在程序中使 ...

  4. 奇怪吸引子---TreeScrollUnifiedChaoticSystem

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  5. 奇怪吸引子---Sakarya

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  6. ld: library not found for -lPods-AFNetworking

    工程新添加了 AFNetworking  使用pod ,pod install 完成后,编译报错 ld: library not found for -lPods-AFNetworkingclang: ...

  7. Spark随机森林实现学习

    前言 最近阅读了spark mllib(版本:spark 1.3)中Random Forest的实现,发现在分布式的数据结构上实现迭代算法时,有些地方与单机环境不一样.单机上一些直观的操作(递归),在 ...

  8. 倒计时,js

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. RabbitMQ学习笔记5-简单的RPC调用

    利用空的queue名字("")让rabbitMQ生成一个唯一的队列名称,同时指定队列是:临时的(auto-delete).私有的(exclusive). 在发送的RPC调用消息里设 ...

  10. android OOM分析工具LeakCanary

    http://my.oschina.net/u/255456/blog/523659?fromerr=oGosxKBf LeakCanary 只是探测到可能出现内存泄露,然后dump 一个java h ...