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倍

相关推荐
_Coin_-18 分钟前
代码训练营DAY53 第十一章:图论part04
算法·图论
এ᭄画画的北北31 分钟前
力扣-208.实现Trie(前缀树)
算法·leetcode
草莓熊Lotso39 分钟前
【数据结构初阶】--排序(四):归并排序
c语言·数据结构·经验分享·其他·算法·排序算法
从零开始学习人工智能2 小时前
从Token到序列:阿里GSPO算法如何让大模型训练更稳、更强?
人工智能·算法·机器学习
好易学·数据结构5 小时前
可视化图解算法57:字符串的排列
数据结构·算法·leetcode·面试·笔试·回溯算法·牛客
Charles Wesley7 小时前
11:java学习笔记:1D array(1维数组)
java·笔记·学习·eclipse
এ᭄画画的北北7 小时前
力扣-283.移动零
算法·leetcode
2501_9248793610 小时前
口罩识别场景误报率↓79%:陌讯多模态融合算法实战解析
人工智能·深度学习·算法·目标检测·智慧城市
Christo310 小时前
TFS-2022《A Novel Data-Driven Approach to Autonomous Fuzzy Clustering》
人工智能·算法·机器学习·支持向量机·tfs
木木子999911 小时前
超平面(Hyperplane)是什么?
算法·机器学习·支持向量机·超平面·hyperplane