xhload3d
xhload3d_个人页
xhload3d
文章
139
问答
0
视频
0
个人介绍
暂无个人介绍
擅长的技术
-
发表了文章 2015-01-12
HT for Web 3D游戏设计设计--汉诺塔（Towers of Hanoi）
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏。 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Tower_of_Hanoi。
-
发表了文章 2015-01-08
HT for Web自定义3D模型的WebGL应用
有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很多应用其实并不需要专业的美工使用专业的3D编辑工具，完全通过HT for Web预定义的和内置自定义3D模型API就能满足很多应用，这里介绍几种场景的自定义3D模型应用。
-
发表了文章 2015-01-03
纯Shading Language绘制飞机火焰效果
上篇《纯Shading Language绘制HTML5时钟》体现了GLSL可编程性特点，但没有体现GLSL可编程出各种酷炫效果的特点，今天我们将用纯Shading Language绘制火焰效果，并将其应用到《HT图形组件设计之道（四）》飞行的飞机例子上。
-
发表了文章 2014-12-31
纯Shading Language绘制HTML5时钟
今天是2014年的最后一天，这个时刻总会让人想起时钟，再过几个小时地球人都要再老了一岁，于是搞个HTML5版的时钟就是我们今天要完成的任务，实现HTML5的时钟绘制一般会采用三种方式，第一种采用CSS的实现方式，例如 http://www.css-tricks.com/examples/CSS3Clock/ ；第二种采用SVG的实现方式，例如 http://www.css-tricks.com/examples/CSS3Clock/；第三种采用Cavnas的2D绘制方式，如HT for Web中《矢量手册》中自定义绘制的clock例子，HT的例子的实现效果如下，其实现代码附在本文的最后部分。
-
发表了文章 2014-12-28
HTML5版的String Avoider小游戏
HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心，从游戏起始点移动鼠标到终点位置，鼠标移动过程绘制出移动轨迹的String平滑曲线，整个过程不能碰撞到边界，从技术角度来说其核心就是根据鼠标移动位置生成String线的算法，该游戏是ActionScript写的Flash版，这里将其改造成HTML5版的JavaScript实现，并增加可自定义关卡功能的一种设计思路。
-
发表了文章 2014-12-25
基于HT的CSG功能构建HTML5的3D书架
构造实体几何CSG全称Constructive solid geometry，是3D计算机图形学中构建模型的常用技术，可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算，将立方体、圆柱体和棱柱等简单的基础模型，嵌套组合成更复杂三维模型。
-
发表了文章 2014-12-22
HTML5 Web 客户端五种离线存储方式汇总
最近折腾HTML5游戏需要离线存储功能，便把目前可用的几种HTML5存储方式研究了下，基于HT for Web写了个综合的实例，分别利用了Cookie、WebStorage、IndexedDB以及FileSystem四种本地离线存储方式，对燃气监控系统的表计位置、朝向、开关以及表值等信息做了CURD的存取操作。
-
发表了文章 2014-12-19
基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能，网上使用例子较多如 http://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过Drag and Drop生成图片的Base64的字符串信息。
-
发表了文章 2014-12-04
百度Map与HT for Web结合的GIS网络拓扑应用
在《HT for Web整合OpenLayers实现GIS地图应用》篇中介绍了HT for Web与OpenLayers的整合，不少朋友反应国内用得比较多的还是百度地图，虽然HT整合百度地图原理与OpenLayers一致，但不同GIS引擎客户端结合代码细节还是有不少差异，自定义地图风格更是完全不一样，为此我再开篇介绍下HT与百度地图整合的方案，这次我们将改进以前的例子，除了代表城市的拓扑节点外，再增加连线连接省会和城市，实现网络拓扑链路的流动效果。
-
发表了文章 2014-12-04
百度地图与HT for Web结合的GIS网络拓扑应用
在《HT for Web整合OpenLayers实现GIS地图应用》篇中介绍了HT for Web与OpenLayers的整合，不少朋友反应国内用得比较多的还是百度地图，虽然HT整合百度地图原理与OpenLayers一致，但不同GIS引擎客户端结合代码细节还是有不少差异，自定义地图风格更是完全不一样，为此我再开篇介绍下HT与百度地图整合的方案，这次我们将改进以前的例子，除了代表城市的拓扑节点外，再增加连线连接省会和城市，实现网络拓扑链路的流动效果。
-
发表了文章 2014-12-02
HT for Web整合OpenLayers实现GIS地图应用
HT for Web作为逻辑拓扑图形组件自身没有GIS功能，但可以与各种GIS引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点，该文介绍的结合的原理，其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。
-
发表了文章 2014-11-29
GoodReader跨域访问HT for Web手册
最近下载了GoodReader App，发现GoodReader中打开的页面不仅支持WebGL，同时还允许跨域访问资源，以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问，否则需采用《矢量组件设计之道（四）》列举的几种解决跨域访问图片或3D的OBJ等资源的技巧。
-
发表了文章 2014-11-25
基于HT for Web 3D呈现Box2DJS物理引擎
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图： Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了衍生出Java、ActionScript以及JS等版本，被广泛应用在游戏领域。
-
发表了文章 2014-11-24
基于HT for Web的3D呈现A* Search Algorithm
最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的3D机房最短路径巡线文章，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现，其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D例子的对照图。
-
发表了文章 2014-11-23
HT for Web基于HTML5的图像操作（三）
上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果，其实CSS也提供了一些常规图像变化的设置参数，关于CSS的过滤器Filter设置可参考 http://www.
-
发表了文章 2014-11-22
HT for Web基于HTML5的图像操作（二）
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的。
-
发表了文章 2014-11-22
HT for Web基于HTML5的图像操作（一）
HT for Web独创的矢量图片设计架构，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“Adobe Photoshop 是否已经过时？”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果，HT for Web提供了较多渲染方式，例如对HT for Web的图元设置‘body.color’的style后图元即可达到自动染色的效果，这里将对这种染色技术进行讲解。
-
发表了文章 2014-11-14
HT for Web嵌入QtWebKit的客户端解决方案
HTML5已经足够强大，但很多应用还是需要独立桌面客户端的解决方案，毕竟能操作本地文件等功能还是很多工具类软件短期内无法完全采用云方案替代。 最近Adobe发布的http://brackets.io也是类似的应用，Brackets这样描述自己：An open source code editor for the web, written in JavaScript, HTML and CSS. 这样的描述在过去很难想象居然是编辑器的工具，如今采用WebKit嵌套各种壳的方案已让这类应用成为主流。
-
发表了文章 2014-10-09
HT图形组件设计之道（四）
在《HT图形组件设计之道（二）》我们展示了HT在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。
-
发表了文章 2014-09-18
WebGL 3D on iOS8 正式版
今天iOS8终于正式发布了，升级了手头设备后对我来说最重要的就是测试WebGL的3D是否真的能跑苹果的系统了，跑了多个HT for Web的3D例子都非常流畅，比Android刚支持WebGL时好太多了，基本还没发现什么问题，苹果做事还是值得肯定，要嘛不做，要做就做真正能用的WebGL。
-
发表了文章 2014-09-12
基于HTML5实现的Heatmap热图3D应用
Heatmap热图通过众多数据点信息，汇聚成直观可视化颜色效果，热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业，甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatmap热图原理，可参考《How to make heat maps》和《How to make heat ...
-
发表了文章 2014-08-18
HT图形组件设计之道（三）
上篇我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例后续文章还会继续以便大家掌握更多的矢量应用场景，本篇我们先切换个话题，谈谈模型-视图-事件之间的关系。
-
发表了文章 2014-08-13
HT图形组件设计之道（二）
上一篇我们自定义CPU和内存的展示界面效果，这篇我们将继续采用HT完成一个新任务：实现一个能进行展开和合并切换动作的刀闸控件。对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准控件，以便用户能做可视化编辑器里，通过拖拽方式快速搭建具体电力网络或工控环境的场景，并设置好设备对应...
-
发表了文章 2014-08-11
HT图形组件设计之道（一）
HT for Web简称HT提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案，正如Hightopo官网所表达的我们希望提供：Everything you need to create cutting-edge 2D and 3D visualization.
-
发表了文章 2014-07-28
HT全矢量化的图形组件设计
HT一直被客户称道的就是其全矢量化的设计特色，矢量相比传统图片好处太多了： 矢量可无级缩放，界面不失真不模糊 描述矢量的文本内容远比图片小得多 目前各种window.devicePixelRatio不一致的设备，矢量可能是唯一彻底的解决方案 业务数据绑定 ...
-
发表了文章 2014-06-09
JS数组追加数组采用push.apply的坑
JS数组追加数组没有现成的函数，这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的，不需要写for循环的写法，一直也没遇到什么问题，直到今天我要append的b是个很大的数组时才遇到了坑。
-
发表了文章 2014-06-03
WebGL on iOS8 终于等到了这一天
WWDC2014刚结束，这次的大会是名符其实的开发者大会，更贴切的应该说的确是一次软件开发者的大会，对于OSX和iOS的更多功能特性让人兴奋，Swift新语言促成了如上图片 但我更感兴趣的是WebGL终于官方的在OSX和iOS上得到了支持，这篇《A first look at what iOS8 means for Phaser and Pixi.
-
发表了文章 2014-05-29
透过WebGL 3D看动画Easing函数本质
50年前的这个月诞生了BASIC这门计算机语言，回想起自己喜欢上图形界面这行，还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码，当带色彩的奥运五环呈现在自己面前时我已知道自己这辈子要走的路了。
-
发表了文章 2014-04-28
基于HTML5的燃气3D培训仿真系统
最近上线了的基于HTML5的燃气3D培训仿真系统，以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的，OSG引擎性能和渲染效果各方面还是不错的，但因为这次新产品需求要求能运行多移动终端，多年前基于MFC封装OSG的老系统架构也实在该退休了，这年头找能维护MFC这种古董级GUI的靠谱人也非易事。
-
发表了文章 2014-03-24
拓扑图弹力布局呈现Flickr图片搜索结果
十年前有值得分享的图片我都存在Flickr上，可惜yahoo收购了Flickr之后堕落好多年，最近yahoo在梅姐带领下Flickr团队终于恢复了生机，个人免费存储空间扩充到了1T，界面用户体验也有了很大改进，图片归类及设置Tag比以前易用很多，不过我还是不满意传统改良的Web方式操作图片，我还是喜欢更有交互感的图片操作体验，借助hightopo的HT for Web的拓扑图组件写了个自己满意的搜查Flickr图片例子。
-
发表了文章 2014-03-10
从IE6到IE11上运行WebGL 3D遇到的各种坑
这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心，但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题，毕竟作为企业应用，用户的机器运行着各式各样的办公及业务系统，有PB/Delphi之类的老CS应用，有安装...
-
发表了文章 2014-03-06
100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。
-
发表了文章 2014-02-22
基于HTML5的电信网管3D机房监控应用
先上段视频，不是在玩游戏哦，是规规矩矩的电信网管企业应用，嗯，全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及，加上主流移动终端Android和iOS都已支持HTML5技术，新一代的电信网管应用几乎一致性的首选HTML5，当然Flex和Silverlight的遗留系统依然存活着，如果不考虑移动终端，不考虑将来维护人员难找，不考虑需要承载成千上万的网元数量，不考虑公司员工的职业生涯前途，哪怕其各自父母adobe和ms都已弃之，其实Flex和Silverlight作为企业应用方案技术上还是可以的，还是能存活很多很多年。
-
发表了文章 2014-02-20
3D拓扑自动布局之Node.js篇
上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能，纯粹为了折腾好玩，当然也不会白玩，人生就在折腾中，只有折腾才能真正成长。
-
发表了文章 2014-02-20
3D拓扑自动布局之Web Workers篇
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏。
-
发表了文章 2013-12-21
基于HTML5技术的电力3D监控应用（四）
回答了知乎问题较长，一些使用WebGL的经验，作为新的一篇： 正好逛到这个问题，正好是2013年底，正好最近基于的HT for Web 3D做的电力项目收尾，正好用到的就是WebGL技术，因此说说自己的感觉供参考：1、2013年应该感谢Google和MS，前者提供了Android Chrome浏览器的WebGL支持，后者终于让IE11支持了WebGL并且减低到win7也能运行。
-
发表了文章 2013-12-17
基于HTML5技术的电力3D监控应用（三）
继（一）和（二）之后不少，不少网友问我移动终端的使用问题，因为我们项目这次采用Android平板终端，所以我对这方面有点肤浅的研究，这篇分享些项目经验总结，希望对大家有所帮助。 电力3D项目去年底刚立项时，需求仅仅是PC浏览器的3D展示要求，后来慢慢增加了要求也能在平板上运行，因为我们的系统大部分是内网的，不可能要求移动终端得上app store去下载应用程序，虽然apple也提供企业内部发布的解决方案，但还是远不如android安装app方便，对于企业应用三天两头就需要改动需求，我们的发布非常频繁，所以最终移动端选型采用Android的方案。
-
发表了文章 2013-12-15
基于HTML5技术的电力3D监控应用（二）
上篇介绍了我们电力项目的基本情况，我们选用HTML5技术还是顶着很大压力，毕竟HTML5技术性能行不行，浏览器兼容性会不会有问题，这些在项目选型阶段还是充满疑惑，项目做到现在终于快收尾了我们才敢松口气，压力基本顶住了，我个人总结的经验是：HTML5性能肯定不是最高，但对企业应用足够高效，HTML5标准不可能所有浏览器都一致实现，但对于企业应用已经足够工作。
-
发表了文章 2013-12-15
基于HTML5技术的电力3D监控应用（一）
最近参与了国网计量中心的四线一库自动化检定系统的项目开发，团队封闭开发了大半年终于快到尾声了，整个项目过程实在非常累，我的mentor杨杨老师是这样描述的：累的不想说话了。我估计是我太渴望新知识，整天不断问他问题把他搞烦了。
暂无更多信息
-
发表了文章
2018-03-05
我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
-
发表了文章
2018-02-07
基于 HTML5 Canvas 绘制的电信网络拓扑图
-
发表了文章
2018-02-05
基于 HTML5 WebGL 的 3D SCADA 主站系统
-
发表了文章
2018-02-01
基于 HTML5 的 3D 工控隧道案例
-
发表了文章
2018-01-24
HTML5 Canvas 数据持久化存储之属性列表
-
发表了文章
2018-01-17
基于 HTML5 的电力接线图 SCADA 应用
-
发表了文章
2018-01-15
快速开发基于 HTML5 网络拓扑图应用--入门篇（二）
-
发表了文章
2018-01-09
快速开发基于 HTML5 网络拓扑图应用--入门篇（一）
-
发表了文章
2018-01-08
快速开发基于 HTML5 网络拓扑图应用1
-
发表了文章
2018-01-02
基于 HTML5 WebGL 的 3D 场景中的灯光效果
-
发表了文章
2017-12-28
基于 HTML5 WebGL 的 3D 服务器与客户端的通信
-
发表了文章
2017-12-24
基于 HTML5 Canvas 的 3D WebGL 机房创建
-
发表了文章
2017-12-18
基于 HTML5 Canvas 的 3D 压力器反序列化
-
发表了文章
2017-12-10
基于 HTML5 Canvas 的 3D 碰撞检测
-
发表了文章
2017-12-07
基于 HTML5 Canvas 的 3D 模型列表贴图
-
发表了文章
2017-12-03
基于 HTML5 Canvas 的简易 2D 3D 编辑器
-
发表了文章
2017-11-30
基于 HTML5 WebGL 的 3D 仓储管理系统
-
发表了文章
2017-11-27
基于HTML5 Canvas 点击添加 2D 3D 机柜模型
-
发表了文章
2017-11-22
基于 HTML5 WebGL 的 3D “弹力”布局
-
发表了文章
2017-11-20
基于HTML5 Canvas 实现地铁站监控
滑动查看更多
暂无更多信息
暂无更多信息