基于HTML5的燃气3D培训仿真系统

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

最近上线了的基于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

目录
相关文章
|
6月前
|
前端开发 JavaScript API
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
157 0
|
2月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统1:设计界面
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
|
2月前
|
存储 文字识别 前端开发
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
|
2月前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
|
2月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
3月前
|
前端开发
HTML+CSS 速成10分钟!一键实现你的后台管理系统首页梦想!
HTML+CSS 速成10分钟!一键实现你的后台管理系统首页梦想!
|
3月前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴