xhload3d
- 浏览: 202111 次
-
最新评论
-
tjzx：
文章图片gua了
基于 HTML5 Canvas 的交互式地铁线路图 -
1036225283：
好酷，这是怎么做的
基于HTML5的WebGL设计汉诺塔3D游戏 -
mangguo：
推荐一本书，html5 canvas核心技术 图形、动画和游 ...
基于HTML5 Canvas实现工控2D叶轮旋转 -
zhunengfei：
xhload3d 写道zhunengfei 写道你这个略叼，要 ...
ECharts+BaiduMap+HT for Web网络拓扑图应用 -
xhload3d：
zhunengfei 写道你这个略叼，要是有个Demo就好了， ...
ECharts+BaiduMap+HT for Web网络拓扑图应用
文章列表
构造实体几何CSG全称Constructive solid geometry，是3D计算机图形学中构建模型的常用技术，可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算，将立方体、圆柱体和棱柱等简单的基础模型，嵌套组合成更复杂三维模型。
CSG的算法这些年来已有各种语言平台版本实现，C++版主流的是 http://opencsg.org/ 已有众多基于该开源类库的应用案例，JavaScript语言较早版实现 http://evanw.github.io/csg.js/ 影响较广，很多其他js衍生版都是基于该版本进行改进完善，包括Java版的实现 ...
最近折腾HTML5游戏需要离线存储功能，便把目前可用的几种HTML5存储方式研究了下，基于HT for Web写了个综合的实例，分别利用了Cookie、WebStorage、IndexedDB以及FileSystem四种本地离线存储方式，对燃气监控系统的表计位置、朝向、开关以及表值等信息做了CURD的存取操作。
HTML5的存储还有一种Web SQL Database方式，虽然还有浏览器支持，是唯一的关系数据库结构的存储，但W3C以及停止对其的维护和发展，所以这里我们也不再对其进行介绍：Beware. This specification is no longer in active mai ...
HTML5的Drag and Drop是很不错的功能，网上使用例子较多如 http://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过Drag and Drop生成图片的Base64的字符串信息。
使用Base64方式的图片有诸多好处，可将多个图片信息整合到单个js文件避免多次http请求，可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处，当然弊端也不少例如不能有效利用浏览器图片缓存机制等。使用HT for Web的朋友会发现HT的例子很多注册图片都采用Base64的方式，这主要是为了方便用户直接本地文件打开HT的手册 ...
QuadTree四叉树顾名思义就是树状的数据结构，其每个节点有四个孩子节点，可将二维平面递归分割子区域。QuadTree常用于空间数据库索引，3D的椎体可见区域裁剪，甚至图片分析处理，我们今天介绍的是QuadTree最常被游戏领域使用 ...
在《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地图引擎融合的解决方案。
以上抓图为本文介绍的例子最终运行效果，接下来我们一步步来实现，首选显示地图信息需要有城市经纬度数据，搜索了下感谢此篇博客提供的数据。这么大量的数据我采用的是《HT图形组件设计之道（四）》中介绍的getRawText函数方式，有了数据之 ...
最近下载了GoodReader App，发现GoodReader中打开的页面不仅支持WebGL，同时还允许跨域访问资源，以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问，否则需采用《矢量组件设计之道（四）》列举的几种解决跨域访问图片或3D的OBJ等资源的技巧。而现在GoodReader中直接打开就可以玩了，加上GoodReader自身对文档管理的方便性，这1块钱的价格真是物超所值！
以下为GoodReader在iPhone下跨域访问HT for Web手册过程的视频， 整体还是挺流畅，和直接采用iOS的Safari浏览器没什么区别：
http://v.youku. ...
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图：
Box2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了衍生出Java、ActionScript以及JS等版本，被广泛应用在游戏领域。说其丰富的确很丰富，说乱也够乱的，找个Box2D的JS版就有N多选择，而且不同版本API还有差异，可参考这 ...
最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的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的设置的确很方便，不需要 ...
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果：
各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明，我们采用 ...
HT for Web独创的矢量图片设计架构，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“Adobe Photoshop 是否已经过时？”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果，HT for Web提供了较多渲染方式，例如对HT for Web的图元设置‘body.color’的style后图元即可达到自动染色的效果，这里将对这种染色技术进行讲解。
上图呈现了本文例子最终的呈现效果，中间为原始图片是http://hightopo.com/images/ba ...
HTML5已经足够强大，但很多应用还是需要独立桌面客户端的解决方案，毕竟能操作本地文件等功能还是很多工具类软件短期内无法完全采用云方案替代。
最近Adobe发布的http://brackets.io也是类似的应用，Brackets这样描述自己：An open source code editor for the web, written in JavaScript, HTML and CSS. 这样的描述在过去很难想象居然是编辑器的工具，如今采用WebKit嵌套各种壳的方案已让这类应用成为主流。
Adobe的Brackets采用的是自家的https://github.com/adob ...
在《HT图形组件设计之道（二）》我们展示了HT在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。
首选我们需要一个飞机模型，采用HT for Web构建3D模型可采用API组合各种基础模型的方式，但今天我们将采用读入OBJ的方式，毕竟网上已有很多不错的现成模型素材，搜查了一番后我在
今天iOS8终于正式发布了，升级了手头设备后对我来说最重要的就是测试WebGL的3D是否真的能跑苹果的系统了，跑了多个HT for Web的3D例子都非常流畅，比Android刚支持WebGL时好太多了，基本还没发现什么问题，苹果做事还是值得肯定，要嘛不做，要做就做真正能用的WebGL。
以下是跑HT for Web的3D网络空间拓扑图在iphone5上的截图和视频操作效果，自然不如PC上流畅，但iOS8第一步就能让WebGL达到这样的效果和性能我已经很知足了，感谢苹果！http://v.youku.com/v_show/id_XNzg1MzIzNDY0.html