通过矩阵相乘实现图形的组合变换
1.组合变换效果展示
如上，图一是变换前，图二是Y轴放大1.5倍，绕Z轴旋转45度，沿X轴平移0.2组合变换后的效果
2.知识点梳理
2.1组合变换原理
我们已经了解了通过矩阵可以实现图形的平移、旋转和缩放的变换，今天我们了解一下组合变换，有了之前的基础学习组合变换就会容易的多，其实很简单就是把矩阵相乘。例如：
先平移再旋转=平移矩阵*旋转矩阵
先平移再缩放=平移矩阵*缩放矩阵
先平移再缩放在旋转=平移矩阵*缩放矩阵*旋转矩阵
2.2组合变换实现要点
2.2.1顶点着色器声明uniform变量u_ModelMatrix
//顶点着色器
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';
2.2.2声明模型矩阵Matrix4对象及其属性方法介绍
为了方便使用平移、旋转和缩放矩阵组合，我们将它们整合到一个对象（类）上，它有一个私有属性和有三个方法：
currentMatrix 属性用来存放当前矩阵
translate(x, y, z) 方法根据参数生成平移矩阵，并与原矩阵相乘得到在原矩阵的基础上平移后的矩阵
rotate(rad, x, y, z) 方法根据参数生成旋转矩阵，并与原矩阵相乘得到在原矩阵的基础上旋转后的矩阵
scale(xScale, yScale, zScale) 方法用来根据参数生成缩放矩阵，并与原矩阵相乘得到在原矩阵的基础上缩放后的矩阵
//初始化模型矩阵
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;
}
2.2.3模型矩阵组合变换及传值给着色器
//获取顶点着色器uniform变量u_ModelMatrix(缩放矩阵)的存储地址
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
//初始化模型矩阵
var modelMatrix = new Matrix4()
//定义要旋转的角度
var ANGLE = 45.0
var rad = Math.PI * ANGLE / 180.0 //将角度转换为弧度
modelMatrix.scale(1.0, 1.5, 1.0) //Y轴放大1.5倍
modelMatrix.rotate(rad, 0.0, 0.0, 1.0) //绕Z轴旋转45度
modelMatrix.translate(0.2, 0.0, 0.0) //沿X轴平移0.2个单位
//向顶点着色器uniform变量u_ModelMatrix传值
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.currentMatrix)
3.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 ANGLE = 45.0
var rad = Math.PI * ANGLE / 180.0 //将角度转换为弧度
modelMatrix.scale(1.0, 1.5, 1.0) //Y轴放大1.5倍
modelMatrix.rotate(rad, 0.0, 0.0, 1.0) //绕Z轴旋转45度
modelMatrix.translate(0.2, 0.0, 0.0) //沿X轴平移0.2个单位
//向顶点着色器uniform变量u_ModelMatrix传值
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.currentMatrix)
//绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, n)
}
//给片元着色器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
暂无评论内容