2015年1月13日随笔档案 - TWaver - 专注UI技术

VR技术在数据中心3D机房中的应用（下）

posted @ 2017-06-01 14:08 TWaver 阅读(289) | 评论 (0) | 编辑收藏

VR技术在数据中心3D机房中的应用（上）

摘要: 近年来VR（虚拟现实）这个词越来越频繁地出现在我们生活当中。由于它能带来前所未有的交互体验和沉浸感，VR技术的广泛应用，例如在游戏，影视，数据中心等领域，已经成了一个必然的趋势。阅读全文

posted @ 2017-05-31 16:45 TWaver 阅读(343) | 评论 (0) | 编辑收藏

HTML5数据可视化第四弹：可交互地铁线路图

摘要: 用TWaver HTML5制作的上海地铁图，一个简单实用的小应用，具有纯矢量、可交互、有动态效果、无失真缩放等特点。可以方便扩展各种实用功能，也可以稍加改造应用于高铁、公交等类似图形展示。阅读全文

posted @ 2016-12-13 14:36 TWaver 阅读(735) | 评论 (0) | 编辑收藏

10个TWaver网页3D可视化精彩案例

摘要: 以下网页3D案例均为TWaver原创出品，推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后，如需Demo，可直接申请试用。阅读全文

posted @ 2016-12-09 15:29 TWaver 阅读(530) | 评论 (0) | 编辑收藏

HTML5数据可视化第三弹：萌萌哒拓扑图分组

摘要: 3D虽然炫酷，但在真正的企业应用里，数据、关系的呈现还是要回到传统的2D界面，而HTML5是目前的最佳选择。像HTML5的canvas，虽然已经不是什么新鲜技术了，但可以直接在浏览器中绘制网络拓扑图的逻辑关系，而不需要安装任何插件，对于很多正在更新换代的OSS系统来说，还是很有吸引力的。阅读全文

posted @ 2016-12-02 10:26 TWaver 阅读(559) | 评论 (0) | 编辑收藏

TWaver3D拓扑图之人在江湖

摘要: 正看文章的小哥，我看你骨骼精奇，是个练武的奇才！我这里有一部TWaver3D宝典，何不入我赛瓦门，咱们一起闯荡江湖！阅读全文

posted @ 2016-11-24 10:03 TWaver 阅读(361) | 评论 (0) | 编辑收藏

TWaver3D拓扑图之球花绽放

摘要: 本文介绍了如何用TWaver HTML5制作3D拓扑图，代码不足一百行，让大家领略TWaver3D拓扑图的风采。实际上，这个例子稍作变化，就可以用来展示丰富的3D网络拓扑图、各种复杂数据的树状关系图。阅读全文

posted @ 2016-11-23 10:32 TWaver 阅读(291) | 评论 (0) | 编辑收藏

摘要: TWaver发布了一款全新的模型库框架TWaver® Make，来帮助开发者快速创建高质量、专业的行业可视化应用场景。TWaver® Make提供的是模版定义的开发SDK框架，和高质量的跨行业模型库。使用TWaver® Make，可以把TWaver 2D/3D的代码细节包装在模版中进行复用，极大的降低使用TWaver的复杂度，提高开发效率。模型库就像一本字典一样，开发着只需查阅模型id，就可以通过load方法快速加载使用这些内置模型。阅读全文

posted @ 2016-11-22 10:35 TWaver 阅读(395) | 评论 (0) | 编辑收藏

两步创建3D数据中心

摘要: TWaver 3D发布也有很长一段时间了，相关的应用和项目也做了不少，特别是3D机房，可是有些用户反馈说3D机房开发起来有些费劲，耗时，3D并不像2D，虽然有时更加的直观，但是需要考虑的问题也很多。本文着重介绍了如何通过两个简单的步骤来创建出一个3D数据中心。
阅读全文

posted @ 2016-11-21 11:25 TWaver 阅读(235) | 评论 (0) | 编辑收藏

HTML5数据可视化第二弹：打造最美3D机房

摘要: TWaver 3D产品的定位一直在于为企业提供3D应用的快速开发工具，方便企业开发适合自己的高效、实时的监控系统。用TWaver 3D开发的3D场景360度无死角，可绑定动态数据，轻松添加动画，在平板和手机上也能轻松运行。阅读全文

posted @ 2016-11-18 10:29 TWaver 阅读(781) | 评论 (0) | 编辑收藏

HTML5数据可视化第一弹：彩虹爆炸图

摘要: HTML5发展迅速、势不可挡。随着HTML5技术的普及，用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显：网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易，等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手们都纷纷开始研究javascript了，而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来。本文主要介绍了用HTML5实现的彩虹爆炸图，具有诸多功能，可用于大数据展示。阅读全文

posted @ 2016-11-17 10:52 TWaver 阅读(525) | 评论 (0) | 编辑收藏

HTML5复杂拓扑图（五） Reingold Tilford树

摘要: 前段时间，有个项目需要显示一个很大的树形拓扑结构图，而布局怎么都不好看。要生成一颗比较布局规矩、好看的树状图，一个成熟、高效的树形布局算法必不可少。Reingold Tilford是常用的一个，大家可以google一下。这个算法最先是由Edward Reingold和John Tilford一起发表的，并由他们的名字命名。有兴趣的同学，可以研究一下这篇1981年的论文：http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf，里面给出了这个算法的原理和逻辑代码。这个算法的优点是逻辑相对简单，效率高。不过用js写一遍也要消耗很多脑细胞。还要，twaver直接提供了这种算法和自动布局，我们可以直接使用。下面看一看这种布局的用途。利用Reingold Tilford树算法，我们可以把一个树形结构的数据，用不重叠、紧凑、分层的形式展示出来。阅读全文

posted @ 2015-05-22 17:37 TWaver 阅读(6628) | 评论 (2) | 编辑收藏

HTML5复杂拓扑图（四）组织结构图

摘要: 应广大客户所需，今天给大家带来一款组织结构图。组织结构图的呈现方式多种多样，用途也是非常广泛，可以应用于集团内部，企业各部门之间的组织关系呈现。我们就来看看twaver实现出来的效果。阅读全文

posted @ 2015-05-22 17:33 TWaver 阅读(5205) | 评论 (1) | 编辑收藏

HTML5复杂拓扑图（三）可伸展流程图

摘要: 说到TWaver的流程图却是层出不穷，千姿百态。2D的，3D的，静态的，动态的。这次要给大家呈现的是一款全矢量的，非常清新优美的流程图。阅读全文

posted @ 2015-05-22 17:29 TWaver 阅读(3903) | 评论 (0) | 编辑收藏

HTML5复杂拓扑图（二）关系网图

摘要: 在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。阅读全文

posted @ 2015-05-22 17:06 TWaver 阅读(3595) | 评论 (0) | 编辑收藏

数字图像处理技术在TWaver可视化中的应用

摘要: 数字图像处理（Digital Image Processing）又称为计算机图像处理，它是指将图像信号转换成数字信号并利用计算机对其进行处理的过程。常用的图像处理方法有图像增强、复原、编码、压缩等，数字图像处理应用领域非常广泛。具体关于数字图像处理的介绍可以参考书籍《冈萨雷斯数字图像处理》。
TWaver作为可视化的利器，如果在展示网元的时候，融入图像处理技术，将会对网元图标的显示增加了灵活性，是一件非常有意思的事情。那么我们不妨来试试，如何将图像处理技术融入进来。阅读全文

posted @ 2015-04-16 14:21 TWaver 阅读(1159) | 评论 (0) | 编辑收藏

当ECharts碰到TWaver

摘要: 百度公司的ECharts发展迅速，已经成为HTML5 Chart的佼佼者，这让大家骄傲：中国人终于也有世界级的开源通用UI产品了。正如其网站所说，它是百度的，是中国的，也是世界的。想想那些年，我们追逐感慨过的chart产品，fusionchart、highchart等等不计其数，随着HTML5的迅速普及和ECharts的疯狂发展，大家可以忘掉那些产品了。其他商业chart产品基本上也离颤抖中关门的日子不远了。阅读全文

posted @ 2015-03-24 10:01 TWaver 阅读(2264) | 评论 (0) | 编辑收藏

TWaver GIS制作穹顶之下的雾霾地图

摘要: 用TWaver GIS实现全国雾霾图示例，查看更多。阅读全文

posted @ 2015-03-18 14:14 TWaver 阅读(4110) | 评论 (0) | 编辑收藏

TWaver HTML5之树形布局

摘要: 今天是春节后上班的第三天，给大家分享一下我们前段时间的一个需求，需求是这样的：界面中的网元分为不同的域，比如一级域，二级域，三级域，….N级域，而且不同域之间会有连线。对于这个需求，按照常规的想法，使用group岂不是很简单，一级域是一个group，二级域也是一个group，二级域的group是一级域的父亲，以此类推。但是这样有个问题，如果域比较多，会造成group的过度嵌套，界面中group多了之后，不仅用户体验下降，而且会严重影响性能，所以倒不如直接用树，可以很直观的体现各个域之间的层级关系。阅读全文

posted @ 2015-03-11 10:45 TWaver 阅读(5224) | 评论 (0) | 编辑收藏

TWaver推智能手表挑战华为苹果

摘要: 2015年的春节刚过，苹果、华为、三星就紧锣密鼓的发布了各自新产品。华为、苹果的智能手表最吸引眼球。TWaver也不甘示弱，立刻连夜推出了更像传统奢侈豪华手表的TWaver Watch，予以反击。看来一场腥风血雨的残酷竞争不可避免。下面就带大家先睹TWaver手表的芳容。阅读全文

posted @ 2015-03-04 10:26 TWaver 阅读(3538) | 评论 (1) | 编辑收藏

3D赛瓦号——整装待发！

摘要: 随着岁末将至，twaver开发团队依旧马不停蹄，3d产品功能持续更新，新特效和功能目不暇接。现在，我们就利用一些新功能，制作一个全新“赛瓦号”飞船，大家看一下仿真程度是否有质的不同？阅读全文

posted @ 2015-02-16 10:34 TWaver 阅读(5412) | 评论 (2) | 编辑收藏

TWaver 3D作品Viewer查看器

摘要: 为了让开发者更方便的对各类3D模型、设备、物体进行浏览和查看，我们直接封装了mono.Viewer组件。它可以直接根据给定的数据源（json、obj、url等）进行数据加载和浏览展示。对于一般的3D设备、图纸、作品的展示，它可是非常方便了，一句new mono.Viewer()就解决了所有问题。各种常见的交互设置、灯光设置、呈现方式等，都已经直接封装其中。阅读全文

posted @ 2015-02-15 10:07 TWaver 阅读(3640) | 评论 (1) | 编辑收藏

3D特效之高光反射

摘要: 前篇我们介绍了TWaver 3D的环境映射特效，下面我们接着给大家分享高光反射特效。
高光反射定义了物体上的某一区域比其他地方更反光。在高光反射的贴图中，黑色区域的反射率为0（完全不反光），白色区域的反射率为100%（完全反光）。这在现实的生活中，也是随处可见，比如一个生锈的物体用低光，而一个抛光的金属应该用高强光；手表上的表盘比表带应该更反光；人的嘴唇应该比皮肤有更强的高光，而皮肤应该比纯棉衣服更反光。加上了这种高光效果后，会是3D物体更加真实，更加生动。
接下来我们就来讲解一下如何在一个模型中使用高光反射，比如我们需要创建一个大楼的建筑物。一个cube贴上建筑物的贴图就可以模拟了。我们准备了一张玻璃的贴图：阅读全文

posted @ 2015-02-06 10:18 TWaver 阅读(4200) | 评论 (3) | 编辑收藏

TWaver 3D应用于大型数据中心(续)

摘要: 在2014年11月份，我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章，该blog比较详细的描述一些常用的功能的实现方法，比如：动态添加机柜，告警，温度，湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了，可是在有些客户觉得这还不够“动态”，都是代码一下生成的，少了一些交互，前些天同事说要不再加点功能，让它更加“动”一些，所以今天我抽了个时间再接着来个“续”——动态的添加机柜，主机和告警。阅读全文

posted @ 2015-02-04 11:50 TWaver 阅读(4127) | 评论 (1) | 编辑收藏

TWaver矢量小试——Android演进路线图

摘要: 还有半个多月就到春节了，年底相信很多公司都会进行年度总结以及公司发展状况总结，在这过程中难免会用到RoadMap，在这我们也使用TWaver的矢量部分绘制一个Android系统的发展历程。先看效果。阅读全文

posted @ 2015-02-02 11:42 TWaver 阅读(3753) | 评论 (1) | 编辑收藏

TWaver 3D特效系列之环境映射

摘要: 随着TWaver3D的快速发展，越来越多的各种功能都在不断加强，包括性能的极大提升（可以参考这里）,3D编辑器的易用性和功能持续增强(欢迎大家申请试用),各种特效的增加，特效是本文的主角。阅读全文

posted @ 2015-01-28 15:26 TWaver 阅读(1514) | 评论 (2) | 编辑收藏

TWaver动画之雷达扫描效果

摘要: UI和功能是好的产品的两个重要因素，很多产品往往只注重功能上的设计，而忽略了UI。在这个“看脸”的时代，就算产品的功能很强大，如果UI跟不上步伐，你的产品都会在客户心中大打折扣。如何利用TWaver实现动画之雷达扫描效果呢，点击看文章。阅读全文

posted @ 2015-01-26 13:54 TWaver 阅读(2663) | 评论 (1) | 编辑收藏

基于APE物理引擎的管线容积率计算方法

摘要: 容积率一般应用在房地产开发中,是指用地范围内地上总建筑面积与项目总用地面积的比值，这个参数是衡量建设用地使用强度的一项非常重要的指标。在其他行业，容积率的计算也非常重要，如产品利用率、管道使用率等等。那么在监控系统中，如何能够生动形象的表达容积率的计算，是的监控系统具有准确性、安全性的同时，还具备了多样性，良好交互性等等。最近的游戏产业发展也非常迅速，在手持终端3D的游戏也越来越多，那么如果我们将游戏引擎融入到监控系统中，会实现什么样的效果呢，本文重点介绍使用APE物理引擎结合TWaver 2D产品实现管线的容积率计算。先来看下效果：阅读全文

posted @ 2015-01-19 10:31 TWaver 阅读(883) | 评论 (0) | 编辑收藏