WebGL笔记:矩阵的变换之平移的实现

矩阵的变换

变换

  • 变换有三种状态:平移旋转缩放
  • 当我们变换一个图形时,实际上就是在移动这个图形的所有顶点。
  • 解释
    • webgl 要绘图的话,它是先定顶点的,就比如说我要画个三角形,那它会先把这三角形的三个顶点定出来。
    • 然后它再考虑以什么样的方式去绘制这个三角形, 就比如说在 gl.drawArrays(gl.TRIANGLES, 0, 3) 这个方法
      • 第一个参数是 TRIANGLES,让它画一个独立三角形,我依次连接这三个点,然后逐片元给它们填充颜色
      • 接下来我就可以对三角形进行变换操作了,比如:旋转,缩放,平移。
      • 我在做这三种操作的时候,实际上就是改变了三角形的顶点位置

平移

  • 对图形的平移啊,就是对图形所有顶点的平移

  • 举个简单的例子

    • 就比如说已知点p的位置是(x,y,z)
    • 那我要对它进行一个相对的移动,
    • 移动的三个分量分别是 tx, ty, tz, 那么求它移动完之后的位置 p’ (x’, y’, z’)
    • 只要让它这三个分量做加法就可以了
  • 即,如下图

    x'=x+tx
    y'=y+ty
    z'=z+tz
    

  • 如果上面这个图形中并非只有一个顶点,而是三个顶点或者更多,那么所有的顶点也是按同样的原理去进行位移的
  • 就比如下面这个图这个三角形在位移的时候啊,其实上也就是它的所有顶点去做一个相对的位移

向量的加法

  • 在实际的编码中,要有一个向量的概念。
  • 就比如说 (x,y,z) 这三个量可以构成一个三维点位
  • 我们可以说它是一个顶点位置,也可以说它是一个向量, 至于这个 (x,y,z) 到底是什么?我们要看它是要做什么的
  • 就比如说我把点p(x,y,z)作为点位的时候,那它就是个点
  • 如果我把p的移动距离 tx, ty, tz 封装成一个对象 pt(tx,ty,tz), 那么 pt 就是一个向量,一个为点p 指明移动方向和距离的向量
  • 那么,点 p 的移动结果 p’ 就可以这么写:p’ = p + pt
  • 由此可知,顶点的位移,就是向量的加法

编写向量加法代码

  • 在GLSLES语言里,是直接可以进行向量运算的,下面是顶点着色器里的代码:

    attribute vec4 a_Position;
    vec4 translation = vec4(0, 0.2, 0, 0);
    void main() {gl_Position = a_Position + translation;
    }
    
    • a_Position 是原始点位,属于attribute 变量
    • translation 是顶点着色器里的私有变量,没有向外部暴露,属于4维向量
    • a_Position + translation 便是着色器内的向量加法,这里是对原始点位进行位移
  • 基于对初始的这个a_Position 点位进行一个位移的话,那我可以直接让它加上一个四维的向量,就比如这里的这个translation,就是我声明的一个个四四维向量,让它直接加上即可

  • 上述 translation 是写死的 ,我们也可以把 translation 变量暴露出去,让js可以修改图形位置:

    <script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;uniform vec4 u_Translation;void main() {gl_Position = a_Position + u_Translation;}
    </script>
    
  • 在js 中修改uniform 变量的方法,我们之前已经说过:

    // 获取 uniform 变量
    const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
    // 为 uniform 变量赋值
    gl.uniform4f(u_Translation, 0, 0.5, 0, 0);
    
  • 之后,可以加一段逐帧动画:

    let y = 0;
    !(function animate() {y += 0.02;if(y > 1) y = -1;gl.uniform4f(u_Translation, 0, y, 0, 0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate)
    })()
    


完整代码

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_Position;uniform vec4 u_Translation;void main() {gl_Position = a_Position + u_Translation;}
</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 './util.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);//获取uniform 变量const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');//为uniform 变量赋值gl.uniform4f(u_Translation, 0, 0.5, 0, 0);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);let y = 0!(function animate() {y += 0.02;if (y > 1) y = -1;gl.uniform4f(u_Translation, 0, y, 0, 0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(animate);})()
</script>

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

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

相关文章

重大技术问题,iPhone 15 Pro Max面临“烧屏门”风波 | 百能云芯

近期&#xff0c;社交媒体平台上陆续涌现大量用户和数码博主就iPhone 15 Pro Max出现烧屏问题的投诉与评论。 烧屏问题是OLED屏幕常见的一个缺陷&#xff0c;这是由OLED屏幕发光机制引发的&#xff0c;OLED屏幕可视为由无数微小的灯泡-像素点构成&#xff0c;这些像素点可以独立…

Mac电脑怎么在Dock窗口预览,Dock窗口预览工具DockView功能介绍

DockView是一款Mac电脑上的软件&#xff0c;它可以增强Dock的功能&#xff0c;让用户更方便地管理和切换应用程序。 DockView的主要功能是在 DockQ&#xff0c;栏上显示每个窗口的缩略图&#xff0c;并提供了一些相关的操作选项。当用户将鼠标悬停在Dock栏上的应用程序图标上时…

PyCharm中文使用详解

PyCharm是一个Python IDE&#xff0c;可以帮助程序员节省时间&#xff0c;提高生产力。那么具体怎么用呢&#xff1f;本文介绍了PyCharm的安装、插件、外部工具、专业功能等&#xff0c;希望对大家有所帮助。 之前没有系统介绍过PyCharm。如何配置环境&#xff0c;如何DeBug&a…

2024 王道考研-数据结构(线性表_2)

第二章 线性表算法题(线性表的链式存储) 二、综合应用题 1.设计一个递归算法&#xff0c;删除不带头结点的单链表L中所有值为x的结点。 设f(L,x)的功能是删除以L为首结点指针的单链表中所有值等于x的结点&#xff0c;显然有f(L->next,x)的功能是删除以L->next为首结点指…

Opencv-图像插值与LUT查找表

图像像素的比较 白色是255&#xff0c;黑色是0 min(InputArray src1,InputArray src2,OutputArray dst) max(InputArray src1,InputArray src2,OutpurArray dstsrc1:第一个图像矩阵&#xff0c;通道数任意src2&#xff1a;第二个图像矩阵&#xff0c;尺寸和通道数以及数据类型…

Real3D FlipBook jQuery Plugin 3.41 Crack

Real3D FlipBook 和 PDF 查看器 jQuery 插件 - CodeCanyon 待售物品 实时预览 截图 视频预览 Real3D Flipbook jQuery 插件 - 1 Real3D Flipbook jQuery 插件 - 2 Real3D Flipbook jQuery 插件 - 3 新功能 – REAL3D FLIPBOOK JQUERY 插件的 PDF 到图像转换器 一款用于将…

修炼k8s+flink+hdfs+dlink(六:学习namespace,service)

一&#xff1a;什么是namespace&#xff1f; 你可以认为namespaces是你kubernetes集群中的虚拟化集群。在一个Kubernetes集群中可以拥有多个命名空间&#xff0c;它们在逻辑上彼此隔离。 他们可以为您和您的团队提供组织&#xff0c;安全甚至性能方面的帮助&#xff01; 二&a…

[Python从零到壹] 七十二.图像识别及经典案例篇之OpenGL入门及绘制基本图形和3D图

十月太忙,还是写一篇吧!祝大家1024节日快乐O(∩_∩)O 欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家,希…

7.MySQL复合查询

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 复合查询 基本查询回顾 多表查询 自连接 子查询 单行子查询 多行子查询 多列子查询 在from子句中使用子查询 合并查询 union union all 实战OJ 复合查询 前面我们讲解的mysql表的查询都是对一张表进行查询…

低代码助力企业数字化升级

随着数字化转型的深入&#xff0c;越来越多的企业开始寻求低代码和无代码解决方案&#xff0c;以满足对应用程序的更快交付和高度定制自动化工作流的日益增长的需求。 根据Gartner的数据&#xff0c;全球低代码和无代码应用平台的市场规模预计在2023年将增长25%至100亿美元&…

IP地址在网络安全中的关键作用

IP地址&#xff08;Internet Protocol Address&#xff09;是互联网世界中的重要标识符&#xff0c;它在网络安全领域发挥着至关重要的作用。这些地址不仅帮助设备在网络上找到彼此&#xff0c;还在多个方面有助于维护网络的完整性、机密性和可用性。本文将探讨IP地址在网络安全…

Java后端开发——实现登录验证程序

一、实现一个简单登录验证程序 实现一个简单的用户登录验证程序&#xff0c;如果用户名是 abc &#xff0c;密码是 123&#xff0c;则显示欢迎用户的信息&#xff0c;否则显示“用户名或密码不正确”。 【分析】 该案例采用 JSP 页面只完成提交信息和验证结果的显示&#xff…

做外贸为何离不开WhatsApp?一文解封、养号、引流、促单全攻略!

WhatsApp在国际贸易中的地位无法忽视。它是一种即时通讯工具&#xff0c;也是外贸从业者的得力助手。但同时&#xff0c;使用WhatsApp也伴随着一些问题&#xff0c;如账号被封、如何养号、引流和促单。这篇文章将为你详细解答这些问题&#xff0c;让你更好地利用WhatsApp&#…

Go语言用Resty库编写的音频爬虫代码

以下是一个使用Resty库的Go语言下载器程序&#xff0c;用于从facebook下载音频。此程序使用了duoip/get_proxy的代码。 package mainimport ("fmt""github.com/john-nguyen09/resty""io/ioutil""net/http" )func main() {// 设置爬虫i…

跨境出口亚马逊美国和加拿大市场水基灭火器UL测试报告审核解析

水基灭火器&#xff08;Foam extinguisher&#xff09;&#xff0c;为绿色外观的灭火器&#xff0c;其灭火器机理为物理性灭火器原理&#xff0c;其主要成分包括碳氢表面活性剂、氟碳表面活性剂、阻燃剂和助剂等。水基灭火器出口需办理UL测试报告。 消防及其他安全用品 本政策…

vue中替换全局字体

一、背景 产品说项目要拿去展会展示&#xff0c;但现在项目字体是微软雅黑&#xff0c;不支持商用&#xff0c;需要全局替换思源字体。 二、下载字体 推荐一个网址&#xff0c;好用 字体天下&#xff0c;点击跳转 下载好的文件如下&#xff1a; 三、引入字体 1、在项目…

Maven学习

Maven介绍 Maven是Apache的一个开源项目&#xff0c;主要服务于基于Java平台的项目构建&#xff0c;依赖管理和项目信息管理。 Maven可以让团队能够更科学的构建项目&#xff0c;我们可以用配置文件的方式&#xff0c;对项目的名称、描述、项目版本号、项目依赖等信息进行描述…

如何在Postman中使用静态HTTP

首先&#xff0c;打开 Postman 软件。在 Postman 的菜单栏中&#xff0c;点击 “Preferences”&#xff08;偏好设置&#xff09;。 亲身经验&#xff1a;我自己尝试了这个方法&#xff0c;发现它非常适用于需要使用HTTP的场景。 数据和引证&#xff1a;根据 Postman 官方文档…

【tio-websocket】9、服务配置与维护—TioConfig

场景 我们在写 TCP Server 时,都会先选好一个端口以监听客户端连接,再创建N组线程池来执行相关的任务,譬如发送消息、解码数据包、处理数据包等任务,还要维护客户端连接的各种数据,为了和业务互动,还要把这些客户端连接和各种业务数据绑定起来,譬如把某个客户端绑定到一…

杀毒软件的原理

近几年杀毒软件泛滥&#xff0c;很多人不知道该如何选择合适的杀毒软件&#xff0c;也许杀毒软件并非是必需的&#xff0c;真心觉得杀毒软件没啥用&#xff0c;而且运行起来还严重影响系统性能&#xff0c;但是很多小白电脑都会用杀毒软件&#xff0c;他们怕&#xff0c;因为不…