本系列僅作為本人學(xué)習(xí)《WebGL編程指南》這本書的筆記所用
image.jpeg
動(dòng)畫基礎(chǔ)：轉(zhuǎn)動(dòng)的三角形 = 不斷擦除和重繪三角形扯键，每次重繪時(shí)改動(dòng)角度
requestAnimationFrame（）
是瀏覽器用于定時(shí)循環(huán)操作的一個(gè)接口，類似于setTimeout投慈，主要用途是按幀對(duì)網(wǎng)頁(yè)進(jìn)行重繪。參數(shù)為要循環(huán)的回調(diào)函數(shù)裕寨，在瀏覽器重繪前調(diào)用撒妈。
優(yōu)勢(shì)：充分利用顯示器的刷新機(jī)制，刷新頻率保持同步运褪，比較節(jié)省系統(tǒng)資源惊楼，一旦頁(yè)面不處于瀏覽器的當(dāng)前標(biāo)簽玖瘸，就會(huì)自動(dòng)停止刷新。
缺點(diǎn)：不能修改刷新頻率檀咙，且是在主線程上完成雅倒，若主線程繁忙會(huì)使其效果打折扣。
webgl-動(dòng)畫.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>16繪制三角形-動(dòng)畫-旋轉(zhuǎn)</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;
uniform mat4 u_ModeMatrix;
void main() {
gl_Position = u_ModeMatrix * a_Position;
}
`;
// 片元著色器程序
let FSHADER_SOURCE = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// 旋轉(zhuǎn)速度(度/秒)
let ANGLE_STEP = 45.0;
// 主程序
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)坐標(biāo)
let nLength = initVertexBuffers(gl);
if (nLength < 0) {
console.log("無(wú)法設(shè)置點(diǎn)的位置");
return;
}
// ===============
// 設(shè)置<canvas> 背景色弧可，在繪制圖形前設(shè)置背景色蔑匣，當(dāng)清除和重繪時(shí)一直有效
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 三角形當(dāng)前旋轉(zhuǎn)角度
let currentAngle = 0.0;
// 創(chuàng)建Matrix4對(duì)象以進(jìn)行模型變換
let modelMatrix = new Matrix4();
// 將旋轉(zhuǎn)矩陣傳輸給頂點(diǎn)著色器
let u_ModeMatrix = gl.getUniformLocation(gl.program, "u_ModeMatrix");
// =============
// =============
// 開(kāi)始繪制三角形
let tick = function () {
currentAngle = animate(currentAngle); // 更新旋轉(zhuǎn)角
draw(gl, nLength, currentAngle, modelMatrix, u_ModeMatrix);
requestAnimationFrame(tick); // 請(qǐng)求瀏覽器調(diào)用tick
};
tick();
// =============
}
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ū)對(duì)象
let vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log("不能創(chuàng)建緩沖區(qū)對(duì)象");
return -1;
}
// 2.將緩沖區(qū)對(duì)象綁定到目標(biāo)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 3.向緩沖區(qū)對(duì)象寫入數(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("無(wú)法獲取 a_Position");
return -1;
}
// 4.將緩沖區(qū)對(duì)象分配給attribute變量--所有點(diǎn)數(shù)據(jù)一次性傳入
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 5.連接a_Position變量與分配給它的緩沖區(qū)對(duì)象,開(kāi)啟attribute變量
gl.enableVertexAttribArray(a_Position);
return n; // 返回待繪制頂點(diǎn)的數(shù)量， 函數(shù)內(nèi)部發(fā)生錯(cuò)誤后返回-1
}
// =============
function draw(gl, nLength, currentAngle, modelMatrix, u_ModeMatrix) {
// 設(shè)置旋轉(zhuǎn)矩陣
modelMatrix.setRotate(currentAngle, 0, 0, 1);
// 將旋轉(zhuǎn)矩陣傳輸給頂點(diǎn)著色器
gl.uniformMatrix4fv(u_ModeMatrix, false, modelMatrix.elements);
// 清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 繪制三角形
gl.drawArrays(gl.TRIANGLES, 0, nLength); // nLength為n個(gè)點(diǎn)
}
// 記錄上一次調(diào)用函數(shù)的時(shí)刻
let g_last = Date.now();
function animate(angle) {
// 計(jì)算距離上次調(diào)用經(jīng)過(guò)多少時(shí)間
let now = Date.now();
let elapsed = now - g_last; // 毫秒
g_last = now;
// 根據(jù)距離上次調(diào)用的時(shí)間校套，更新當(dāng)前旋轉(zhuǎn)角度
let newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
return (newAngle %= 360);
}
// =============
</script>
</body>
</html>
