項目簡介
項目分為兩個部分：
第一部分是一個迷宮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);
渲染圖片時背景透明：
// 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 之後如果返回值 < 0， 則為失敗。
uniform 類型的變量： gl.getUniformLocation 之後， 如果 ! ， 則為失敗。
渲染圖片時瀏覽器無法加載本地文件，需要把網頁放到webserver裡面運行。
閱讀更多 python碼神 的文章
