HTML5 和 WebGL 技术可用于三维可视化开发吗?

html-css05

HTML5 和 WebGL 技术可用于三维可视化开发吗?,第1张

可以呀,html5 和 webgl 技术都可以用于三维可bai视化开发。

Hightopo 提供了一套独特的 WebGL 层抽象,将 Model–View–Presenter (MVP) 的设计模型延伸应用到了 3D 图形领域。

HT是由图扑软件 独立自主研发的,基于HTML5技术标准的前端2D、3D图形开发框架。其提供了从SDK的API组件库到2D 、3D编辑器到矢量图标和三维模型资源库,构成一站式的数据可视化解决方案。

可搜索 图扑软件 申请试用!

更多资料

图扑软件(Hightopo)是由厦门图扑软件科技有限公司独立自主研发,基于HTML5标准技术的Web前端2D和3D图形界面开发框架。非常适用于实时监控系统的界面呈现,广泛应用于电信网络拓扑和设备管理,以及电力、燃气等工业自动化 (HMI/SCADA) 领域。

多年来数百个工业互联网可视化项目实施经验形成了一整套实践证明的高效开发流程和生态体系,可快速实现现代化的、高性能的、跨平台桌面Mouse/移动Touch/虚拟现实VR图形展示效果及交互体验。

第一、【Google Web Toolkit】是现在大家还不熟悉的工具之一,主要用于开发浏览器应用的一个工具,不过库中支持很多【HTML5】的功能,包括对客户端,或者是web存储的支持,都可以实现。

第二、还有一种是【JetBrains WebStorm】工具,需要创建HTML文档时可获得对【HTML5】文件的支持,现在的运用很多,比如砍伐者键入,使用者可以在【chrome】浏览器中及时的预览【HTML】的文档很方便。

第三、微软的【Visual Studio 2010 SP1】中提供了IntelliSense这个项目,也就是说追加了针对【HTML5】的一些元素,总体使用起来还是比较好的,但是我们要结合【ddhu】的一些实用工具。

第四、【Dojo Foundation Maqetta】是一个不错的选择,这款是工具是来自于【IBM】项目之一,【Dojo Foundation Maqetta】是为桌面和移动设备开发HTML5应用的开源工具,浏览器即可使用。

第五、当然还有【Sencha Touch2】是移动应用框架的一种,可以当做一个重要【Sencha】的HTML5平台,使用者可以用它开发面向【iOS】进行制作和使用,也可以【Android】和【Blackberry、Kindle Fire】使用。

第六、现在我们继续介绍【Sencha】,这款工具的主要定位是【HTML5】的可视化开发研究,一般来说开发团队可以在一个任务,然后做一个集成的环境,然后在这个环境中完成应用的设计和开发,以及需要的部署。

第七、我们来介绍一下【Adobe ColdFusion 】,这款工具主要是用来开发企业【Web】程序的一个技术,通过【Websockets】和互动表单以及视频等来做出【HTML5】技术,创建一种用户体验。

第八、最后【Adobe Dreamweaver CS6】作为一个【Web】端口的一种设计软件,这款工具提供了对【HTML】网站和移动程序的可视化编辑界面,整体来说使用也是比较的方便。

最近因为工作需要做了点HTML5可视化研究如下

为什么没有字体颜色作为一个设计师很不爽

第一次发文有写错的地方还请诸位高手多多包涵

设想,要在页面中生成大量的简单图形,比如10万个方块,并对它们进行拖拽操作。

基本思路有三种方式,传统Div,Svg,与Canvas。

为了加拖拽,暂时没有用canvas。

因为canvas无法生成dom节点,不存在id这种属性,需要通过判断鼠标位置来获取元素再进行操作。虽然写个isMouseinObj()的function也不是不行,但总觉得以后针对某对象单独处理会夜长梦多(主要还是懒)。。。不过从生成图形角度讲,canvas理论上是最快的。

因为贪生怕死担心Dom过多死机,准备先分区生成方块,于是:

一个简图,整体划分如下,设两个input框的值分别为m, n,每个蓝块包括n个绿块。点击每个蓝块可在下方生成n个绿块。

点击GenAll可一次性生成m*n个绿块。点击Drag可对绿块进行拖拽。

模拟开始。

首先是用div模拟方块。因为比较熟悉写起来也简单。

Div的拖拽方式可以分成两种。

Jquery-ui的draggble还有很多其他参数,请参考api文档。

现在假定一种新情形:绿色方块只能拖拽到虚线框之内。

默认情况下,Html元素均不可拖拽,所以需要设置拖拽元素的draggable属性为true。同时,默认无法将元素放置到其他元素中,所以需要event.preventDefault()设置允许放置。

本例中,为class为abox的绿方块添加draggable。

为class为wrap的虚线框添加preventDefault。

之后通过dataTransfer传输数据,实现box的移动。

由于Svg也是直接在Html中生成Dom节点,理论上Div所能实现的功能它都可以实现,并且绘图效果更佳。

然后生成Svg元素,并设置其属性。

循环生成Svg方块并添加拖拽属性。

但这种方式有个问题,就是——慢。当生成仅10000个方块时,效率便低的不可估量。

然而Svg无法应用Html5原生的Drag and Drop事件。

相比于引用插件,这样的效率提高了不少。

从结果上看,在数量少时,针对方块这种简单图形的简单操作Div和Svg均可胜任。然而设置了总共生成100000个方块,发现单从生成的角度,Svg的渲染用时大约是Div的1/2(这里指Dom中直接绘制Svg而非通过js插件绘制Svg)。

加上拖拽功能后,用Html5原生拖放事件的Div,及用鼠标事件的Svg,明显快快快快于应用js插件拖放的效率。于是乎插件虽然强大但对于大量节点的处理实在过于缓慢。

于是在图形化上还是应用Svg更舒畅一些。

但有一个尚未解决的问题。

应用鼠标事件拖动Svg,当鼠标移动过快时,mousemove事件无法触发,导致移动效果不能实现。粗略查了下似乎可以添加透明背景层接收所有触发事件,不过还没有深入研究。

这篇就到此吧。等解决了mousemove的bug再更新后续。

(´・ω・`)