首页 > 其他分享 >WebGL着色器GLSL矩阵mat

WebGL着色器GLSL矩阵mat

时间:2023-03-11 22:58:40浏览次数:37  
标签:GLSL mat4 0.0 WebGL 矩阵 vec4 3.2 matrix4 着色器

WebGL着色器GLSL矩阵mat
本文是WebGL教程(电子书)的2.5节内容

着色器语言中通过关键字mat2、mat3、mat4分别声明一个2x2矩阵、3x3矩阵、4x4矩阵,通过内置函数mat2()、mat3()、mat4()分别创建一个2x2矩阵、3x3矩阵、4x4矩阵。

关键字 数据类型
mat2 2x2矩阵,4个元素
mat3 3x3矩阵,9个元素
mat4 4x4矩阵,16个元素
声明变量
关键子mat4声明一个4x4矩阵

mat4 matrix4;
1
构造函数赋值
矩阵类型数据需要通过相应的构造函数创建,下面代码mat4()构造函数创建一个4x4矩阵赋值给matrix4变量。

注意行列对应关系,按照列的先后顺序,从上到下依次传入mat构造函数参数中。

// 需要表示的矩阵
// 1.1 1.2 1.3 1.4
// 2.1 2.2 2.3 2.4
// 3.1 3.2 3.3 3.4
// 4.1 4.2 4.3 4.4
mat4 matrix4 = mat4(
1.1,2.1,3.1,4.1,
1.2,2.2,3.2,4.2,
1.3,2.3,3.3,4.3,
1.4,2.4,3.4,4.4
);
1
2
3
4
5
6
7
8
9
10
11
快速创建对角矩阵
创建普通的矩阵,需要传入多个元素,比如mat2需要传入4个参数,mat4需要传入16个参数,如果是对角矩阵,可以直接传入一个参数就可以。

可以通过mat4(2.0)写法快速创建一个4x4对角矩阵

// 2.0 0.0 0.0 0.0
// 0.0 2.0 0.0 0.0
// 0.0 0.0 2.0 0.0
// 0.0 0.0 0.0 2.0
mat4 matrix = mat4(2.0)
1
2
3
4
5
访问矩阵元素([]运算符)
mat4 matrix4 = mat4(
1.1,2.1,3.1,4.1,
1.2,2.2,3.2,4.2,
1.3,2.3,3.3,4.3,
1.4,2.4,3.4,4.4
);
// 访问矩阵matrix4的第二列
vec4 v4 = matrix4[1];//返回值vec4(1.2,2.2,3.2,4.2)
// 访问矩阵matrix4的第三列第四行对应的元素
float f = matrix4[2][3];//返回4.3
1
2
3
4
5
6
7
8
9
10
数学运算(矩阵和浮点数)
矩阵乘一个系数,相当矩阵的每个元素都乘以该系数,加法、减法、除法同样逐元素操作。

mat4 matrix4 = mat4(1.1,2.1,3.1...);
mat4 m2 = matrix4*10;//结果是mat4(11.0,21.0,31.0...)
1
2
数学运算(矩阵乘向量)
mat4*vec4:矩阵mat4左乘向量vec4,矩阵和向量的乘法运算规则,参考线性代数中矩阵和列向量的乘法运算。

//声明一个四维向量pos,xyz的坐标是0.8,3.2,6.8,假设表示一个顶点位置坐标
vec4 pos = vec4(0.0,3.2,6.8,1.0);
//创建平移矩阵(表示沿x轴平移-0.4)
//1 0 0 -0.4
//0 1 0 0
//0 0 1 0
//0 0 0 1
mat4 m4 = mat4(1,0,0,0, 0,1,0,0, 0,0,1,0, -0.4,0,0,1);
//平移矩阵m4左乘顶点坐标pos(vec4类型数据可以理解为线性代数中的nx1矩阵,即列向量)
// 顶点位置坐标pos进行平移变换
vec4 newPos= m4*pos;//平移后结果:newPos = vec4(-0.4,3.2,6.8,1.0)
1
2
3
4
5
6
7
8
9
10
11
数学运算(矩阵乘矩阵)
mx*my:表示矩阵mx左乘矩阵my,着色器中矩阵之间乘法运算规则和线性代数中规则一致。

假设mx、my都是旋转矩阵,下面代码表示旋转矩阵mx和旋转矩阵my的乘积,然后对顶点进行变换,相当顶点旋转执行mx和my两次旋转。

// 顶点齐次坐标pos
vec4 pos = vec4(0.0,3.2,6.8,1.0);
float radian = radians(30.0);//角度转弧度
float cos = cos(radian);//求解旋转角度余弦值
float sin = sin(radian);//求解旋转角度正弦值
//旋转矩阵mx,创建绕x轴旋转矩阵
mat4 mx = mat4(1,0,0,0, 0,cos,-sin,0, 0,sin,cos,0, 0,0,0,1);
//旋转矩阵my,创建绕y轴旋转矩阵
mat4 my = mat4(cos,0,-sin,0, 0,1,0,0, sin,0,cos,0, 0,0,0,1);
//两个旋转矩阵、顶点齐次坐标连乘
vec4 newPos = mx*my*pos;
————————————————
原文链接:https://blog.csdn.net/u014291990/article/details/103096233

 

标签:GLSL,mat4,0.0,WebGL,矩阵,vec4,3.2,matrix4,着色器
From: https://www.cnblogs.com/im18620660608/p/17207261.html

相关文章

  • GLSL shder的简单示例
    GLSL的HelloWorld这一节中包含一个最基本的shader,它提供如下功能:顶点变换然后使用单一的颜色渲染图元。顶点shader前面已经说过,顶点shader负责完成顶点变换。这里将按......
  • GLSL语法简单总结
    1、变量类型基础类型:bool,int,uint,float,double向量类型:vecN,bvecN,ivecN,uvecN,dvecNN表示向量维数(N=1,2,3,4)。含前缀b为bool向量,i为int向量,u为uint向量,d为double向量,不含......
  • 如何使用webgl(three.js)实现3D消防、3D建筑消防大楼、消防数字孪生、消防可视化解决
    序:又是很久没出随笔文章了,一篇文章有时候整理一天,实在是抽不出来时间。最近在回顾几年前的项目时,发现这个智慧三维消防可视化项目很有回顾价值,索性就拿出来讲讲......
  • 搭建良好编写体验的webgl编程环境 vscode+vit
    因为webgl代码是以字符串的形式嵌入在javascript代码中,这对于我们编写webgl代码的体验不友好,本文介绍如何搭建友好webgl编程环境:需要安装的vscode插件WebGLGLSLEdito......
  • Shader 入门:GLSL ES(数据类型)
    在上一篇文章中我们初步了解了GLSLES的基本语法,那么本篇文章就和大家一起学习GLSLES的数据类型。Let’sgo!!!上一篇:《Shader入门:GLSLES(简介和基本语法)》在本系......
  • openGL之glsl入门1--基本概念
    从零开始学习openGL与GLSL(没有计算机图像学基础),开始确实挺费劲,网上的资料虽然多,但不系统,例子也不全,openGL还好(这里指的是v2.0之前的版本,使用glBegin(),glEnd()方式绘制),完......
  • GLSL三种基本类型(着色器语言三种变量)
     着色器语言和C语言一样,通过一个表示特定数据类型的关键词声明一个变量,比如intnum;通过int关键字声明一个整数型变量num,不过着色器语言还提供了三个关键字attribute、un......
  • GLSL 详解(基础篇)
    上节在绘制三角形的时候,简单讲解了一些着色器,GLSL的相关概念,可能看的云里雾里的。不要担心,在本节中,我将详细讲解着色语言GLShaderLanguage(GLSL)的一些基本的概念。PS:......
  • webgl 系列 —— 变换矩阵和动画
    其他章节请看:webgl系列变换矩阵和动画动画就是不停地将某个东西变换(transform)。例如将三角形不停地旋转就是一个动画和CSStransform类似,变换有三种形式:平移、缩......
  • 2023 最新 WebGL 快速入门教程 All In One
    2023最新WebGL快速入门教程AllInOneOpenGLES:OpenGLforWebhttps://www.khronos.org/webgl/WebGL1.0SpecificationEditor'sDraftWedNov206:33:45......