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倍

相关推荐
幽络源小助理7 分钟前
如何从零开始学习黑客技术?网络安全入门指南
网络·学习·web安全
熙xi.22 分钟前
数据结构 -- 哈希表和内核链表
数据结构·算法·散列表
Ghost-Face34 分钟前
并查集提高——种类并查集(反集)
算法
董董灿是个攻城狮1 小时前
5分钟搞懂大模型微调的原始能力退化问题
算法
2006yu2 小时前
从零开始学习单片机12
学习
★YUI★3 小时前
学习游戏制作记录(保存装备物品技能树和删除存档文件)8.26
学习·游戏·unity·c#
神齐的小马4 小时前
计算机网络学习笔记
笔记·学习·计算机网络
小郝 小郝4 小时前
【51单片机】萌新持续学习中《矩阵 密码锁 点阵屏》
嵌入式硬件·学习·51单片机
胡萝卜3.04 小时前
数据结构初阶:详解单链表(一)
数据结构·笔记·学习·单链表
艾醒5 小时前
大模型面试题剖析:大模型微调与训练硬件成本计算
人工智能·后端·算法