xhload3d

摘要： 在《HT for Web整合OpenLayers实现GIS地图应用》篇中介绍了HT for Web与OpenLayers的整合，不少朋友反应国内用得比较多的还是百度地图，虽然HT整合百度地图原理与OpenLayers一致，但不同GIS引擎客户端结合代码细节还是有不少差异，自定义地图风格更是完全不一样，为此我再开篇介绍下HT与百度地图整合的方案，这次我们将改进以前的例子，除了代表城市的拓扑节点外，再增加连线连接省会和城市，实现网络拓扑链路的流动效果。 阅读全文

摘要： HT for Web作为逻辑拓扑图形组件自身没有GIS功能，但可以与各种GIS引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点，该文介绍的结合的原理，其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。 阅读全文

摘要： 最近下载了GoodReader App，发现GoodReader中打开的页面不仅支持WebGL，同时还允许跨域访问资源，以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问，否则需采用《矢量组件设计之道（四）》列举的几种解决跨域访问图片或3D的OBJ等资源的技巧。而现在GoodReader中直接打开就可以玩了，加上GoodReader自身对文档管理的方便性，这1块钱的价格真是物超所值！ 阅读全文

摘要： Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了衍生出Java、ActionScript以及JS等版本，被广泛应用在游戏领域。说其丰富的确很丰富，说乱也够乱的，找个Box2D的JS版就有N多选择，而且不同版本API还有差异，可参考这里的对比 http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use 虽然版本较多有点乱，但各个版本的基本原理和API都类似，以下为我基于Box2DJS融合HT for Web写的例子代码。Box2D有很多参数功能点，这里例子我们仅呈现最基础简单的要素，主要让大家理解Box2DJS引擎的基本使用，以及呈现上如何与HT for Web结合。 阅读全文

摘要： 最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的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例子的对照图。 阅读全文

摘要： 上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果，其实CSS也提供了一些常规图像变化的设置参数，关于CSS的过滤器Filter设置可参考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/，CSS的设置的确很方便，不需要我们了解底层实现逻辑，仅需要提供简单的设置参数值即可，但这样的方式毕竟无法达到随心所欲变化的效果，这有点想OpenGL早期只能通过Fixed Function Pipeline进行开发，和如今采用Shading Language可实现丰富多彩变化的质变，因此这篇我们将采用WebGL的SL代码方式折腾点更好玩的效果 阅读全文

摘要： 我在mac air的chrome浏览器下测试了以上代码，createColorImage1需要1630毫秒，createColorImage2需要29毫秒，两者相差56倍，也就是说采用globalCompositeOperation虽然进行了两次drawImage，但性能依然远高于通过getImageData逐个设置像素值的方式。 造成这种巨大差距的根本原因在于createColorImage1的方式完全基于CPU运算，js本就单线程，且密集数值运算也不是js的强项，而采用globalCompositeOperation的渲染方式，浏览器底层完全可以采用GPU等硬件加速的方式达到更加的性能，因此两钟方式性能差异几十倍也不足为奇了，有兴趣可参考微软的几篇关于浏览器Canvas硬件加速相关的文章： 阅读全文

摘要： HT for Web独创的矢量图片设计架构，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“Adobe Photoshop 是否已经过时？”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果，HT for Web提供了较多渲染方式，例如对HT for Web的图元设置‘body.color’的style后图元即可达到自动染色的效果，这里将对这种染色技术进行讲解。 阅读全文

摘要： HTML5通过WebKit嵌入打包成本地应用已经不是新鲜事了，整个世界的各种客户端技术正在变得更加融合，无数种千奇百怪的客户端方案正在改变很多观点和架构，不久前的wwdc2014中的JavaScript for Automation我觉得是被严重忽略的亮点，整个mac osx系统和应用程序都可通过JavaScrpit进行调用，早期window得利于众多应用软件而普及，苹果在站稳了移动终端后，借助诸如JavaScript for Automation的动作吸引更多专业客户端开发者，也许会不知不觉在桌面领域翻盘。 阅读全文

摘要： 在《HT图形组件设计之道（二）》我们展示了HT在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。 阅读全文