- 博客(112)
- 收藏
- 关注
RSS订阅原创 VR技术在数据中心3D机房中的应用 （下）
VR技术在数据中心3D机房中的应用 （下） 前面给大家简单科普了一下VR的硬件设备以及VR在各个领域的应用，是不是觉得非常高大上？千言万语概括成一句话，VR能给用户带来前所未有的沉浸感和交互方式，让人足不出户就能够接触到外面的世界。世界那么大，我想去看看，可是我又懒，那该怎么办？于是，VR就这么火了。 相信很多人都跟我的朋友A一样，觉得VR是高科技，太先进，太高不可攀了。然而事...
2017-06-01 14:23:18
319
VR技术在数据中心3D机房中的应用（上）
VR技术在数据中心3D机房中的应用（上） 前两天跟朋友A吃饭，吃着吃着就说到了VR。近几年来，VR技术越来越火，感觉能跟VR沾点边的都特别高大上，朋友A也是，一提到VR，就怎么都掩盖不住他发自肺腑的敬仰之情。好吧，作为一个技术宅，我觉得是时候说点跟VR相关的事儿了。 VR，也就是 virtual reality的缩写，全称是虚拟现实。从字面上理解，就是这种技术能把现实中的一...
2017-05-31 17:25:05
423
HTML5数据可视化第四弹：交互式地铁线路图
前言 最近特别忙，承蒙大伙关照，3D机房的项目一个接着一个，领了一帮小弟，搞搞传帮带……有个小弟很不错，勤奋好学，很快就把API都摸透了，自己折腾着做了个HTML5的魔都的地铁线路图，能拖能拽的，还和电子地图做了交互。哥决定把小弟的成果给大家展示一下。 效果图对比 网上的地铁图还是很多的，小弟选了这张比较新的做参考。想当年哥来魔都打拼时，图上可就一红一绿打个叉……暴露年龄...
2016-12-13 15:25:03
1087
10个TWaver网页3D可视化精彩案例
以下网页3D案例均为TWaver原创出品，推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后，如需Demo，可直接申请试用。 1、化学元素周期表 六种排列方式，炫酷动画效果，TWaver 3D轻松实现。 演示地址：http://demo.servasoft.com/chemical-table/ ...
2016-12-09 14:05:30
366
2
原创 HTML5数据可视化第三弹：萌萌哒拓扑图分组
前言 最近忙着给客户折腾一个复杂的多层嵌套关系。客户一句话“要好看！”，哥就忙白了头啊，还好最终搞定了。 需求描述 先简单描述下这次客户的需求。现实应用中，网络拓扑图结构可能很简单，也可能非常复杂。比如这种节点较多的单层拓扑：稍复杂一些的： 再复杂一些的： 在这些拓扑图中常见的场景是，很多网络节点需要组成一组，这常被称为“网元组”...
2016-12-02 09:55:06
996
TWaver3D拓扑图之人在江湖
俗话说，有人的地方就有江湖，江湖就是帮派林立错综复杂的关系网。今天我们就来展示这样一个小小的江湖。 故事背景 崇祯末年，民不聊生，烽烟四起……江湖都是有背景的，我们的3D江湖也需要一个背景。江湖就是一个舞台，舞台就要有空间、场地、灯光和观众。在我们的3D舞台中，box就是空间，容纳所有物体；network就是场地，展示千姿百态；PointLight和Ambie...
2016-11-23 15:43:35
398
TWaver3D拓扑图之球花绽放
这样一簇绚烂丰满艳丽多姿的3D小球花，要多少代码才能完成？其实不足百行，您信吗？下面咱就看一下具体实现过程，让您分分钟学会用TWaver HTML5制作3D拓扑图。搭建3D空间首先为花簇的绽放建一个展示的舞台。接触过TWaver2D的都知道，box、network是必不可少的，但对3D场景来说，还远远不够。一是要添加镜头位置，确定我们在什么角度和距离进行观察；二是要加上灯...
2016-11-22 15:20:06
498
原创 两步创建3D数据中心
TWaver 3D发布也有很长一段时间了，相关的应用和项目也做了不少，特别是3D机房，可是有些用户反馈说3D机房开发起来有些费劲，耗时，3D并不像2D，虽然有时更加的直观，但是需要考虑的问题还挺多的，模型、材质、效率，交互，以及视角等等。 比如：一个机柜有可能有许许多多个3D对象组成，因此要对其进行操作，例如：打开机柜门，添加或删除设备，查看某个设备时让其他的设备都虚化掉等类似功能，对于很...
2016-11-21 14:26:10
178
一款最新的Web 3D开发工具—TWaver Make
在我们协助客户进行3D应用的开发过程中，客户遇到的最头疼的问题是如何在短时间内学会使用TWaver 3D引擎，以及使用TWaver 3D来创建和导入项目所需的各种3D业务模型。由于项目涵盖的行业繁多、对模型种类和精度的需求各异，为了降低TWaver底层引擎的使用难度，TWaver发布了一款全新的模型库框架TWaver® Make，来帮助开发者快速创建高质量、专业的行业可视化应用场景。 简...
2016-04-13 17:24:55
831
HTML5+WebGL 3D机房开发实例
前阵子写了一篇HMTL5 3D机房开发的例子http://twaver.iteye.com/blog/2215863，介绍了如何用html5在网页上创建无插件的精美3d机房场景，收到很多朋友的鼓励，深表感谢。对于索要源代码的朋友，已经尽力邮件回复。由于精力所限，如未能收到的朋友请留言或给我发送邮件：tw-service@servasoft.com。最近项目第二期又要紧锣密鼓地开始了，所以想抓紧...
2015-09-30 15:28:14
3917
18
HTML5 3D水源监控系统
天津港爆炸事件后，除了安置群众、追究事故责任外，人们最关心的莫过于爆炸污染物对于周边环境的影响，其中最重要的一块就是饮用水的安全。所幸的是，水源的安全监测是实实在在有据可依的。环保单位和供水企业在建设自己的饮用水水源监控系统，实时的监控民生水源安全。 最近我们承接了一个水源地自动化监控系统的项目。由于水源地一般都会远离生产、生活区，例如各地的水库、地下水、井等，派驻人员实时进入水源腹地进...
2015-09-07 23:29:39
331
看HTML5如何化解大型复杂网络拓扑图的分组嵌套效果
忙完3D，最近又开始用HTML5给客户开发网管界面。这次客户的需求很明确，要把一个关系很复杂的多层嵌套网络拓扑图做得尽可能美观和清晰。现实应用中，网络拓扑图结构可能很简单，也可能非常复杂，比如这种节点较多的单层拓扑：稍复杂一些的： 再复杂一些的： 在这些拓扑图中常见的场景是，很多网络节点需要组成一组，这常被称为“网元组”。一般来说，网元组会有一个形状，双击可以展开/闭合...
2015-06-25 14:12:14
1930
1
原创 HTML5数据可视化第二弹：打造最美3D机房
最近项目开发任务告一段落，刚好有时间整理这大半年的一些成果。使用html5时间还不久，对js的认识还不够深入。没办法，以前一直搞java，对js的一些语言特性和概念一时还转换不过来。 上一篇第一弹介绍了项目中做的一个彩虹爆炸图，主要用了 html5的canvas的2d绘制技术。这一回我想介绍一下项目中的一个亮点技术：html5的3D，以及如何用它打造精美的3D机房监控系统。 目...
2015-06-01 14:25:33
1838
5
HTML5数据可视化第一弹：彩虹爆炸图
前言 25年过去了，Brooks博士著名的“没有银弹”的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的“炸蛋”：发展迅速、势不可挡。随着HTML5技术的普及，用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显：网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易，等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手...
2015-05-19 15:23:53
670
原创 HTML5组织结构图之名片式网元布局
组织结构图（Organization chart）是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时，不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构，今天就给大家带来一款用TWaver实现的组织结构图，提供多种布局方式，为了清晰呈现组织里每个人的职能，我们定制了名片样式来展示网元。首先来看下整体的效果，是上下布局的样式：也可以调整为圆形布局： 这些布局...
2015-05-07 11:43:40
741
HTML5流程图之矢量可伸展workflow
互联网购物成了当今非常热门的话题，各种购物网站，手机APP如雨后春笋般涌现出来。什么买衣服，买水果，买米，买油都得到了解决，自从有了这些app，再也不用去超市排着超长的队伍，扛着超重货物，骑着超累的车子了。之前每出一趟门买东西简直是跟参加了一场马拉松似的，现在好了，直接送货到家。那么在购物的背后又有什么样的流程呢，今天我们给大家介绍的是TWaver的另一款流程图。说到TWaver的流程图却是层出...
2015-05-06 17:17:09
543
原创 HTML5流程图之复杂关系网
关系网图的呈现方式多种多样，今天我们给大家分享的是和弦式的关系网图，先来看看效果：例子中我们展示的是各部门员工之间的复杂关系图。在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。好了，我们就来分析一下这张图如何用twaver实现它。首先我们要定义部门的网...
2015-05-06 17:10:00
1372
原创 数字图像处理技术在TWaver可视化中的应用
数字图像处理（Digital Image Processing）又称为计算机图像处理，它是指将图像信号转换成数字信号并利用计算机对其进行处理的过程。常用的图像处理方法有图像增强、复原、编码、压缩等，数字图像处理应用领域非常广泛。具体关于数字图像处理的介绍可以参考书籍《冈萨雷斯 数字图像处理》。 TWaver作为可视化的利器，如果在展示网元的时候，融入图像处理技术，将会对网元图标的显示增加...
2015-04-16 14:30:29
198
原创 用拓扑图呈现多层级关系图
大部分拓扑图界面都有显示“分级呈现”的需求。一个复杂的系统或组织，会有很多不同层次的节点和连接关系。如何用图形相对清晰的呈现出来，是一个需要不断探讨的话题。twaver中有很多的方式可以显示“分级”的先是方法：1、用Group网元组显示。Group网元组是把一些网元显示在一个组中。这个组可以双击展开、闭合。在闭合状态，它和一个普通的网元节点没什么区别：有位置、有图标、有动作。双击后，...
2015-04-13 11:51:10
2657
原创 当ECharts碰到TWaver
百度公司的ECharts发展迅速，已经成为HTML5 Chart的佼佼者，这让大家骄傲：中国人终于也有世界级的开源通用UI产品了。正如其网站所说，它是百度的，是中国的，也是世界的。想想那些年，我们追逐感慨过的chart产品，fusionchart、highchart等等不计其数，随着HTML5的迅速普及和ECharts的疯狂发展，大家可以忘掉那些产品了。其他商业chart产品基本上也离颤抖中关门...
2015-03-24 10:10:00
127
原创 TWaver GIS制作穹顶之下的雾霾地图
“我不满意，我不想等待，我也不再推诿，我要站出来做一点什么。我要做的事，就在此时，就在此刻，就在此地，就在此生”。自离职央视后，沉寂许久的知名记者、主持人柴静昨日携个人视频新作 《穹顶之下》宣告归来，并在短时间内引起广泛关注。生活在这个地球上，空气质量的好坏决定这我们的健康，每个人都希望能够呼吸新鲜空气，都希望抬起头看到的是蓝天和白云，而不是灰蒙蒙的雾霾。说到雾霾，我们用TWaver GIS实现...
2015-03-18 14:31:42
225
1
原创 TWaver HTML5之树形布局
转眼间春节假期已经过完，作为一个职业的程序猿，不知道大家有没有这样的感觉，一天不碰电脑，总觉得生活少点什么。今天是春节后上班的第三天，给大家分享一下我们前段时间的一个需求，需求是这样的：界面中的网元分为不同的域，比如一级域，二级域，三级域，….N级域，而且不同域之间会有连线。对于这个需求，按照常规的想法，使用group岂不是很简单，一级域是一个group，二级域也是一个group，二级域的gro...
2015-03-11 10:53:43
293
原创 TWaver推智能手表挑战华为苹果
2015年的春节刚过，苹果、华为、三星就紧锣密鼓的发布了各自新产品。华为、苹果的智能手表最吸引眼球。TWaver也不甘示弱，立刻连夜推出了更像传统奢侈豪华手表的TWaver Watch，予以反击。看来一场腥风血雨的残酷竞争不可避免。下面就带大家先睹TWaver手表的芳容。和华为一样，TWaver这款腕表也采用了经典的圆形表盘，看上去是一款做工精致的传统腕表。表盘侧面材质则使用了深...
2015-03-04 10:35:50
294
原创 3D赛瓦号——整装待发！
随着岁末将至，twaver开发团队依旧马不停蹄，3d产品功能持续更新，新特效和功能目不暇接。现在，我们就利用一些新功能，制作一个全新“赛瓦号”飞船，大家看一下仿真程度是否有质的不同？网页3d技术正在快速发展，3d可视化技术目前大热，不但是目前整个IT业中的技术热点，也是互联网、投资界的热门话题。各种3d虚拟仿真技术纷纷出现，对twaver这类底层3d展示引擎产品需求量也迅速加大，要求也...
2015-02-16 10:51:15
127
原创 TWaver 3D作品Viewer查看器
为了让开发者更方便的对各类3D模型、设备、物体进行浏览和查看，我们直接封装了mono.Viewer组件。它可以直接根据给定的数据源（json、obj、url等）进行数据加载和浏览展示。对于一般的3D设备、图纸、作品的展示，它可是非常方便了，一句new mono.Viewer()就解决了所有问题。各种常见的交互设置、灯光设置、呈现方式等，都已经直接封装其中。TWaver的3D viewer...
2015-02-15 10:19:23
278
原创 TWaver3D特效之高光反射
前篇我们介绍了TWaver 3D的环境映射特效，下面我们接着给大家分享高光反射特效。高光反射定义了物体上的某一区域比其他地方更反光。在高光反射的贴图中，黑色区域的反射率为0（完全不反光），白色区域的反射率为100%（完全反光）。这在现实的生活中，也是随处可见，比如一个生锈的物体用低光，而一个抛光的金属应该用高强光；手表上的表盘比表带应该更反光；人的嘴唇应该比皮肤有更强的高光，而皮肤应该比纯棉衣服...
2015-02-06 10:47:27
126
原创 TWaver 3D应用于大型数据中心(续)
在2014年11月份，我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章，该blog比较详细的描述一些常用的功能的实现方法，比如：动态添加机柜，告警，温度，湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了，可是在有些客户觉得这还不够“动态”，都是代码一下生成的，少了一些交互，前些天同事说要不再加点功能，让...
2015-02-04 12:00:55
137
TWaver矢量小试——Android演进路线图
还有半个多月就到春节了，年底相信很多公司都会进行年度总结以及公司发展状况总结，在这过程中难免会用到RoadMap，在这我们也使用TWaver的矢量部分绘制一个Android系统的发展历程。先看效果：什么，最里面Android 1.0的气泡看不清？没关系，放大下ok。先来绘制一条road：twaver.Util.registerImage('road', { w: 880, h: 37...
2015-02-02 11:56:55
134
原创 TWaver3D特效系列之环境映射
随着TWaver3D的快速发展，越来越多的各种功能都在不断加强，包括性能的极大提升（可以参考这里）,3D编辑器的易用性和功能持续增强(欢迎大家申请试用),各种特效的增加，特效是本文的主角。对于UI技术的不断发展和越来越挑剔的用户，各种特殊的效果已经变成了一种必不可少的需求了；或许你正在为客户提出的需求而苦恼，不过不用担心，用TWaver3D正好可以解决这些苦恼。用时下流行的一句话说：有TW...
2015-01-28 15:33:23
84
原创 TWaver动画之雷达扫描效果
UI和功能是好的产品的两个重要因素，很多产品往往只注重功能上的设计，而忽略了UI。在这个“看脸”的时代，就算产品的功能很强大，如果UI跟不上步伐，你的产品都会在客户心中大打折扣。做安全和监控的项目中经常会进行扫描，一般会用一个gif图片来表示软件正在进行扫描，但是如果想更换这个图标的样式，就需要美工重新做图。TWaver提供了动画效果，如果对图标的动画样式不满意，可以通过简单的更改程序来实现，避...
2015-01-26 14:03:54
620
基于APE物理引擎的管线容积率计算方法
容积率一般应用在房地产开发中,是指用地范围内地上总建筑面积与项目总用地面积的比值，这个参数是衡量建设用地使用强度的一项非常重要的指标。在其他行业，容积率的计算也非常重要，如产品利用率、管道使用率等等。那么在监控系统中，如何能够生动形象的表达容积率的计算，是的监控系统具有准确性、安全性的同时，还具备了多样性，良好交互性等等。 最近的游戏产业发展也非常迅速，在手持终端3D的游戏也越来越多，那么如果我...
2015-01-19 10:50:34
112
原创 HTML5 实现Link跳线效果
之前我们推出过Flex版本的Link跳线效果，现在基于HTML5新版本的跳线效果也实现了，细微之处我们进行了改进，如link倾斜的时候Offset方向始终保持垂直等。先看效果。实现的算法和Flex基本一致，在这不做进一步分析了，算法中使用到矩阵的运算，所以在这贴一下矩阵运算的封装。var matrix=function(options){ if (!(this instanceo...
2015-01-15 14:01:44
161
原创 在TWaver的Tree节点上画线
论坛上有同学提出如何在tree上画引导线，之前我们Flex已经实现此功能，现在最新版的HTML5也将添加此功能。先看看效果：详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章，下面贴出一个Demo，没有图标，没有框选。仅供参考： 123456789101112131415161718...
2015-01-13 10:27:03
172
原创 用TWaver加载大型游戏场景一例
游戏中经常会出现一些大型的户外场景，例如一个小镇、一座古城等。通常这种场景中包含了较多的建筑、道路、桥梁等等元素，其3D模型比较大且复杂。在使用TWaver加载时，可使用一些技巧，让加载速度更快、显示更流畅。TWaver 3D支持导入json或obj等格式的3D场景。如果是obj格式，可将obj文件、mtl文件、所有贴图文件，以字符串参数形式传给TWaver进行加载。当然这些文件也都可以是网...
2015-01-06 13:52:01
191
原创 22万个木箱！TWaver 3D极限压榨
打开个门户网站都千呼万唤，我们还能期待网页上的3D技术会有“酣畅淋漓”、“一气呵成”的感受吗？也许现在还差点火候。但是HTML5、WebGL等技术一直在飞速的发展，可能很快你就会惊讶它的能力。现在，我们就试试TWaver的3D能显示多少个木箱子，透明的木箱子。数据量当然要大才行，10万个怎么样？干脆试试20万好了，具体说是60的立方矩阵=60x60x60=216000个。只有压榨到极限才能了解...
2014-12-29 11:31:08
190
原创 如何在MONO 3D寻找最短路路径
前段时间有个客户说他们想在我们的3D的机房中找从A点到B点的最短路径，然而在2D中确实有很多成熟的寻路算法，其中A*是最为常见的，而这个Demo也是用的A*算法，以下计算的是从左上角到右下角的最短路径：具体的实现方式是，先将地板进行了分割，分成一个数组，然后再计算该点上是否有3D的对象，若是有，就置成该点不能通过的标记，否则就表示该点可以通过（如果你分割的越细那么算的就越精确，但是算的当然也就慢...
2014-12-02 10:45:53
110
原创 如何创建TWaver 3D的轮廓选中效果
在一般的游戏中，物体的选中效果会是这样：TWaver 3D中，物体的默认的选中效果一般都是一个方方正正的外框。在HTML5的Mono版本中，TWaver提供了轮廓线样式的选中效果。通过如下代码把几个基本形状进行捏合，生成新的组合体：1var node=new mono.ComboNode(nodes, ops);2node.s({...
2014-11-03 10:44:45
102
原创 巧用TWaver 3D 矢量图形功能
的确，提起TWaver，大家想到的首先是“电信拓扑图组件”。其实，由于其灵活的MVC架构、矢量化设计、方便定制等特点，TWaver可以做的还有很多。例如房地产行业常见到的“户型图”。户型推荐是销售接待中很重要的阶段，也被称做是为客户造梦的过程，户型也是客户是否选择该楼盘的一大要素。制作漂亮的户型图在房地产行业无疑是非常重要的一项工作。首先利用TWaver常被忽视的“矢量图形”功能，来...
2014-10-29 11:14:43
165
原创 如何实现TWaver 3D颜色渐变
一般而言，需要实现3D物体的渐变，通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图，这种方式是可以解决这类问题的，不过对于一般用户而言，通过2D生成一张渐变的图片，有一定的难度，另外如果要生成的图片比较多，性能效率上会成为一个瓶颈，特别是渐变随着条件在不断变化的情况下，就需要每次绘制的时候都去生成一张渐变的canvas图，效率极其低。 在3D中，另外一种通常的方式就是...
2014-10-21 13:37:16
115
原创 被忽视的TWaver功能（1）
应客户需求写个Demo，Demo中包含一些常用的功能，包括解析JSON数据生成TWaver中的网元和连线，网元右下角带上不同标识的小图标，连线需要是二次曲线，弹出菜单和信息板，跟大家分享下。先上图让大家看看效果（大家在学习的同时，能否发现这次Demo有所不同）解析JSON数据生成TWaver中的网元和连线下面是Demo中用到的JSON数据格式样例1var topo_d...
2014-10-13 09:44:50
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人