图形平移、缩放、旋转是计算机图形学中常用的操作,用来改变图像的位置、大小和方向。
这些操作常常用于计算机图形学、图像处理等领域中的图像变换。图形平移、缩放、旋转是计算机图形学中常用的操作,用来改变图像的位置、大小和方向。
矩阵是一个数学对象,由一组数排成的矩形排列组成。它可看作向量的扩展。通常表示为一个大写字母,如A、B等,其中每一个元素都用小写字母表示。一个矩阵包含了一定数量的行和列,并且每个元素都可以在矩阵中通过其行号和列号来确定其位置。
一般地,一个m×n矩阵A的元素可以表示为a[i,j],其中i表示该元素所在的行数,j表示该元素所在的列数。例如,对于一个3×3的矩阵A,其元素可以表示为:
A = [ a[1,1] a[1,2] a[1,3] ]
[ a[2,1] a[2,2] a[2,3] ]
[ a[3,1] a[3,2] a[3,3] ]
矩阵广泛应用于线性代数、图论、概率论等许多数学分支领域,以及计算机科学、物理、经济学、工程学等其他学科中。
矩阵就是纵横排列的数据表格(m行n列),作用是把一个点转换到另一个点。
矩阵的行主序和列主序都是指存储顺序。
行主序指矩阵元素按行依次存储的方式,即先存储第一行的元素,再存储第二行的元素,以此类推,直到最后一行的元素。在计算机中,矩阵的行主序存储方式是一般的存储方式。
列主序指矩阵元素按列依次存储的方式,即先存储第一列的元素,再存储第二列的元素,以此类推,直到最后一列的元素。在计算机中,矩阵的列主序存储方式也常用于某些特定的应用场景,例如矩阵乘法算法的优化。
1、ax + by + cz + d = x + x1: 只有当 a = 1,b = c = 0, d = x1 的时候,等式左右两边成⽴
2、ex + fy + gz + h = y + y1: 只有当 f = 1, e = g = 0, h = y1 的时候,等式左右两边成⽴
3、ix + jy + kz + l = z + z1: 只有当 k = 1,i = j = 0, l = z1 的时候,等式左右两边成⽴
4、mx + ny + oz + p = 1: 只有当 m = n = o = 0, p = 1 的时候,等式左右两边成⽴
uniformMatrix4fv是WebGL的一个函数,用于将四维矩阵数据传输到着色器中的uniform变量中。具体用法如下:
uniformMatrix4fv(location, transpose, value);
其中,location是指uniform变量的存储位置,transpose是一个布尔值,表示是否要对矩阵进行转置操作,value是一个Float32Array类型的数组,表示要传输的矩阵数据。
例如,以下代码将一个4×4的单位矩阵传输到名为uModelViewMatrix的uniform变量中:
var modelViewMatrix = mat4.create(); // 创建一个4x4的单位矩阵
gl.uniformMatrix4fv(uModelViewMatrixLoc, false, modelViewMatrix);
在着色器中,我们可以这样定义名为uModelViewMatrix的uniform变量:
uniform mat4 uModelViewMatrix;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
canvas{
margin: 50px auto 0;
display: block;
background: yellow;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
// 平移矩阵
function getTranslateMatrix(x = 0,y = 0,z = 0) {
return 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,
])
}
const ctx = document.getElementById('canvas')
const gl = ctx.getContext('webgl')
// 创建着色器源码
const VERTEX_SHADER_SOURCE = `
attribute vec4 aPosition;
uniform mat4 mat;
void main() {
gl_Position = mat * aPosition;
gl_PointSize = 10.0;
}
`; // 顶点着色器
const FRAGMENT_SHADER_SOURCE = `
void main() {
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`; // 片元着色器
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
const aPosition = gl.getAttribLocation(program, 'aPosition');
const mat = gl.getUniformLocation(program, 'mat');
const points = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5,
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition)
let x = -1;
function animation() {
x += 0.01;
if (x > 1) {
x = -1;
}
const matrix = getTranslateMatrix(x, x);
// gl.vertexAttrib1f(aTranslate, x);
gl.uniformMatrix4fv(mat, false, matrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animation);
}
animation()
</script>
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有