本系列僅作為本人學(xué)習(xí)《WebGL編程指南》這本書(shū)的筆記所用
三維立方體由三角形構(gòu)成
二維時(shí)要考慮頂點(diǎn)的x、y坐標(biāo)，而三維物體還需要考慮深度信息。
image.jpeg
定義一個(gè)觀察者：1觀察方向，2可視距離
確定觀察者狀態(tài)需要的信息：
1、視點(diǎn) (eyeX, eyeY, eyeZ)
2、觀察目標(biāo)點(diǎn) (atX, atY, atZ)
2、上方向（防止視角旋轉(zhuǎn)）(upX, upY, upZ)
image.jpeg
image.jpeg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>21繪制三維的三角形</title>
<script src="./lib/cuon-matrix.js"></script>
<script src="./lib/cuon-utils.js"></script>
<script src="./lib/webgl-debug.js"></script>
<script src="./lib/webgl-utils.js"></script>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
不支持canvas的瀏覽器會(huì)展示這段文字
</canvas>
<script>
// =============================??
// 頂點(diǎn)著色器程序
let VSHADER_SOURCE =
`
attribute vec4 a_Position;
attribute vec4 a_Color;
uniform mat4 u_ViewMatrix;
uniform mat4 u_ModelMatrix;
varying vec4 v_Color;
void main() {
gl_Position = u_ViewMatrix * u_ModelMatrix * a_Position;
v_Color = a_Color;
}
`;
// 片元著色器程序
let FSHADER_SOURCE =
`
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
`;
// =============================??
// 主程序
function main() {
let canvas = document.getElementById('webgl');
// 獲取WebGL繪圖上下文
let gl = getWebGLContext(canvas);
if(!gl) {
console.error('無(wú)法使用WebGL');
return;
}
// 初始化著色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.error('無(wú)法使用著色器');
return;
}
// 設(shè)置頂點(diǎn)位置
let n = initvertexColorBuffers(gl);
if ( n < 0) {
console.log('無(wú)法設(shè)置點(diǎn)的位置');
return;
}
// 設(shè)置<canvas> 背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// =============================??
// 獲取u_ViewMatrix變量和u_ModelMatrix變量的存儲(chǔ)地址
let u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
let u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
if(!u_ViewMatrix || !u_ModelMatrix) {
console.log('無(wú)法獲取u_ViewMatrix和u_ModelMatrix');
return;
}
// 設(shè)置視點(diǎn)、視線和上方向
let viewMatrix = new Matrix4();
viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
let modelMatrix = new Matrix4();
modelMatrix.setRotate(-10, 0, 0, 1);
// 將視圖矩陣傳給u_ViewMatrix變量和u_ModelMatrix變量
gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
// =============================??
// 清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, n); // n為n個(gè)點(diǎn)
}
// =============================??
function initvertexColorBuffers(gl) {
let verticesColors = new Float32Array([
// 頂點(diǎn)坐標(biāo)和顏色
0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // 綠色三角形在最后
-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, // 黃色三角形在中間
-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, // 藍(lán)色三角形在最前面
-0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
]);
let n = 9; // 點(diǎn)的個(gè)數(shù)，三個(gè)三角形
// 1.創(chuàng)建緩沖區(qū)對(duì)象
let vertexColorBuffer = gl.createBuffer();
if (!vertexColorBuffer) {
console.log('不能創(chuàng)建緩沖區(qū)對(duì)象');
return -1;
}
// 2.將緩沖區(qū)對(duì)象綁定到目標(biāo)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
// 獲取a_Position變量的存儲(chǔ)位置
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('無(wú)法獲取 a_Position')
return -1;
}
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
gl.enableVertexAttribArray(a_Position);
// 獲取a_Color變量的存儲(chǔ)位置
let a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if(a_Color < 0) {
console.log('無(wú)法獲取 a_Color');
return -1;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
gl.enableVertexAttribArray(a_Color);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return n; // 返回待繪制頂點(diǎn)的數(shù)量， 函數(shù)內(nèi)部發(fā)生錯(cuò)誤后返回-1
}
// =============================??
</script>
</body>
</html>
