基于HTML5的Drag and Drop生成图片Base64信息

HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息。 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等。使用HT for Web的朋友会发现HT的例子很多注册图片都采用Base64的方式,这主要是为了方便用户直接本地文件打开HT的手册即可操作浏览,无需构建web服务器发布进行访问,用户常问然后将图片转出Base64信息,我们使用的就是本文介绍的小工具。 Screen Shot 2014-12-18 at 11.49.18 PM[......]

Read more

HT for Web可视化QuadTree四叉树碰撞检测

QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域。QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数,从而提高游戏刷新性能,本文例子基于HT for Web的图形引擎,通过GraphView和Graph3dView共享同一数据模型DataModel,同时呈现QuadTree算法下的2D和3D碰撞视图效果: Screen Shot 2014-12-06 at 12.41.24 AM[......]

Read more

百度地图与HT for Web结合的GIS网络拓扑应用

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

Read more

HT for Web整合OpenLayers实现GIS地图应用

HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。 Screen Shot 2014-12-02 at 1.15.33 AM Screen Shot 2014-12-02 at 1.16.18 AM Screen Shot 2014-12-02 at 1.16.47 AM Screen Shot 2014-12-02 at 1.17.30 AM[......]

Read more

GoodReader跨域访问HT for Web手册

最近下载了GoodReader App,发现GoodReader中打开的页面不仅支持WebGL,同时还允许跨域访问资源,以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问,否则需采用《矢量组件设计之道(四)》列举的几种解决跨域访问图片或3D的OBJ等资源的技巧。而现在GoodReader中直接打开就可以玩了,加上GoodReader自身对文档管理的方便性,这1块钱的价格真是物超所值!
Screen Shot 2014-11-29 at 3.19.55 PMScreen Shot 2014-11-29 at 3.21.36 PMScreen Shot 2014-11-29 at 3.21.55 PMScreen Shot 2014-11-29 at 3.23.03 PM Screen Shot 2014-11-29 at 3.26.58 PMScreen Shot 2014-11-29 at 3.36.38 PM[......]

Read more

HT for Web 招聘

当你逛到这里时应该知道HT for Web什么了,是的我们专注前端,我们需要也愿意培养人才,要求:
1、看到HT for Web这样的产品,有加入这样的前端团队作为自己事业发展方向的冲动
2、看好HTML5方向,对游戏开发感兴趣,愿意在厦门发展,对界面和代码都有不错审美感者加分
感兴趣者请发简历联系我:eric@hightopo.com
强烈冲动者我们直接电话聊:13564678417
[......]

Read more

基于HT for Web 3D呈现Box2DJS物理引擎

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,先上张最终例子效果图: Screen Shot 2014-11-25 at 8.05.11 PM Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这些年了衍生出Java、ActionScript以及JS等版本,被广泛应用在游戏领域。说其丰富的确很丰富,说乱也够乱的,找个Box2D的JS版就有N多选择,而且不同版本API还有差异,[......]

Read more

基于HT for Web的3D呈现A* Search Algorithm

IMG_1486 最近搞个游戏遇到最短路径的常规游戏问题,正巧看到老同事写的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例子的对照图。 Screen Shot 2014-11-24 at 5.36.33 PM 实现代码比较容易一百多行,不[......]

Read more

HT for Web基于HTML5的图像操作(三)

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

Read more

HT for Web基于HTML5的图像操作(二)

上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术,但采用Canvas的globalCompositeOperation属性进行各种blending效果: Screen Shot 2014-11-22 at 9.42.52 PM 各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明,[......]

Read more