glsl着色器学习(十)缩放

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

这里需要用到一个库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倍

相关推荐
递归不收敛43 分钟前
吴恩达机器学习课程(PyTorch适配)学习笔记:2.4 激活函数与多类别处理
pytorch·学习·机器学习
加油20191 小时前
如何快速学习一个网络协议?
网络·网络协议·学习·方法论
Univin1 小时前
C++(10.5)
开发语言·c++·算法
A9better1 小时前
嵌入式开发学习日志36——stm32之USART串口通信前述
stm32·单片机·嵌入式硬件·学习
Asmalin2 小时前
【代码随想录day 35】 力扣 01背包问题 一维
算法·leetcode·职场和发展
不太可爱的叶某人2 小时前
【学习笔记】kafka权威指南——第6章 可靠的数据传递
笔记·学习·kafka
剪一朵云爱着2 小时前
力扣2779. 数组的最大美丽值
算法·leetcode·排序算法
qq_428639612 小时前
虚幻基础:组件间的联动方式
c++·算法·虚幻
深瞳智检2 小时前
YOLO算法原理详解系列 第002期-YOLOv2 算法原理详解
人工智能·算法·yolo·目标检测·计算机视觉·目标跟踪
怎么没有名字注册了啊3 小时前
C++后台进程
java·c++·算法