本系列僅作為本人學(xué)習(xí)《WebGL編程指南》這本書的筆記所用
【旋轉(zhuǎn)矩陣】與【平移矩陣】合并，要先把三階的旋轉(zhuǎn)矩陣轉(zhuǎn)換成4 x 4階
4 x 4階【旋轉(zhuǎn)矩陣】
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>11繪制三角形-變換矩陣-旋轉(zhuǎn)4x4</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)著色器程序
//======
// ━━ ━━ ━━ ━━ ━━ ━━
// ┃ x' ┃ ┃ cosB -sinB 0 0 ┃ ┃ x ┃
// ┃ y' ┃ = ┃ sinB cosB 0 0 ┃ X ┃ y ┃
// ┃ z' ┃ ┃ 0 0 1 0 ┃ ┃ z ┃
// ┃ 1 ┃ ┃ 0 0 0 1 ┃ ┃ 1 ┃
// ━━ ━━ ━━ ━━ ━━ ━━
//======
let VSHADER_SOURCE =
`
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main() {
gl_Position = u_xformMatrix * a_Position;
}
`;
//======
// 片元著色器程序
let FSHADER_SOURCE =
`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// 旋轉(zhuǎn)角度
let ANGLE = 90.0;
// 主程序
function main() {
let canvas = document.getElementById('webgl');
// 獲取WebGL繪圖上下文
let gl = getWebGLContext(canvas);
if(!gl) {
console.error('無法使用WebGL');
return;
}
// 初始化著色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.error('無法使用著色器');
return;
}
// 設(shè)置頂點(diǎn)坐標(biāo)
let nLength = initVertexBuffers(gl);
if ( nLength < 0) {
console.log('無法設(shè)置點(diǎn)的位置');
return;
}
// 創(chuàng)建旋轉(zhuǎn)矩陣
// ============
let radian = Math.PI * ANGLE / 180.0; // 轉(zhuǎn)為弧度制
let cosB = Math.cos(radian); // js的Math.cos() 方式只支持弧度制參數(shù)
let sinB = Math.sin(radian);
// 主要WebGL中矩陣是列主序的,設(shè)置矩陣
let xformMatrix = new Float32Array([
cosB, sinB, 0.0, 0.0,
-sinB, cosB, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0,
]);
// 將旋轉(zhuǎn)矩陣傳輸給頂點(diǎn)著色器
let u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
//=============
// 設(shè)置<canvas> 背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 繪制三角形
gl.drawArrays(gl.TRIANGLES, 0, nLength); // nLength為n個(gè)點(diǎn)
}
function initVertexBuffers(gl) {
// 類型化數(shù)組, 用于儲(chǔ)存頂點(diǎn)的坐標(biāo)或顏色。比Array性能更高，不支持push(),和pop()
let vertices = new Float32Array([
0.0, 0.5, -0.5, -0.5, 0.5, -0.5
]); // 坐標(biāo) x1,y1,x2,y2,x3,y3
let n = 3; // 點(diǎn)的個(gè)數(shù)
// 1.創(chuàng)建緩沖區(qū)對象
let vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('不能創(chuàng)建緩沖區(qū)對象');
return -1;
}
// 2.將緩沖區(qū)對象綁定到目標(biāo)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 3.向緩沖區(qū)對象寫入數(shù)據(jù),不能直接向緩沖區(qū)寫入數(shù)據(jù)，只能向綁定的目標(biāo)輸入數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 獲取a_Position變量的存儲(chǔ)位置
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('無法獲取 a_Position')
return -1;
}
// 4.將緩沖區(qū)對象分配給attribute變量--所有點(diǎn)數(shù)據(jù)一次性傳入
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 5.連接a_Position變量與分配給它的緩沖區(qū)對象,開啟attribute變量
gl.enableVertexAttribArray(a_Position);
return n; // 返回待繪制頂點(diǎn)的數(shù)量， 函數(shù)內(nèi)部發(fā)生錯(cuò)誤后返回-1
}
</script>
</body>
</html>
