基于HTML5的WebGL呈现A星算法的3D可视化

阅读更多

 

http://www.hightopo.com/demo/astar/astar.html

最近搞个游戏遇到最短路径的常规游戏问题，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现，其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D例子的对照图。

实现代码比较容易一百多行，不过算法核心在astar.js了，界面核心在ht.js里面了，我只需要构建网格信息，只需监听用户点击，然后调用astar.js进行最短路径计算，将结果通过动画的方式呈现出走动的过程，所有代码如下：

function init() {                
    w = 40; m = 20; d = w * m / 2;            
    gridRows = [];                        
    dm = new ht.DataModel();             
    g3d = new ht.graph3d.Graph3dView(dm);                
    g3d.setGridVisible(true);
    g3d.setGridColor('#BBBBBB');
    g3d.setGridSize(m);
    g3d.setGridGap(w);            
    g3d.addToDOM();                                                                                                        
    g3d.sm().setSelectionMode('none');            
    anim = startBall = endBall = null;                        
    g3d.getView().addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', function(e){                
        if(!anim){
            var p = g3d.getHitPosition(e);
            var x = Math.floor((p[0] + d)/ w);
            var y = Math.floor((p[2] + d)/ w);
            var endBall = dm.getDataByTag("cell_" + x + "_" + y);
            if(endBall && endBall.s('batch') !== 'wall'){                      
                if(startBall.a('x') === x && startBall.a('y') === y){
                    return;
                }                        
                var g = new Graph(gridRows, { 
                    diagonal: formPane.v('diagonal') 
                });
                var start = g.grid[startBall.a('x')][startBall.a('y')];
                var end = g.grid[x][y];
                var result = astar.search(g, start, end, {
                    closest: formPane.v('closest')                            
                });  
                if(!result.length){
                    return;
                }
                x = result[result.length-1].x;
                y = result[result.length-1].y;
                endBall = dm.getDataByTag("cell_" + x + "_" + y);
                endBall.s('3d.visible', true);
                startBall.s('3d.visible', false);
                formPane.setDisabled(true);
                anim = ht.Default.startAnim({
                    duration: 700,
                    finishFunc: function(){  
                        for(var i=0; i 
  

只从iOS8支持WebGL后在移动终端上测试3D应用比当前的大部分Android平板舒服多了，以上的例子在iOS系统下呈现和算法都挺流畅，http://v.youku.com/v_show/id_XODMzOTU1Njcy.html，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D空间最短路径，但还是足够解决很多实际应用问题了。

http://www.hightopo.com/demo/astar/astar.html