本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用
image.jpeg
动画基础：转动的三角形 = 不断擦除和重绘三角形，每次重绘时改动角度
requestAnimationFrame（）
是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。参数为要循环的回调函数，在浏览器重绘前调用。
优势：充分利用显示器的刷新机制，刷新频率保持同步，比较节省系统资源，一旦页面不处于浏览器的当前标签，就会自动停止刷新。
缺点：不能修改刷新频率，且是在主线程上完成，若主线程繁忙会使其效果打折扣。
webgl-动画.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>16绘制三角形-动画-旋转</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的浏览器会展示这段文字
</canvas>
<script>
// 顶点着色器程序
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);
}
`;
// 旋转速度(度/秒)
let ANGLE_STEP = 45.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;
}
// 设置顶点坐标
let nLength = initVertexBuffers(gl);
if (nLength < 0) {
console.log("无法设置点的位置");
return;
}
// ===============
// 设置<canvas> 背景色，在绘制图形前设置背景色，当清除和重绘时一直有效
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 三角形当前旋转角度
let currentAngle = 0.0;
// 创建Matrix4对象以进行模型变换
let modelMatrix = new Matrix4();
// 将旋转矩阵传输给顶点着色器
let u_ModeMatrix = gl.getUniformLocation(gl.program, "u_ModeMatrix");
// =============
// =============
// 开始绘制三角形
let tick = function () {
currentAngle = animate(currentAngle); // 更新旋转角
draw(gl, nLength, currentAngle, modelMatrix, u_ModeMatrix);
requestAnimationFrame(tick); // 请求浏览器调用tick
};
tick();
// =============
}
function initVertexBuffers(gl) {
// 类型化数组, 用于储存顶点的坐标或颜色。比Array性能更高，不支持push(),和pop()
let vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]); // 坐标 x1,y1,x2,y2,x3,y3
let n = 3; // 点的个数
// 1.创建缓冲区对象
let vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log("不能创建缓冲区对象");
return -1;
}
// 2.将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 3.向缓冲区对象写入数据,不能直接向缓冲区写入数据，只能向绑定的目标输入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 获取a_Position变量的存储位置
let a_Position = gl.getAttribLocation(gl.program, "a_Position");
if (a_Position < 0) {
console.log("无法获取 a_Position");
return -1;
}
// 4.将缓冲区对象分配给attribute变量--所有点数据一次性传入
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 5.连接a_Position变量与分配给它的缓冲区对象,开启attribute变量
gl.enableVertexAttribArray(a_Position);
return n; // 返回待绘制顶点的数量， 函数内部发生错误后返回-1
}
// =============
function draw(gl, nLength, currentAngle, modelMatrix, u_ModeMatrix) {
// 设置旋转矩阵
modelMatrix.setRotate(currentAngle, 0, 0, 1);
// 将旋转矩阵传输给顶点着色器
gl.uniformMatrix4fv(u_ModeMatrix, false, modelMatrix.elements);
// 清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, nLength); // nLength为n个点
}
// 记录上一次调用函数的时刻
let g_last = Date.now();
function animate(angle) {
// 计算距离上次调用经过多少时间
let now = Date.now();
let elapsed = now - g_last; // 毫秒
g_last = now;
// 根据距离上次调用的时间，更新当前旋转角度
let newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
return (newAngle %= 360);
}
// =============
</script>
</body>
</html>
网友评论