16 使用requestAnimationFrame()方法制作WebGL简单动画
程序员文章站
2024-01-18 20:46:16
...
案例查看地址：点击这里
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
text-align: center;
}
#canvas {
margin: 0;
}
</style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="800">
你的浏览器不支持WebGL，请更换新的浏览器
</canvas>
</body>
<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>
//顶点着色器
var VSHADER_SOURCE = "" +
"attribute vec4 a_Position;\n" +
"uniform mat4 u_ModelMatrix;\n" +
"void main(){" +
" gl_Position = u_ModelMatrix * a_Position;\n" +
"}\n";
//片元着色器
var FSHADER_SOURCE = "" +
"void main(){" +
" gl_FragColor = vec4(0.0,1.0,.0,1.0);\n" +
"}\n";
//旋转速度（度/秒）
var angle_step = 45.0;
//加载完成调用的方法
function main() {
var canvas = document.getElementById("canvas");
var gl = getWebGLContext(canvas);
if(!gl){
console.log("电脑不支持WebGL");
return;
}
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
console.log("初始化着色器失败");
return;
}
var n = initVertexBuffers(gl);
//新增，创建Matriix对象进行模型变换
var modelMatrix = new Matrix4();
//获取矩阵的存储位置
var u_ModelMatrix = gl.getUniformLocation(gl.program,"u_ModelMatrix");
if(u_ModelMatrix < 0){
console.log("无法获取到矩阵的存储位置");
return;
}
//将矩阵模型数据传递给存储位置
gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);
gl.clearColor(0.0,0.0,1.0,1.0);
//三角形的当前旋转角度
var currentAngle = 0.0;
//开始绘制三角形
var tick = function () {
currentAngle = animate(currentAngle);//更新旋转角
draw(gl, n,currentAngle,modelMatrix,u_ModelMatrix);
requestAnimationFrame(tick);//请求浏览器调用tick
};
tick();
}
//使用缓冲区
function initVertexBuffers(gl) {
var vertices = new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
var n = 3;
var vertexBuffer = gl.createBuffer();
if(!vertexBuffer){
console.log("无法创建缓冲区");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program,"a_Position");
if(a_Position < 0){
console.log("无法获取到变量的存储位置");
return;
}
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
gl.enableVertexAttribArray(a_Position);
return n;
}
function draw(gl, n,currentAngle,modelMatrix,u_ModelMatrix) {
//设置旋转矩阵
modelMatrix.setRotate(currentAngle,0,0,1);
//将旋转矩阵传输给顶点着色器
gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);
//清除<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
//绘制三角形
gl.drawArrays(gl.TRIANGLES,0,n);
}
//记录上一次调用函数的时刻
var g_last = Date.now();
function animate(angle) {
//计算距离上次调用经过多长的时间
var now = Date.now();
var elapsed = now - g_last;//毫秒
g_last = now;
//根据距离上次调用的时间，更新当前旋转角度
var newAngle = angle + (angle_step * elapsed)/1000.0;
return newAngle %= 360;
}
</script>
</html>制作简单动画首先需要就是将只需要指定一次值得变量设置方法都在main()方法里面完成，上面的js代码可以分为两部分来看：
第一部分：48行到89行的main()方法，里面获取了WebGL的上下文、创建的矩阵模型、使用缓存区绘制图形的点、获取矩阵的存储位置、指定背景色、创建了图形的初始角度，这些方法都只需要绘制一次，所以放置到了主函数main()函数内，因为main()函数只会被调用一次。然后又写了一个绘制tick()方法，来调用第二部分。
第二部分：这部分一共有三个方法
（1）创建和使用缓存区域进行绘制图形的点。前面讲解过，此处略过。
（2）首先看131到140行tick()方法调用的第一个方法animate()，这个方法首先将现在的图形角度传入，然后返回新的图形角度。这里就需要将一下里面的代码为什么需要计算时间了，因为requestAnimationFrame()方法不同于js 的setInterval和setTimeOut，因为它的优势是可以避免在未**的标签页上运行动画，缺点就是，无法确定被重复调用的间隔，所以，我们就需要计算出两次调用的时间间隔，然后乘以每秒旋转的角度，比如，下一次比上一次调用时间间隔是两秒，需要旋转的角度就是45.0*2.0。
相对的，也有取消请求的方法
requestAnimationFrame()方法更像setTimeOut（）需要这次请求完最后再调用，所以tick()方法最后有重新调用重绘的方法tick()。
（3）第三个方法就是116到128行的draw()方法看起来就简单，就是将需要重绘的数据更新一下，更新矩阵数据，将数据放入WebGL存储，清除页面，然后再通过gl.drawArrays()方法进行重绘。