16 使用requestAnimationFrame()方法制作WebGL简单动画
2017-05-17 01:37
393 查看
案例查看地址：点击这里
<!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()方法进行重绘。
<!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()方法进行重绘。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简单图片3D变换动画的制作（使用transition、transform）
- 使用JavaScript制作一个简单的计数器的方法
- CSS3简单动画效果与使用列表制作菜单
- 使用JavaScript制作简单的动画
- 第七篇、使用UIView的animateWithDuration方法制作简易动画
- CSS3简单动画效果与使用列表制作菜单
- 使用canvas画的圆形水球波纹带进度条的效果，里面使用的是requestAnimationFrame方法()，所以动画的执行只在区域可见的时候才会执行
- 使用.NET REACTOR使用方法，制作软件许可证，做一个简单的许可证系统步骤
- 使用Loader.css和css-spinners来制作加载动画的方法
- 使用Unity制作简单时钟动画
- 使用WebGL + Three.js制作动画场景
- 16 个使用 CSS3 和 jQuery 制作的加载中动画
- IOS动画的使用方法总结－下拉框的简单实现
- iOS——制作简单的View时系统方法的使用
- html 最简单的Gif图动画制作方法 gif转base64
- CSS3简单动画效果与使用列表制作菜单
- 使用setTimeout制作简单透明度渐变动画
- 【jQuery】调用animate()方法制作简单的动画效果
- 使用Spine软件为骨骼动画制作简单特效
- 20.调用animate()方法制作简单的动画效果