乐趣区

webgl-迷宫项目开发总结

我收集了一些学习用的材料,其中蕴含了很多学习,面试,中高进阶 fluuter 材料,还有很多视频详解,如果有同学想进一步理解,详情请看文末。

我的项目简介:

我的项目分为两个局部:

第一局部是一个迷宫 Maze,首先生成矩形 cell 数组,每个 cell 有 4 个 side,而后一步一步地 remove side(不包含迷宫边缘的 side),直到全副的 cell 都连通(connected)。而后在迷宫的左边缘创立一个入口,在右边缘创立一个进口。

整体网页须要接管 2 个参数:N 和 M,迷宫的大小为 N *M。

第二局部是交互操作 Guide。在迷宫入口设置一个老鼠图片,而后能够通过左右键调整老鼠的朝向,方向键上来前进一步。

播种

webgl 三个 js 库

webgl-utils.js

webgl-debug.js

cuon-utils.js

图片加载

var img = new Image();

img.src = ‘./rat.png’;

img.onload = function(){

img_loaded = true;

}

图片应该最先加载。这样能够避免 webgl 在渲染的时候图片还没加载完而呈现黑屏的问题。

监听键盘事件

保障事件代码只运行一次。否则会反复绑定多个事件,也就是按键一次会触发屡次事件处理。

document.addEventListener(“keyup”,function (event) {

switch (event.keyCode)

渲染多个物体到同一个 canvas

不能再用 initShader 办法了,而是须要创立多个 program:

program= createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE)

program2= createProgram(gl, VSHADER_SOURCE_2, FSHADER_SOURCE_2)

而后在须要渲染的时候,被动切换不同的 program:

gl.useProgram(program);

渲染图片时背景通明:

应该找一个通明背景的 png 图片:

// gl.enable(gl.BLEND);

// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

图片尺寸:

长宽都应该为 2^N,长宽能够不同。比方为 128px,256px,512px

否则无奈渲染。

cell 的连通性如何判断:

应用 bfs 广度优先算法,从任意一个 cell 开始,如果能遍历到全副的 cell(能够弄个 set 来保留并判断长度),即 cell 全连通了。

如何更无效地 remove side:

随机的办法尽管写起来简略,然而很难获得最优解。

能够这样:

随机抉择一个 side, 在 remove 之前,记录 cell 0 连通的 cell 总个数。

而后 remove。再次记录 cell 0 连通的 cell 总个数。

如果 remove 前后连通的 cell 总个数不变,则回滚 remove 操作。并进入下一次循环。

扭转图片朝向:

Float32Array 是 4 x 4 的,每行是一个顶点,每行外面的最初 2 个 float 示意朝向

if (current_direction == 0) {

// down

a_1 = 0; a_2 = 1;

b_1 = 0; b_2 = 0;

c_1 = 1; c_2 = 1;

d_1 = 1; d_2 = 0;

} else if(current_direction ==1) {

// right

a_1 = 0; a_2 = 1;

b_1 = 1; b_2 = 1;

c_1 = 0; c_2 = 0;

d_1 = 1; d_2 = 0;

} else if (current_direction == 2) {

// up

a_1 = 1; a_2 = 0;

b_1 = 1; b_2 = 1;

c_1 = 0; c_2 = 0;

d_1 = 0; d_2 = 1;

} else if (current_direction == 3) {

// left

a_1 = 1; a_2 = 0;

b_1 = 0; b_2 = 0;

c_1 = 1; c_2 = 1;

d_1 = 0; d_2 = 1;

}

挪动图片:

Float32Array 是 4 x 4 的,每行是一个顶点,每行外面的前 2 个 float 是 x 和 y 坐标,加一个 delta 值即可。

其它:

attribute 类型的变量:gl.getAttribLocation 之后如果返回值

uniform 类型的变量:gl.getUniformLocation 之后,如果 !,则为失败。

渲染图片时浏览器无奈加载本地文件,须要把网页放到 webserver 外面运行。

https://shimo.im/docs/dYkqrQcyr98jPKYX/《android 学习面试 fulutter 进阶材料收费获取》,可复制链接后用石墨文档 App 或小程序关上。

退出移动版