glsl着色器学习（十）缩放

superTiger_y2024-09-05 22:47

对二维图形进行缩放，需要用到顶点着色器，顶点着色器经过矩阵变换，会将模型空间最终转换成裁剪空间。下面就来操作矩阵

这里需要用到一个库glMatrix。

首先修改顶点着色器

javascript 复制代码

<script id="vertex-shader-2d" type="x-shader/x-vertex">
      attribute vec4 a_position;
      uniform mat4 u_matrix;

      void main() {

         gl_Position = u_matrix * a_position;
      }
</script>

定义了一个统一变量4x4矩阵，用来接收应用程序传递过来的矩阵数据

获取变量在着色器程序中的位置

javascript 复制代码

 const matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');

设置矩阵

javascript 复制代码

// 引入mat4
import { mat4 } from './glmatrix/esm/index.js';

const scaleMatrix = mat4.create();
// 缩放矩阵[1,1,1]分别对应X,Y,Z三个分量
mat4.fromScaling(scaleMatrix, [1, 1, 1]);

gl.uniformMatrix4fv(matrixUniformLocation, false, scaleMatrix);

不出意外的话，没啥变化，因为设置的矩阵是 $1,1,1$ ，将 $1,1,1$ 改成 $2,1,1$ ，会发现图像X轴方向放大了2倍