WebGl 缩放矩阵

小白菜学前端2024-10-26 16:54

缩放矩阵是线性代数中的一种矩阵，用于描述图形在空间中沿着各个坐标轴进行均匀缩放的变换。在3D图形编程中，缩放矩阵通常用于调整物体的大小，而不改变其形状。

javascript 复制代码

| x  0  0  0 |
| 0  y  0  0 |
| 0  0  z  0 |
| 0  0  0  1 |

其中，(x, y, z)是缩放向量，表示沿着x、y、z轴的缩放比例。如果x、y、z都等于1，则矩阵表示不进行缩放；如果小于1，则表示缩小；如果大于1，则表示放大。

1. 使用缩放矩阵流程

在WebGL中实现缩放，需要创建一个缩放矩阵，并将其传递给顶点着色器。
顶点着色器中的顶点位置变量（aPosition）会与缩放矩阵相乘，从而实现缩放变换。
这个过程通常涉及到使用uniformMatrix4fv函数来设置着色器中的统一矩阵变量，该函数允许传递一个4x4的浮点矩阵到着色器程序。

2. 示例代码

以下是一个简单的WebGL示例，展示了如何创建一个缩放矩阵并将其应用到顶点着色器中：

javascript 复制代码

// 假设已经有了WebGL上下文gl和已初始化的着色器程序program

// 1.创建顶点着色器
const vertexShaderSource = `
    attribute vec4 aPosition;
    uniform mat4 mat;
    void main() {
        gl_Position = mat * aPosition;
        gl_PointSize = 10.0;
    }`

// 2.创建缩放矩阵
function getScaleMatrix(x = 1, y = 1, z = 1) {
    return new Float32Array([
        x, 0.0, 0.0, 0.0,
        0.0, y, 0.0, 0.0,
        0.0, 0.0, z, 0.0,
        0.0, 0.0, 0.0, 1,
    ])
}

// 3.获取顶点着色器中的uniform矩阵变量的位置
const mat = gl.getUniformLocation(program, 'mat');

// 4.缩放矩阵赋值
const matrix = getScaleMatrix(x);

// 5.将缩放矩阵传递给着色器
gl.uniformMatrix4fv(mat, false, matrix);

// 继续其他渲染流程...

WebGl 缩放矩阵

1. 使用缩放矩阵流程

2. 示例代码

3.效果如下