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倍

相关推荐
人生在勤,不索何获-白大侠3 分钟前
day15——Java常用API(二):常见算法、正则表达式与异常处理详解
java·算法·正则表达式
The_cute_cat16 分钟前
JavaScript的初步学习
开发语言·javascript·学习
Wo3Shi4七37 分钟前
双向队列
数据结构·算法·go
Wo3Shi4七41 分钟前
列表
数据结构·算法·go
Wo3Shi4七1 小时前
链表
数据结构·算法·go
Wo3Shi4七1 小时前
数组
数据结构·算法·go
CoovallyAIHub1 小时前
YOLOv13都来了,目标检测还卷得动吗?别急,还有这些新方向!
深度学习·算法·计算机视觉
Binary_ey2 小时前
超表面重构卡塞格林望远镜 | 从传统架构到新型光学系统
学习·软件需求·光学软件·超表面
转转技术团队2 小时前
边学边做:图片识别技术的学习与应用
后端·算法
一块plus2 小时前
2025 年值得一玩的最佳 Web3 游戏
算法·设计模式·程序员