xhload3d

摘要： 上篇采用了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系统了。 阅读全文

摘要： 今天iOS8终于正式发布了，升级了手头设备后对我来说最重要的就是测试WebGL的3D是否真的能跑苹果的系统了，跑了多个HT for Web的3D例子都非常流畅，比Android刚支持WebGL时好太多了，基本还没发现什么问题，苹果做事还是值得肯定，要嘛不做，要做就做真正能用的WebGL。 以下是跑HT for Web的3D网络空间拓扑图在iphone5上的截图和视频操作效果，自然不如PC上流畅，但iOS8第一步就能让WebGL达到这样的效果和性能我已经很知足了，感谢苹果 阅读全文

摘要： 实现Heatmap的开源js库比较出名的就是 heatmapjs ，该框架发展了2年多，作者Patrick Wied最近决定在保持开源的基础上，提供有偿的商业支持服务，这是好事，地球上绝大部分开源项目作者搞个barely可用的初级版本后，就多年不见更新了，而真正能实际上线使用的产品哪有不需要持续完善、增强可扩展性以及提供特殊定制服务的，考虑到作者这两年已无偿投了这么多（Over the last 2 years, I devoted more than 500 hours of work to improving heatmap.js to make it a truly great library. ），希望此文也能帮作者在国内起点宣传作用。 阅读全文

摘要： 总结下本篇的两个观点： 1、再好的封装设计也需要使用者掌握基本的架构脉络，就像再好的车你也得学会开学会基本的保养，什么都不学的话，再好的框架也会像好车一样被你开坏 2、不要惧怕MV*的事件和引用关系，理清事件机制和对象引用关系后，你可以精确掌控任何时刻的任何内部细节，这点主要针对设计框架者而言，使用者应该大胆的拥抱MV*的框架，性能和各种潜在的内存问题放心的交给框架去解决 阅读全文

摘要： 最后几点设计控件的建议： 切换到使用者角度，即站在上层应用者角度提供最简洁符合业务逻辑的API接口，尽量不暴露图形相关参数，图形参数对上层使用着是晦涩的，暴露了你自己也是非常难改动和维护 不要一开始设计就考虑如何操作，如何动画，操作和动画都可以在基础API基础上扩展再封装，某种程度上来说，如何操作和如何动画甚至不属于控件封装该干的，至少可再提供进一层的封装，这样可随意切换操作和动画逻辑，而不影响底层控件的数据模型和绘制逻辑 尽量让绘制代码和业务逻辑代码分离，这点如果采用最基础的绘制代码的确很难分离，这也是HT尽量采用矢量描述，不让用户控制底层绘制代码的初衷 阅读全文

摘要： 讨论前先设定话题的边界，HT是基于HTML5的图形组件库，因此文章的案例更多会涉及HTML和JavaScript语言，但并不局限于Web前端，设计思想上同样适用于任何GUI语言平台。完整的前端设计是需要考虑到后台加载并发等因素，但本系列更侧重于纯客户端图形组件，不涉及网络通讯部分的思考，这里讨论的话题会与以下关键字更为相关：企业应用、Single Page Application、重客户端交互、监控、MV*等。 阅读全文