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

2024-08-30 11:48

本文主要是介绍基于HTML5的WebGL呈现A星算法的3D可视化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

IMG_1486

 

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例子的对照图。

Screen Shot 2014-11-24 at 5.36.33 PM

实现代码比较容易一百多行,不过算法核心在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<result.length; i++){var ball = dm.getDataByTag("cell_" + result[i].x + "_" + result[i].y);ball.s({'3d.visible': false,'shape3d.opacity': 1,'shape3d.transparent': false}); startBall.p3(-d+w*x+w/2, w/2, -d+w*y+w/2);startBall.a({x: x, y: y});startBall.s('3d.visible', true);}anim = null;formPane.setDisabled(false);},action: function(v){var index = Math.round(v*result.length);for(var i=0; i<index; i++){var ball = dm.getDataByTag("cell_" + result[i].x + "_" + result[i].y);ball.s({'3d.visible': true,'shape3d.opacity': i/index*0.3 + 0.7,'shape3d.transparent': true});                                    }}});                                                }}               }, false);                                    createFormPane();createGrid();                                
}                
function createGrid(){dm.clear();            var ball;gridRows.length = 0;for(var x = 0; x < m; x++) {var nodeRow = [];gridRows.push(nodeRow);for(var y = 0; y < m; y++) {                                var isWall = Math.floor(Math.random()*(1/formPane.v('frequency')));if(isWall === 0){nodeRow.push(0);createNode(x, y).s({'batch': 'wall','all.color': '#9CA69D'});}else{nodeRow.push(1);ball = createNode(x, y).s({'shape3d': 'sphere',  'shape3d.color': '#FF703F','3d.visible': false});}            }       }if(!ball){createGrid();return;}            startBall = createNode(ball.a('x'), ball.a('y'), 'start').s({'shape3d': 'sphere',  'shape3d.color': '#FF703F'                    });  shape = new ht.Shape();shape.setPoints(new ht.List([{x: -d, y: d},{x: d, y: d},{x: d, y: -d},{x: -d, y: -d},{x: -d, y: d}]));shape.setThickness(4);shape.setTall(w);shape.setElevation(w/2);shape.setClosePath(true);shape.s({'all.color': 'rgba(187, 187, 187, 0.8)', 'all.transparent': true, 'all.reverse.cull': true});dm.add(shape);                            
}
function createNode(x, y, tag){var node = new ht.Node();tag = tag || "cell_" + x + "_" + y;               node.setTag(tag);            node.a({ x: x,  y: y });node.s3(w*0.9, w*0.9, w*0.9);node.p3(-d+w*x+w/2, w/2, -d+w*y+w/2);node.s({'all.reverse.cull': true,'shape3d.reverse.cull': true});dm.add(node);return node;
}                       
function createFormPane() {           formPane = new ht.widget.FormPane();formPane.setWidth(230);formPane.setHeight(70);formPane.getView().className = 'formpane';document.body.appendChild(formPane.getView());            formPane.addRow(['Wall Frequency', {id: 'frequency',slider: {min: 0,max: 0.8,value: 0.1,                            onValueChanged: function(){createGrid();}}}], [100, 0.1]);                               formPane.addRow([{id: 'closest',checkBox: {label: 'Try Closest'}},{id: 'diagonal',checkBox: {label: 'Allow Diagonal'}        }], [0.1, 0.1]);
}

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

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

Screen Shot 2014-11-24 at 5.09.13 PM

 

这篇关于基于HTML5的WebGL呈现A星算法的3D可视化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120732

相关文章

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组(时间轮)和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建