WebGL笔记：矩阵旋转运算的原理和实现

矩阵

  • 矩阵（Matrix）是一个按照矩形纵横排列的复数集合
    • 矩阵就像一个矩形的阵盘，通过其中纵横排列的元素
    • 我们可以摆出不同功能的阵法，比如位移矩阵、旋转矩阵、缩放矩阵 …
    • 在矩阵中的每一行，或者每一列数字构成的集合，可以视之为向量


  • 关于复数 z = a + bi
    • 实数: b = 0
      • 有理数: 整数和分数
      • 无理数: eg: 圆周率 π， sqrt(2)
    • 虚数: b != 0

向量

  • 向量，又叫矢量，它是一个用于表示方向和量的对象
  • 在webgl 里的向量有1维向量、2维向量、3维向量和4维向量
    • 1维向量中有1个数字，对应的是单轴坐标系里的点位
    • 2维向量中有2个数字，对应的是2维坐标系里的点位
    • 3维向量中有3个数字，对应的是3维坐标系里的点位
    • 4维向量中有4个数字，对应的是3维坐标系里的点位，外加一个附加数据，至于这个数据是什么，要看我们的项目需求

矩阵和向量的乘法

  • 矩阵和向量的乘法图


  • 矩阵乘以向量时，向量是几维的，那矩阵中就应该有几个向量
  • 如上图向量v 是2维的，那么矩阵中就有2组向量，这两组向量可以是横着的两组向量，也可以是竖着的两组向量
    • 横着的两组向量是：向量(a,b)、向量(e,f)
    • 竖着的两组向量是：向量(a,e)、向量(b,f)
    • 横着的两组遵循的规则是行主序，即将矩阵中的一行数据视之为一个向量
    • 竖着的两组遵循的规则是列主序，即将矩阵中的一列数据视之为一个向量
  • 我们是使用行主序，还是列主序，这就得看规则的定制者
  • 在webgl 里，矩阵元素的排列规则是列主序
  • 数学中常用的写法是行主序，所以我们接下来就用行主序例子
    • 矩阵和向量相乘的规则就是让矩阵中的每个向量和向量v相乘。
    • 向量和向量相乘，就是在求向量的点积，其结果是一个实数，而不再是向量
    • 比如上图中，向量(a,b)乘以向量v(x,y)的结果是：
      a * x + b * y
  • 因为a、b、x、y都是实数，所以其结果也是实数
  • 上图中，矩阵m乘以向量v 会得到两个结果，即ax+by和ex+fy
  • 这两个结果会构成一个新的向量v’(x’,y’)
    x' = a * x + b * y
y' = e * x + f * y
  • 这时我们可以将其和数学里的旋转公式做一下比较
  • 点A(ax,ay)围绕z轴旋β度,其旋转后的位置是点B(bx,by)，则：
    bx = cosβ * ax - sinβ * ay
by = sinβ * ax + cosβ * ay
  • 对比上面的两组公式，试想一下
  • 向量v是可以当成一个点位
  • 那我现在就让向量v代表的位置，就是点A的位置。
  • 那么矩阵m乘以向量v，是不是可以让向量v代表的这个点位旋转β度呢？
  • 如果可以，那么矩阵里的元素应该满足什么条件呢？
  • 满足以下条件即可
    a = cosβ
b = -sinβ
e = sinβ
f = cosβ
  • 这样，用矩阵乘以向量的方法得到的旋转结果和用数学公式得到的结果就是一样的，即;
    a * x + b * y = cosβ * ax - sinβ * ay
e * x + f * y = sinβ  *ax + cosβ * ay


  • 最终我们就可以用矩阵乘以向量的方式让点p旋转β度
  • 也就是说，可以用矩阵乘以向量的方式求向量OA旋转了 β \beta β° 的位置


### 在着色器中书写矩阵

1 ） 核心代码

  • 在着色器中建立矩阵对象
    • mat2 是二维矩阵对象
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;float angle = radians(40.0);float sinB = sin(angle);float cosB = cos(angle);mat2 m2 = mat2(cosB, sinB,-sinB, cosB);void main() {gl_Position = vec4(m2 * vec2(a_Position),a_Position.z, a_Position.w);}
</script>

2 ）完整代码

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;float angle = radians(40.0);float cosB = cos(angle);float sinB = sin(angle);// 列主序mat2 m2 = mat2(cosB, sinB,-sinB, cosB);void main() {gl_Position = vec4(m2 * vec2(a_Position),a_Position.z, a_Position.w);}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">void main() {gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);}
</script>
<script type="module">import { initShaders } from './utils.js';const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const gl = canvas.getContext('webgl');const vsSource = document.getElementById('vertexShader').innerText;const fsSource = document.getElementById('fragmentShader').innerText;initShaders(gl, vsSource, fsSource);const vertices = new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1])const vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

用js建立矩阵对象并传递给着色器

1 ）核心代码

  • 在顶点着色器中建立uniform变量

    <script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;uniform mat2 u_Matrix;void main() {gl_Position = vec4(u_Matrix * vec2(a_Position),a_Position.z, a_Position.w);}
</script>

  • 获取并修改uniform 变量

    const u_Matrix = gl.getUniformLocation(gl.program, 'u_Matrix');
let angle = 0.2;
const [sinB, cosB] = [Math.sin(angle), Math.cos(angle)];
const matrix = [cosB, sinB,-sinB, cosB
];
gl.uniformMatrix2fv(u_Matrix, false, matrix);

  • 后面我们也可以在其中添加动画

    const u_Matrix = gl.getUniformLocation(gl.program, 'u_Matrix');
let angle = 0.2;
!(function animate() {angle += 0.02;const [sinB, cosB] = [Math.sin(angle), Math.cos(angle)];const matrix = [cosB, sinB,-sinB, cosB];gl.uniformMatrix2fv(u_Matrix, false, matrix);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate)
})()

2 ）完整代码

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;// 列主序uniform mat2 u_Matrix;void main() {gl_Position = vec4(u_Matrix * vec2(a_Position),a_Position.z,a_Position.w);}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">void main() {gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);}
</script><script type="module">import { initShaders } from './utils.js';const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const gl = canvas.getContext('webgl');const vsSource = document.getElementById('vertexShader').innerText;const fsSource = document.getElementById('fragmentShader').innerText;initShaders(gl, vsSource, fsSource);const vertices = new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1]);const vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);const u_Matrix = gl.getUniformLocation(gl.program, 'u_Matrix');let angle = 0.5;const sinB = Math.sin(angle);const cosB = Math.cos(angle);const matrix = [cosB, sinB,-sinB, cosB];gl.uniformMatrix2fv(u_Matrix, false, matrix);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);!(function animate() {angle += 0.05;const sinB = Math.sin(angle);const cosB = Math.cos(angle);const matrix = [cosB, sinB,-sinB, cosB];gl.uniformMatrix2fv(u_Matrix, false, matrix);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
</script>
  • 以上是最简单的二维矩阵，我们也可以给顶点着色器一个四维矩阵

四维矩阵在着色器里的处理

  • 应用原理和二维矩阵是一样的

1 ）核心代码

<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;float angle = radians(10.0);float cosB = cos(angle);float sinB = sin(angle);mat4 m4 = mat4(cosB, sinB, 0.0, 0.0,-sinB, cosB, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.0, 0.0, 0.0, 1.0);void main() {gl_Position = m4 * a_Position;}
</script>

2 ）完整代码

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;float angle = radians(10.0);float cosB = cos(angle);float sinB = sin(angle);// 列主序mat4 m4 = mat4(cosB, sinB, 0.0, 0.0,-sinB, cosB, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.0, 0.0, 0.0, 1.0);void main() {gl_Position = m4 * a_Position;}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">void main() {gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);}
</script>
<script type="module">import { initShaders } from './utils.js';const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const gl = canvas.getContext('webgl');const vsSource = document.getElementById('vertexShader').innerText;const fsSource = document.getElementById('fragmentShader').innerText;initShaders(gl, vsSource, fsSource);const vertices = new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1])const vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

用js向顶点着色器传递四维矩阵

1 ）核心代码

const u_Matrix = gl.getUniformLocation(gl.program, 'u_Matrix');
let angle = 0.1;
const [sinB, cosB] = [Math.sin(angle), Math.cos(angle)];
const matrix = [cosB, sinB, 0.0, 0.0,-sinB, cosB, 0.0, 0.0,0.0, 0.0, 1.0, 0.0,0.0, 0.0, 0.0, 1.0
];
gl.uniformMatrix4fv(u_Matrix, false, matrix);

2 ）完整代码

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;// 列主序uniform mat4 u_Matrix;void main() {gl_Position = u_Matrix * a_Position;}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">void main() {gl_FragColor = vec4(1.0,1.0,0.0,1.0);}
</script>
<script type="module">import { initShaders } from './utils.js';const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const gl = canvas.getContext('webgl');const vsSource = document.getElementById('vertexShader').innerText;const fsSource = document.getElementById('fragmentShader').innerText;initShaders(gl, vsSource, fsSource);const vertices = new Float32Array([0.0, 0.1,-0.1, -0.1,0.1, -0.1]);const vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);const u_Matrix = gl.getUniformLocation(gl.program, 'u_Matrix');let angle = 0.5;const sinB = Math.sin(angle);const cosB = Math.cos(angle);const matrix = [cosB, sinB, 0, 0,-sinB, cosB, 0, 0,0, 0, 1, 0,0, 0, 0, 1];gl.uniformMatrix4fv(u_Matrix, false, matrix);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);!(function animate() {angle += 0.05;const sinB = Math.sin(angle);const cosB = Math.cos(angle);const matrix = [cosB, sinB, 0, 0,-sinB, cosB, 0, 0,0, 0, 1, 0,0, 0, 0, 1];gl.uniformMatrix4fv(u_Matrix, false, matrix);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/192856.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

每日一练2023.12.2——正整数A+B【PTA】

每日一练2023.12.2——正整数A+B【PTA】

题目链接&#xff1a;L1-025 正整数AB 题目要求&#xff1a; 题的目标很简单&#xff0c;就是求两个正整数A和B的和&#xff0c;其中A和B都在区间[1,1000]。稍微有点麻烦的是&#xff0c;输入并不保证是两个正整数。 输入格式&#xff1a; 输入在一行给出A和B&#xff0c;…
阅读更多...
Python面向对象①类与特殊方法【侯小啾python领航班系列（十九）】

Python面向对象①类与特殊方法【侯小啾python领航班系列（十九）】

Python面向对象①类与特殊方法【侯小啾python领航班系列（十九）】 大家好，我是博主侯小啾， 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…
阅读更多...
Pikachu（三）

Pikachu（三）

RCE(remote command/code execute)概述 RCE漏洞&#xff0c;可以让攻击者直接向后台服务器远程注入操作系统命令或者代码&#xff0c;从而控制后台系统。 远程系统命令执行 一般出现这种漏洞&#xff0c;是因为应用系统从设计上需要给用户提供指定的远程命令操作的接口 比如我…
阅读更多...
flink源码分析之功能组件(四)-slot管理组件I

flink源码分析之功能组件(四)-slot管理组件I

简介 本系列是flink源码分析的第二个系列&#xff0c;上一个《flink源码分析之集群与资源》分析集群与资源&#xff0c;本系列分析功能组件&#xff0c;kubeclient&#xff0c;rpc&#xff0c;心跳&#xff0c;高可用&#xff0c;slotpool&#xff0c;rest&#xff0c;metrics&…
阅读更多...
docker+jmeter+influxdb+granfana

docker+jmeter+influxdb+granfana

centos7国内阿里源安装docker 1、安装必要的系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2添加官方仓库 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.reposudo sed -i sdownload.doc…
阅读更多...
Knowledge Review（CVPR 2021）论文解析

Knowledge Review（CVPR 2021）论文解析

paper&#xff1a;Distilling Knowledge via Knowledge Review official implementation&#xff1a;https://github.com/dvlab-research/ReviewKD 前言 识蒸馏将知识从教师网络转移到学生网络&#xff0c;可以提高学生网络的性能&#xff0c;作为一种“模型压缩”的方法被…
阅读更多...
np.array无法直接用matplotlib画图，因为需要借用np.squeeze先转化

np.array无法直接用matplotlib画图，因为需要借用np.squeeze先转化

文章目录 前言一、使用步骤1.没使用np.squeeze转化2.使用np.squeeze转化 前言 实际工作中&#xff0c;时而难免会遇见np.array无法直接用matplotlib画图的情况&#xff0c;这个时候&#xff0c;是因为在画图之前少了一个步骤&#xff0c;需要先借用np.squeeze先转化 一、使用步…
阅读更多...
如何学习 Spring ？学习 Spring 前要学习什么？

如何学习 Spring ？学习 Spring 前要学习什么？

整理了一下Spring的核心概念BeanDefinitionBeanDefinition表示Bean定义&#xff0c;BeanDefinition中存在很多属性用来描述一个Bean的特点。比如&#xff1a;class&#xff0c;表示Bean类型scope&#xff0c;表示Bean作用域&#xff0c;单例或原型等lazyInit&#xff1a;表示Be…
阅读更多...
Matlab 在一个文件中调用另一个文件中的函数

Matlab 在一个文件中调用另一个文件中的函数

文章目录 Part.I IntroductionPart.II 方法Chap.I A 文件中只有一个函数Chap.II A 文件中有多个函数 Part.I Introduction 本文介绍一下在脚本文件 B 中调用文件 A 中的函数的方法。 Part.II 方法 目的&#xff1a;在文件B.m调用A.m中的函数 默认两个文件在一个文件夹下&…
阅读更多...
力扣611题 有效三角形的个数 双指针算法

力扣611题 有效三角形的个数 双指针算法

611. 有效三角形的个数 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 1: 输⼊: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使⽤第⼀个 2) 2,3,4 (使⽤第⼆个 2) 2,2,3 ⽰例 2: 输⼊: nums [4,2,3,4] 输出: 4 解…
阅读更多...
我的wechat

我的wechat

阅读更多...
CAP概念和三种情况、Redis和分布式事务的权衡

CAP概念和三种情况、Redis和分布式事务的权衡

借鉴&#xff1a;https://cloud.tencent.com/developer/article/1840206 https://www.cnblogs.com/huanghuanghui/p/9592016.html 一&#xff1a;CAP概念和三种情况 1.概念&#xff1a; C全称Consistency&#xff08;一致性&#xff09;&#xff1a;这个表示所有节点返回的数…
阅读更多...
轻易云AI：引领企业数智化转型提升企业AI效率

轻易云AI：引领企业数智化转型提升企业AI效率

近期&#xff0c;轻易云AI与汤臣倍健的合作引起了业界的广泛关注。通过这一合作&#xff0c;轻易云AI不仅成功打造了集团小汤AI助手这一标志性的企业智能助手&#xff0c;更重要的是&#xff0c;这一合作凸显了轻易云AI作为专业AI应用集成专家的核心能力。轻易云AI已成功集成了…
阅读更多...
Spring之RestTemplate详解

Spring之RestTemplate详解

Spring之RestTemplate详解 1 RestTemplate1.1 引言1.2 环境配置1.2.1 非Spring环境下使用RestTemplate1.2.2 Spring环境下使用 RestTemplate1.2.3 Spring环境下增加线程号 1.3 API 实践1.3.1 GET请求1.3.1.1 不带参请求1.3.1.2 带参的get请求(使用占位符号传参)1.3.1.3 带参的g…
阅读更多...
Redis7--基础篇4（Redis事务）

Redis7--基础篇4（Redis事务）

Redis事务是什么 可以一次执行多个命令&#xff0c;本质是一组命令的集合&#xff0c;一个事务中的所有命令都会序列化&#xff0c;按顺序串行&#xff0c;而不会被其他命令插入。 其作用就是在一个队列中&#xff0c;一次性、顺序、排他的执行一系列命令。 Redis事务 VS 数据…
阅读更多...
【每日一题】拼车+【差分数组】

【每日一题】拼车+【差分数组】

文章目录 Tag题目来源解题思路方法一&#xff1a;差分 写在最后 Tag 【差分数组】【数组】【2023-12-02】 题目来源 1094. 拼车 解题思路 本题朴素的解题思路是统计题目中提到的每一个站点的车上人数&#xff0c;如果某个站点的车上人数大于车上的座位数直接返回 false&…
阅读更多...
基于 Vue、Datav、Echart 框架的 “ 数据大屏项目 “，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换

基于 Vue、Datav、Echart 框架的 “ 数据大屏项目 “，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换

最近在研究大数据分析&#xff0c;基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "&#xff0c;通过 Vue 组件实现数据动态刷新渲染&#xff0c;内部图表可实现自由替换。部分图表使用 DataV 自带组件&#xff0c;可进行更改&#xff0c;详情请点击下方 DataV 文档…
阅读更多...
abapgit 安装及使用

abapgit 安装及使用

abapgit 需求 SA[ BASIS 版本 702 及以上 版本查看路径如下&#xff1a; 安装步骤如下&#xff1a; 1. 下载abapgit 独立版本 程序 链接如下&#xff1a;raw.githubusercontent.com/abapGit/build/main/zabapgit_standalone.prog.abap 2.安装开发版本 2.1 在线安装 前置条…
阅读更多...
【C++】类和对象——初始化列表和static修饰成员

【C++】类和对象——初始化列表和static修饰成员

首先我们来谈一下初始化列表&#xff0c;它其实是对于我们前边构造函数体内初始化的一种补充&#xff0c;换一种说法&#xff0c;它以后才是我们构造函数的主体部分。 我们先考虑一个问题&#xff0c;就是一个类里面有用引用或const初始化的成员变量&#xff0c;比如说&#xf…
阅读更多...
HTML_web扩展标签

HTML_web扩展标签

1.表格标签 2.增强表头表现 4.表格属性&#xff08;实际不常用&#xff09; 结构标签&#xff1a; 合并单元格&#xff1a; 更多请查看主页
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023