需要電子檔書籍可以Q羣：828202939 希望可以和大家一起學習、一起進步！！
所有的課程源代碼在我上傳的資源裏面，本來想設置開源，好像不行！博客和專欄同步！
如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，在下會及時修改！！！！！
上一節課我們學習了 三維空間-可視空間的設置
這一節課我們將學習 三維空間-鍵盤來改變視點修復版缺失的三角形
上節課我們知道可視空間的重要性，前面用鍵盤控制視點來改變三角形發現極左或者極右的時候會缺失一個角
其中的原因就是可視空間的問題，遠截面過於接近視點，也可以看做三角形的那個不在可視空間裏面，所以你看不到了
那麼怎麼去解決了，很簡單，只要我們把遠截點設置得遠點就好了
先來看運行案例：
具體看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>webgl第32課-用鍵盤來改變視點補缺版</title>
</head>
<body οnlοad="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script src="LookAtTrianglesWithKeys_ViewVolume.js"></script>
</body>
</html>
// 頂點着色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'uniform mat4 u_ViewMatrix;\n' +
'uniform mat4 u_ProjMatrix;\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_Position = u_ProjMatrix * u_ViewMatrix * a_Position;\n' +
' v_Color = a_Color;\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';
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Set the vertex coordinates and color (the blue triangle is in the front)
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to specify the vertex infromation');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 獲取u ViewMatrix和u ProiMatrix變量的存儲位置
var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
if (!u_ViewMatrix || !u_ProjMatrix) {
console.log('Failed to get u_ViewMatrix or u_ProjMatrix');
return;
}
// 創建視圖矩陣
var viewMatrix = new Matrix4();
// 註冊鍵盤事件響應函數
document.onkeydown = function(ev){ keydown(ev, gl, n, u_ViewMatrix, viewMatrix); };
// 創建指定可視空間的矩陣並傳個給u_ProjMatrix變量
var projMatrix = new Matrix4();
//這裏設置遠截點爲2.0來修復缺失的三角形角
projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 2.0);
gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
draw(gl, n, u_ViewMatrix, viewMatrix); // Draw the triangles
}
function initVertexBuffers(gl) {
var verticesColors = new Float32Array([
// 頂點座標和顏色
0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one
-0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one
-0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
0.0, -0.6, -0.2, 1.0, 1.0, 0.4,
0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // The front blue one
-0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
]);
var n = 9;
// Create a buffer object
var vertexColorbuffer = gl.createBuffer();
if (!vertexColorbuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Write vertex information to buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
var FSIZE = verticesColors.BYTES_PER_ELEMENT;
// Assign the buffer object to a_Position and enable the assignment
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if(a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
gl.enableVertexAttribArray(a_Position);
// Assign the buffer object to a_Color and enable the assignment
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if(a_Color < 0) {
console.log('Failed to get the storage location of a_Color');
return -1;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
gl.enableVertexAttribArray(a_Color);
return n;
}
//視點位置
var g_EyeX = 0.20, g_EyeY = 0.25, g_EyeZ = 0.25; // Eye position
//鍵盤事件函數
function keydown(ev, gl, n, u_ViewMatrix, viewMatrix) {
if(ev.keyCode == 39) { // 按下右鍵
g_EyeX += 0.01;
} else
if (ev.keyCode == 37) { // 按下左鍵
g_EyeX -= 0.01;
} else { return; } // 其他直接返回
draw(gl, n, u_ViewMatrix, viewMatrix);
}
//繪製函數
function draw(gl, n, u_ViewMatrix, viewMatrix) {
// Set the matrix to be used for to set the camera view
viewMatrix.setLookAt(g_EyeX, g_EyeY, g_EyeZ, 0, 0, 0, 0, 1, 0);
// Pass the view projection matrix
gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the rectangle
gl.drawArrays(gl.TRIANGLES, 0, n);
}