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.rhkb.cn/news/208735.html

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

相关文章

Flutter开发type ‘Future＜int＞‘ is not a subtype of type ‘int‘ in type cast错误

Flutter开发type ‘Future＜int＞‘ is not a subtype of type ‘int‘ in type cast错误

文章目录 问题描述错误源码 问题分析解决方法修改后的代码 问题描述 今天有个同事调试flutter程序时报错&#xff0c;问我怎么解决&#xff0c;程序运行时报如下错误&#xff1a; type ‘Future’ is not a subtype of type ‘int’ in type cast 错误源码 int order Databas…
阅读更多...
2015年五一杯数学建模C题生态文明建设评价问题解题全过程文档及程序

2015年五一杯数学建模C题生态文明建设评价问题解题全过程文档及程序

2015年五一杯数学建模 C题 生态文明建设评价问题 原题再现 随着我国经济的迅速发展&#xff0c;生态文明越来越重要&#xff0c;生态文明建设被提到了一个前所未有的高度。党的十八大报告明确提出要大力推进生态文明建设&#xff0c;报告指出“建设生态文明&#xff0c;是关系…
阅读更多...
探索意义的深度：自然语言处理中的语义相似性

探索意义的深度：自然语言处理中的语义相似性

一、说明 语义相似度&#xff0c;反应出计算机对相同内容&#xff0c;不同表达的识别能力。因而识别范围至少是个句子&#xff0c;最大范围就是文章&#xff0c;其研究方法有所区别。本文将按照目前高手的研究成绩&#xff0c;作为谈资介绍给诸位。 二、语义相似度简介 自然语言…
阅读更多...
团队怎么高效制作问卷？

团队怎么高效制作问卷？

制作调查问卷时并不是一个人就能单独完成&#xff0c;通常情况下&#xff0c;完成一份调查问卷往往需要一个团队的成员参与&#xff0c;相互协作&#xff0c;共同完成。不过&#xff0c;多人协作经常会遇到协作壁垒&#xff0c;导致效率低下&#xff0c;那团队怎么才能高效协作…
阅读更多...
【面试经典150 | 二分查找】搜索二维矩阵

【面试经典150 | 二分查找】搜索二维矩阵

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;二分查找 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等…
阅读更多...
前端笔记（二）：CSS 选择器与特性

前端笔记（二）：CSS 选择器与特性

CSS&#xff08;层叠样式表&#xff09;是一种样式表语言&#xff0c;用于描述HTML或XML文档的呈现方式。它定义了如何在屏幕、纸张或其他媒体上显示文档的样式、布局和外观。 里面的代码由 选择器 { } 组成 体验 CSS CSS 可以让我们界面变得更加美观&#xff0c;这是 CSS 的…
阅读更多...
OpenSSH 漏洞修复升级最新版本

OpenSSH 漏洞修复升级最新版本

Centos7系统ssh默认版本一般是OpenSSH7.4左右&#xff0c;低版本是有漏洞的而且是高危漏洞&#xff0c;在软件交付和安全扫描上是过不了关的&#xff0c;一般情况需要升级OpenSSH的最新版本 今天详细说下升级最新版本的处理过程&#xff08;认真看会发现操作很简单&#xff0c…
阅读更多...
k8s-daemonset、job、cronjob控制器 6

k8s-daemonset、job、cronjob控制器 6

Daemonset控制器&#xff08;一个节点部署一个&#xff09; 、 创建Daemonset控制器 控制节点上不能进行部署&#xff0c;有污点 解决方式&#xff1a; 扩容节点&#xff0c;token值过期的解决方法&#xff1a; 回收pod job控制器 需要使用perl镜像&#xff0c;仓库没有&…
阅读更多...
基于Springboot + vue的汽车资讯网站

基于Springboot + vue的汽车资讯网站

qq&#xff08;2829419543&#xff09;获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;springboot 前端&#xff1a;采用vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xf…
阅读更多...
阅读软件OmniReader Pro mac功能特色

阅读软件OmniReader Pro mac功能特色

OmniReader Pro mac是一款文字识别和阅读软件&#xff0c;它可以将印刷体和手写体的文字转换为数字文本&#xff0c;并将其朗读出来。该软件适用于视力受损、阅读困难、语言障碍等用户&#xff0c;可以帮助他们更加轻松地获取信息和阅读文本。 OmniReader Pro具有简洁直观的用户…
阅读更多...
almalinux centos8系统zlmediakit编译安装

almalinux centos8系统zlmediakit编译安装

脚本 # 安装依赖 gcc-c.x86_64 这个不加的话会有问题&#xff0c; cmake需要在线安装 sudo yum -y install gcc gcc-c libssl-dev libsdl-dev libavcodec-dev libavutil-dev ffmpeg git openssl-devel gcc-c.x86_64 cmake mkdir -p /home/zenglg cd /home/zenglg git clon…
阅读更多...
人工智能和网络安全：坏与好

人工智能和网络安全：坏与好

人工智能似乎可以并且已经被用来帮助网络犯罪和网络攻击的各个方面。 人工智能可以用来令人信服地模仿真人的声音。人工智能工具可以帮助诈骗者制作更好、语法正确的网络钓鱼消息&#xff08;而糟糕的语法往往会暴露出漏洞&#xff09;&#xff0c;并将其翻译成多种语言&…
阅读更多...
华为1+x网络系统建设与运维（中级）-练习题2

华为1+x网络系统建设与运维（中级）-练习题2

一.设备命令 LSW1 [Huawei]sys LSW1 同理可得&#xff0c;给所有设备改名 二.VLAN LSW1 [LSW1]vlan ba 10 20 [LSW1]int g0/0/1 [LSW1-GigabitEthernet0/0/1]port link-type trunk [LSW1-GigabitEthernet0/0/1]port trunk allow-pass vlan 10 20 [LSW1-GigabitEthernet0/0/1]in…
阅读更多...
lxml 总结

lxml 总结

xm 和 lxml库 哪个更好用点 1. 性能&#xff1a; lxml 通常比 xml.etree.ElementTree 更快。lxml 使用了 C 编写的底层解析器&#xff0c;因此在处理大型 XML 文档时可能更高效。 如果性能对你的应用很重要&#xff0c;特别是在处理大型 XML 文件时&#xff0c;选择 lxml 可能…
阅读更多...
【web安全】CSRF漏洞攻击与防御

【web安全】CSRF漏洞攻击与防御

前言 总结&#xff0c;仅供学习。 csrf的理解 我们了解一个网站有修改信息&#xff0c;密码&#xff0c;添加删除管理&#xff0c;支付转账的功能之后。 通过抓包抓取对方修改操作的数据包样式&#xff0c; 然后在自己网站搭建一个指令。 当别人来访时&#xff0c; 如果…
阅读更多...
C++基础 -30- 双目运算符重载

C++基础 -30- 双目运算符重载

c的运算符如&#xff0c;只能实现标准的加法&#xff0c;无法让两个类的参数相加 通过运算符重载可以实现更高级的运算&#xff08;此处为类外重载&#xff09; 运算符重载(类内重载) #include "iostream"using namespace std;class data1 {public :int a;data1…
阅读更多...
Go语言实现大模型分词器tokenizer

Go语言实现大模型分词器tokenizer

文章目录 前言核心结构体定义构造函数文本初始处理组词构建词组索引训练数据编码解码打印状态信息运行效果总结 前言 大模型的tokenizer用于将原始文本输入转化为模型可处理的输入形式。tokenizer将文本分割成单词、子词或字符&#xff0c;并将其编码为数字表示。大模型的toke…
阅读更多...
Linux下Docker 离线安装详细步骤,亲测成功

Linux下Docker 离线安装详细步骤,亲测成功

1.离线原因&#xff1a;公司新创不能使用开元linux&#xff0c;使用了一个变种centOS&#xff0c;致使yum被禁 2.步骤&#xff1a; 2.1 下载docker tar包&#xff0c;下载地址&#xff1a;Index of linux/https://download.docker.com/linux/ 2.2 新建自己的软件目录&am…
阅读更多...
DBeaver 社区版（免费版）下载、安装、解决驱动更新出错问题

DBeaver 社区版（免费版）下载、安装、解决驱动更新出错问题

DBeaver 社区版&#xff08;免费版&#xff09; DBeaver有简洁版&#xff0c;企业版&#xff0c;旗舰版&#xff0c;社区版&#xff08;免费版&#xff09;。除了社区版&#xff0c;其他几个版本都是需要付费的&#xff0c;当然相对来说&#xff0c;功能也要更完善些&#xff…
阅读更多...
Screenshot To Code

Screenshot To Code

序言 对于GPT-4我只是一个门外汉&#xff0c;至于我为什么要了解screenshot to code&#xff0c;只是因为我想知道&#xff0c;在我不懂前端设计的情况下&#xff0c;能不能通过一些工具辅助自己做一些简单的前端界面设计。如果你想通过此文深刻了解GPT-4或者该开源项目&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023