共计 2017 个字符，预计需要花费 6 分钟才能阅读完成。
我收集了一些学习用的材料，其中蕴含了很多学习，面试，中高进阶 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 或小程序关上。