1.动画效果展示
第一个动画效果，是在动画处理函数中不断旋转的效果
第二个动画效果，是复合变换动画，在动画处理函数中先做旋转在做平移的效果
2.动画效果原理
在组合变换的基础上，实现动画差不多是顺利成章的事情，我们只需要利用浏览器提供的 requestAnimationFrame() 不断进行变换就可以实现动画，它的实质就是变换矩阵的不断相乘 。
3.动画实现要点
首先要定义一个动画处理函数 tick()，在这个函数中，我们获取每一次要旋转的弧度，并传给模型矩阵的 rotate() 函数获取到新的矩阵，在这里如果希望得到复合动画，即第二个效果，那么放开注释代码 modelMatrix.translate(0.006, 0.0, 0.0) 运行这段代码会生成平移矩阵并与上一次完成旋转的矩阵相乘，实现组合动画。然后清空画布，将新矩阵传给顶点着色器uniform变量 u_ModelMatrix ，接着绘制图形，最后还要调用 requestAnimationFrame() 请求循环调用 tick() 函数
//初始化模型矩阵
var modelMatrix = new Matrix4()
var g_LastTime = Date.now(); // 上次绘制的时间
var ANGLE_SET = 45; // 旋转速度（度/秒）
var rad = 0.0; // 启始角度
var tick = function () {
var now = Date.now()
var elapsed = now - g_LastTime //上次调用与当前时间差
g_LastTime = now
rad = ((rad + ANGLE_SET * elapsed / 1000) % 360) * Math.PI / 180; // 当前的弧度
//将旋转信息输入模型矩阵
modelMatrix.rotate(rad, 0.0, 0.0, 1.0)
//将平移信息输入模型矩阵
//modelMatrix.translate(0.006, 0.0, 0.0)
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//向顶点着色器uniform变量u_ModelMatrix传值
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.currentMatrix)
//绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, n)
requestAnimationFrame(tick);
}
tick() // 调用tick
4.demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--通过canvas标签创建一个400px*400px大小的画布-->
<canvas id="webgl" width="800" height="800"></canvas>
<script>
//顶点着色器
var VSHADER_SOURCE = '' +
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'uniform mat4 u_ModelMatrix;\\n' + //声明uniform变量u_ModelMatrix，用来存放模型矩阵
'void main(){\\n' +
' gl_Position = u_ModelMatrix * a_Position;\\n' + //模型放矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
'}\\n';
//片元着色器
var FSHADER_SOURCE = '' +
'precision mediump float;\\n' + // 设置精度
'uniform vec4 u_FragColor;\\n' + //声明uniform变量u_FragColor，用来存放顶点颜色信息
'void main(){\\n' +
//通过u_FragColor变量设置片元颜色
' gl_FragColor = u_FragColor;\\n' +
'}\\n';
//初始化着色器函数
function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
//创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
//创建片元着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//引入顶点、片元着色器源代码
gl.shaderSource(vertexShader, VSHADER_SOURCE);
gl.shaderSource(fragmentShader, FSHADER_SOURCE);
//编译顶点、片元着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
//创建程序对象program
var program = gl.createProgram();
//附着顶点着色器和片元着色器到program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
//链接program
gl.linkProgram(program);
//使用program
gl.useProgram(program);
gl.program = program
//返回程序program对象
return program;
}
function init() {
//通过getElementById()方法获取canvas画布
var canvas = document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl = canvas.getContext('webgl');
//初始化着色器
initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);
// 设置canvas的背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//给片元着色器uniform变量u_FragColor赋值
setFragColor(gl)
//初始化顶点
var n = initVertexBuffers(gl)
//获取顶点着色器uniform变量u_ModelMatrix(模型矩阵)的存储地址
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
//初始化模型矩阵
var modelMatrix = new Matrix4()
var g_LastTime = Date.now(); // 上次绘制的时间
var ANGLE_SET = 45; // 旋转速度（度/秒）
var rad = 0.0; // 启始角度
var tick = function () {
var now = Date.now()
var elapsed = now - g_LastTime //上次调用与当前时间差
g_LastTime = now
rad = ((rad + ANGLE_SET * elapsed / 1000) % 360) * Math.PI / 180; // 当前的弧度
//将旋转信息输入模型矩阵
modelMatrix.rotate(rad, 0.0, 0.0, 1.0)
//将平移信息输入模型矩阵
//modelMatrix.translate(0.006, 0.0, 0.0)
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//向顶点着色器uniform变量u_ModelMatrix传值
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.currentMatrix)
//绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, n)
requestAnimationFrame(tick);
}
tick() // 调用tick
}
//给片元着色器uniform变量u_FragColor赋值
function setFragColor(gl) {
//获取片元着色器uniform变量u_FragColor的存储地址
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
//向片元着色器uniform变量u_FragColor传值
gl.uniform4f(u_FragColor, 0.0, 1.0, 0.0, 1.0) //绿色
}
//初始化顶点
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0.0, 0.2,
-0.2, -0.2,
0.2, -0.2
])
//1.创建缓冲区对象
var 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)
var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //获取着色器attribute变量a_Position的存储地址
//4.将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
//5.连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position)
return vertices.length / 2
}
//初始化模型矩阵
function Matrix4() {
this.currentMatrix = new Float32Array([
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0,
])
}
// 设置平移
Matrix4.prototype.translate = function (x, y, z) {
var mat = new Float32Array([
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
x, y, z, 1.0,
])
this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
}
// 设置旋转
Matrix4.prototype.rotate = function (rad, x, y, z) {
var mat = []
if (x > 0) {
// 绕x轴的旋转矩阵
mat = new Float32Array([
1.0, 0.0, 0.0, 0.0,
0.0, Math.cos(rad), -Math.sin(rad), 0.0,
0.0, Math.sin(rad), Math.cos(rad), 0.0,
0.0, 0.0, 0.0, 1.0,
]);
} else if (y > 0) {
// 绕y轴的旋转矩阵
mat = new Float32Array([
Math.cos(rad), 0.0, -Math.sin(rad), 0.0,
0.0, 1.0, 0.0, 0.0,
Math.sin(rad), 0.0, Math.cos(rad), 0.0,
0.0, 0.0, 0.0, 1.0,
]);
} else if (z > 0) {
// 绕z轴的旋转矩阵
mat = new Float32Array([
Math.cos(rad), Math.sin(rad), 0.0, 0.0,
-Math.sin(rad), Math.cos(rad), 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0,
]);
} else {
// 单位矩阵
mat = new Float32Array([
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0,
]);
}
this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
}
// 设置缩放
Matrix4.prototype.scale = function (xScale, yScale, zScale) {
var mat = new Float32Array([
xScale, 0.0, 0.0, 0.0,
0.0, yScale, 0.0, 0.0,
0.0, 0.0, zScale, 0.0,
0.0, 0.0, 0.0, 1.0,
])
this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
}
//4*4矩阵乘法
function matrix44Multiply(mat1, mat2) {
var dest = new Float32Array([
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0,
])
var a = mat1[0],
b = mat1[1],
c = mat1[2],
d = mat1[3],
e = mat1[4],
f = mat1[5],
g = mat1[6],
h = mat1[7],
i = mat1[8],
j = mat1[9],
k = mat1[10],
l = mat1[11],
m = mat1[12],
n = mat1[13],
o = mat1[14],
p = mat1[15],
A = mat2[0],
B = mat2[1],
C = mat2[2],
D = mat2[3],
E = mat2[4],
F = mat2[5],
G = mat2[6],
H = mat2[7],
I = mat2[8],
J = mat2[9],
K = mat2[10],
L = mat2[11],
M = mat2[12],
N = mat2[13],
O = mat2[14],
P = mat2[15];
dest[0] = A * a + B * e + C * i + D * m;
dest[1] = A * b + B * f + C * j + D * n;
dest[2] = A * c + B * g + C * k + D * o;
dest[3] = A * d + B * h + C * l + D * p;
dest[4] = E * a + F * e + G * i + H * m;
dest[5] = E * b + F * f + G * j + H * n;
dest[6] = E * c + F * g + G * k + H * o;
dest[7] = E * d + F * h + G * l + H * p;
dest[8] = I * a + J * e + K * i + L * m;
dest[9] = I * b + J * f + K * j + L * n;
dest[10] = I * c + J * g + K * k + L * o;
dest[11] = I * d + J * h + K * l + L * p;
dest[12] = M * a + N * e + O * i + P * m;
dest[13] = M * b + N * f + O * j + P * n;
dest[14] = M * c + N * g + O * k + P * o;
dest[15] = M * d + N * h + O * l + P * p;
return dest;
}
init()
</script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容