目錄

選中一個表面?

示例程序（PickFace.js）

代碼詳解

gl.readPixels()見126行效果

gl.UNSIGNED_BYTE注意點

示例效果

---

選中一個表面?

???????WebGL 選中物體_山楂樹の的博客-CSDN博客可以使用同樣的方法來選中物體的某一個表面。這一節(jié)在PickObject程序的基礎(chǔ)上編寫了PickFace程序，后者同樣包含一個立方體，但用戶可以選中立方體的某一個表面，被選中的表面會變成白色。下圖顯示了PickFace的運行效果。

如果你理解了PickObject的程序原理，那么PickFace就很簡單了。PickObject用戶在點擊鼠標時，將立方體重繪為紅色，然后讀取鼠標點擊位置的像素顏色，根據(jù)其是紅色或是黑色來判斷點擊時鼠標是否在立方體上，即是否選中了立方體。而PickFace則更進一步，在用戶點擊鼠標時重繪立方體，并將“每個像素屬于哪個面”的信息寫入到顏色緩沖區(qū)的α分量中。下面來看一下示例程序。?

示例程序（PickFace.js）

PickFace.js的代碼如下所示。為了簡潔，略去了與前例相同的部分，如頂點著色器等。?

var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'attribute vec4 a_Color;\n' +'attribute float a_Face;\n' +   // 曲面編號（不能將int用于屬性變量）'uniform mat4 u_MvpMatrix;\n' +'uniform int u_PickedFace;\n' + // 選定面的曲面編號'varying vec4 v_Color;\n' +'void main() {\n' +'  gl_Position = u_MvpMatrix * a_Position;\n' +'  int face = int(a_Face);\n' + // 轉(zhuǎn)換為int   1.0 -> 1'  vec3 color = (face == u_PickedFace) ? vec3(1.0) : a_Color.rgb;\n' +'  if(u_PickedFace == 0) {\n' + // 如果為0，則將面編號插入alpha'    v_Color = vec4(color, a_Face/255.0);\n' + // 6.0/255.0 = 6'  } else {\n' +'    v_Color = vec4(color, a_Color.a);\n' +'  }\n' +'}\n';
var FSHADER_SOURCE ='#ifdef GL_ES\n' +'precision mediump float;\n' +'#endif\n' +'varying vec4 v_Color;\n' +'void main() {\n' +'  gl_FragColor = v_Color;\n' +'}\n';var ANGLE_STEP = 20.0; // 旋轉(zhuǎn)角度（20度/秒）
function main() {var canvas = document.getElementById('webgl');var gl = getWebGLContext(canvas);if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) returnvar n = initVertexBuffers(gl);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.enable(gl.DEPTH_TEST);var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');var u_PickedFace = gl.getUniformLocation(gl.program, 'u_PickedFace');var viewProjMatrix = new Matrix4();viewProjMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 100.0);viewProjMatrix.lookAt(0.0, 0.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);gl.uniform1i(u_PickedFace, -1); // 默認不匹配面var currentAngle = 0.0; // 當(dāng)前旋轉(zhuǎn)角度canvas.onmousedown = function(ev) {   // 按下鼠標var x = ev.clientX, y = ev.clientY;var rect = ev.target.getBoundingClientRect();if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {// 如果按下的位置在＜canvas＞內(nèi)，則更新表面var x_in_canvas = x - rect.left, y_in_canvas = rect.bottom - y;var face = checkFace(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_PickedFace, viewProjMatrix, u_MvpMatrix);gl.uniform1i(u_PickedFace, face); // 將曲面編號傳遞給uPickedFacedraw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);}}var tick = function() {   // Start drawingcurrentAngle = animate(currentAngle);draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);requestAnimationFrame(tick, canvas);};tick();
}function initVertexBuffers(gl) {//    v6----- v5//   /|      /|//  v1------v0|//  | |     | |//  | |v7---|-|v4//  |/      |///  v2------v3var vertices = new Float32Array([   // Vertex coordinates1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,    // v0-v1-v2-v3 front1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,    // v0-v3-v4-v5 right1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,    // v0-v5-v6-v1 up-1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,    // v1-v6-v7-v2 left-1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,    // v7-v4-v3-v2 down1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0     // v4-v7-v6-v5 back]);var colors = new Float32Array([   // Colors0.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56, // v0-v1-v2-v3 front0.5, 0.41, 0.69,   0.5, 0.41, 0.69,   0.5, 0.41, 0.69,   0.5, 0.41, 0.69,  // v0-v3-v4-v5 right0.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84, // v0-v5-v6-v1 up0.0, 0.32, 0.61,   0.0, 0.32, 0.61,   0.0, 0.32, 0.61,   0.0, 0.32, 0.61,  // v1-v6-v7-v2 left0.27, 0.58, 0.82,  0.27, 0.58, 0.82,  0.27, 0.58, 0.82,  0.27, 0.58, 0.82, // v7-v4-v3-v2 down0.73, 0.82, 0.93,  0.73, 0.82, 0.93,  0.73, 0.82, 0.93,  0.73, 0.82, 0.93, // v4-v7-v6-v5 back]);var faces = new Uint8Array([   // Faces1, 1, 1, 1,     // v0-v1-v2-v3 front2, 2, 2, 2,     // v0-v3-v4-v5 right3, 3, 3, 3,     // v0-v5-v6-v1 up4, 4, 4, 4,     // v1-v6-v7-v2 left5, 5, 5, 5,     // v7-v4-v3-v2 down6, 6, 6, 6,     // v4-v7-v6-v5 back]);var indices = new Uint8Array([   // Indices of the vertices0, 1, 2,   0, 2, 3,    // front4, 5, 6,   4, 6, 7,    // right8, 9,10,   8,10,11,    // up12,13,14,  12,14,15,    // left16,17,18,  16,18,19,    // down20,21,22,  20,22,23     // back]);var indexBuffer = gl.createBuffer();if (!initArrayBuffer(gl, vertices, gl.FLOAT, 3, 'a_Position')) return -1; // Coordinates Informationif (!initArrayBuffer(gl, colors, gl.FLOAT, 3, 'a_Color')) return -1;      // Color Informationif (!initArrayBuffer(gl, faces, gl.UNSIGNED_BYTE, 1, 'a_Face')) return -1;// Surface Informationgl.bindBuffer(gl.ARRAY_BUFFER, null);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);return indices.length;
}function checkFace(gl, n, x, y, currentAngle, u_PickedFace, viewProjMatrix, u_MvpMatrix) {var pixels = new Uint8Array(4); // 存儲像素值的數(shù)組gl.uniform1i(u_PickedFace, 0);  // 將表面編號寫入a分量draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);/* 在WebGL中，gl.readPixels()函數(shù)用于從幀緩沖區(qū)中讀取像素數(shù)據(jù)（而非顏色緩沖區(qū)中）。該函數(shù)的第六個參數(shù)用于指定返回的像素數(shù)據(jù)的數(shù)據(jù)類型。當(dāng)將第六個參數(shù)設(shè)置為gl.UNSIGNED_BYTE時，表示希望返回的像素數(shù)據(jù)以無符號字節(jié)的形式表示。每個像素將用一個8位無符號整數(shù)（即一個字節(jié)）來表示。使用gl.UNSIGNED_BYTE可以獲得每個像素的紅、綠、藍和透明度通道的值（RGB或RGBA）的整數(shù)表示，取值范圍在0到255之間。當(dāng)將gl.readPixels()函數(shù)的第六個參數(shù)設(shè)置為gl.UNSIGNED_BYTE時，返回的每個像素的RGBA值都會以0到255的范圍內(nèi)的整數(shù)表示。每個顏色通道（紅、綠、藍和透明度）都用一個8位無符號整數(shù)（即一個字節(jié)）來表示這樣的設(shè)置通常用于讀取像素數(shù)據(jù)后進行圖像處理、紋理操作或其他需要使用整數(shù)表示的場景。*/gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels); // 讀取單擊位置的像素值。pixels[3]是曲面數(shù)console.log(pixels); // [128, 105, 176, 2]return pixels[3];
}var g_MvpMatrix = new Matrix4(); // 模型視圖投影矩陣
function draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix) {// 計算模型視圖投影矩陣并將其傳遞給u_MvpMatrixg_MvpMatrix.set(viewProjMatrix); g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0); // 適當(dāng)旋轉(zhuǎn)g_MvpMatrix.rotate(currentAngle, 0.0, 1.0, 0.0);g_MvpMatrix.rotate(currentAngle, 0.0, 0.0, 1.0);gl.uniformMatrix4fv(u_MvpMatrix, false, g_MvpMatrix.elements);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);   gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);  
}var last = Date.now();  // 上次調(diào)用此函數(shù)的時間
function animate(angle) {var now = Date.now(); // 計算運行時間var elapsed = now - last;last = now;// 更新當(dāng)前旋轉(zhuǎn)角度（根據(jù)經(jīng)過的時間進行調(diào)整）var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;return newAngle % 360;
}function initArrayBuffer (gl, data, type, num, attribute) {var buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);var a_attribute = gl.getAttribLocation(gl.program, attribute);gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);gl.enableVertexAttribArray(a_attribute);return true;
}

代碼詳解

首先，頂點著色器中添加了attribute變量a_Face，它表示立方體各表面的編號，即當(dāng)前頂點屬于哪個表面（第4行）。鼠標被點擊時，這個值就會被“編碼”成顏色值的α分量。initVertexBuffers（）函數(shù)（第63行）建立了表面編號數(shù)組faces，數(shù)組中的每個元素對應(yīng)一個頂點（第87行）。比如，頂點v0-v1-v2-v3定義了1號表面，而頂點v0-v3-v4-v5定義了2號表面，等等。數(shù)組faces前4個元素都是1，表示前4個頂點都屬于1號表面，以此類推（第88行）。

當(dāng)某個表面被選中時，就通過u_PickedFace變量來通知頂點著色器這個表面被選中了（第6行）。這樣頂點著色器就可以將這個表面繪制成白色，用戶就獲得了反饋，知道這個表面確實被選中了。

在正常情況下（即不在鼠標被點擊的那一刻），頂點著色器會比較當(dāng)前被選中的表面編號u_PickedFace和當(dāng)前頂點的表面編號a_Face，如果它們相等，即當(dāng)前頂點屬于被選中的表面，就將color賦為白色，如果不相等，就將其賦為頂點原來的顏色a_Color。此處必須將float類型的a_Face轉(zhuǎn)化為int類型，再與u_PickedFace進行比較，因為attribute變量只能是float類型的。在鼠標點擊的那一刻，u_PickedFace被設(shè)為0，我們將a_Face的值寫入到顏色的α分量中。

main（）函數(shù)為u_PickedFace指定初始值-1（第40行）。按照faces變量的定義（第87行），立方體各表面中沒有哪一個編號是-1，所以一開始沒有任何表面被選中，每一個面的顏色都是初始顏色。

gl.readPixels()見126行效果

鼠標被點擊時，u_PickedFace變量變?yōu)榱?，頂點著色器就在顏色緩沖區(qū)中將每個面繪制成非1的α值，并且α的值取決于表面編號。最關(guān)鍵的邏輯發(fā)生在鼠標點擊事件的響應(yīng)函數(shù)中：在獲取了鼠標點擊位置后，調(diào)用checkFace（）函數(shù)并傳入u_PickedFace變量，也就是著色器中同名變量的存儲地址（第49行）。

checkFace（）函數(shù)的任務(wù)是，根據(jù)點擊位置返回選中表面的編號（第113行）。該函數(shù)首先將u_PickedFace變量設(shè)為0（第115行），然后立刻調(diào)用draw（）函數(shù)（在顏色緩沖區(qū)中，最終沒有顯示在屏幕上）進行繪制，此時每個表面的α值就取決于表面的編號。然后，從顏色緩沖區(qū)獲取鼠標點擊處的像素值（第125行），通過pixels［3］獲取表面編號（即α分量，索引為3）。checkFace（）函數(shù)返回選中的表面編號，執(zhí)行流程回到鼠標點擊事件響應(yīng)函數(shù)中，用選中的表面編號重新繪制立方體（第50～51行），并在屏幕上顯示出來，如前所述。

gl.UNSIGNED_BYTE注意點

? ? 在WebGL中，gl.readPixels()函數(shù)用于從幀緩沖區(qū)中讀取像素數(shù)據(jù)（而非顏色緩沖區(qū)中）。該函數(shù)的第六個參數(shù)用于指定返回的像素數(shù)據(jù)的數(shù)據(jù)類型。

? ? 當(dāng)將第六個參數(shù)設(shè)置為gl.UNSIGNED_BYTE時，表示希望返回的像素數(shù)據(jù)以無符號字節(jié)的形式表示。每個像素將用一個8位無符號整數(shù)（即一個字節(jié)）來表示。

? ? 使用gl.UNSIGNED_BYTE可以獲得每個像素的紅、綠、藍和透明度通道的值（RGB或RGBA）的整數(shù)表示，取值范圍在0到255之間。（見?gl.readPixels()見126行效果?上圖）

? ? 這樣的設(shè)置通常用于讀取像素數(shù)據(jù)后進行圖像處理、紋理操作或其他需要使用整數(shù)表示的場景。

示例效果