返回顶部
首页 > 资讯 > 前端开发 > JavaScript >WebGL高级变换之Matrix4使用介绍
  • 109
分享到

WebGL高级变换之Matrix4使用介绍

WebGL高级变换Matrix4WebGL Matrix4 2023-05-16 15:05:48 109人浏览 泡泡鱼
摘要

目录引言gl-matrix简介示例--旋转矩阵变换webGL按列矩阵gl-matrix 旋转矩阵复合变换效果放缩因子引言 上一篇结尾的说到了按列矩阵,但是如果是按照最原始的方式变换的

引言

上一篇结尾的说到了按列矩阵,但是如果是按照最原始的方式变换的话,开发的成本其实是很高的,所以,只需要了解原理即可,在实际开发中,我们会用到封装后的库gl-matrix。

gl-matrix简介

gl-matrix是一个javascript库,用于处理线性代数中的向量和矩阵计算。它提供了许多常用的矩阵和向量计算函数,如矩阵相乘、矩阵求逆、矩阵转置、矩阵变换、向量点乘、向量叉乘、向量长度等等。

示例--旋转矩阵变换

步骤:创建变换矩阵,并将变换矩阵传给顶点着色器

WEBGL按列矩阵

const VSHADER_SOURCE = `
  attribute vec4 a_position;
  unifORM mat4 u_xformMatrix;
  void main(void){
    gl_Position=u_xformMatrix *  a_position;
  }
`

顶点着色器中定义了一个mat4类型的变量u_xformMatrix,然后新的顶点坐标是矩阵和变换前坐标的乘积

mat4vec4类型的区别?

  • mat4是一个4x4的矩阵,用于进行3D变换的计算,例如旋转、缩放和平移.
  • vec4是一个4维向量,用于表示空间中的点或方向
let angle = 60
const radian = Math.PI * angle / 180
const cosB = Math.cos(radian)
const sinB = Math.sin(radian)
const xformMatrix = new Float32Array([
  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,
])
const u_xformMatrix = webgl.getUniformLocation(webgl.program, 'u_xformMatrix')
webgl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix)

由于按列矩阵的特性,可以把xformMatrix当作成4*4的矩阵,然后通过方法uniformMatrix4fv进行数据的地址赋值即可变换。

gl-matrix 旋转矩阵

const render = () => {
  const matrixUniformLocation = webgl.getUniformLocation(webgl.program, "matrix")
  // 计算旋转矩阵
  const angle = performance.now() / 2000 * Math.PI
  const rotationMatrix = mat3.fromRotation(mat3.create(), angle)
  // 将矩阵传递给着色器程序
  webgl.useProgram(webgl.program)
  webgl.uniformMatrix3fv(matrixUniformLocation, false, rotationMatrix)
  // 绘制三角形
  webgl.clear(webgl.COLOR_BUFFER_BIT)
  webgl.drawArrays(webgl.TRIANGLES, 0, 3)
  // 循环调用渲染函数以实现动态旋转
  requestAnimationFrame(render)
}

mat3.create()创建了一个3*3的矩阵,mat3.fromRotation方法来计算旋转矩阵。该方法接受一个3x3的矩阵作为第一个参数,以及一个角度作为第二个参数,返回一个旋转矩阵。

复合变换

这儿的复合变换直接上gl-matrix库下处理矩阵的代码

效果

const vertexShaderSource = `
  attribute vec3 aPosition;
  attribute vec3 aColor;
  varying vec3 vColor;
  uniform mat4 uModelMatrix;
  void main() {
    gl_Position = uModelMatrix * vec4(aPosition, 1.0);
    vColor = aColor;
  }
`

顶点着色器中设置顶点gl_Position,变换矩阵和原来顶点坐标的乘积

const render = () => {
  webgl.clear(webgl.COLOR_BUFFER_BIT)
  const rotation = Date.now() * rotationSpeed / 10
  // 设置放缩变换矩阵
  let scaleMatrix = mat4.create()
  mat4.scale(scaleMatrix, scaleMatrix, [scale, scale, scale])
  // 设置旋转变换矩阵
  let rotationMatrix = mat4.create()
  mat4.rotateZ(rotationMatrix, rotationMatrix, rotation)
  // 将旋转和放缩变换矩阵相乘
  let transformMatrix = mat4.create()
  mat4.multiply(transformMatrix, rotationMatrix, scaleMatrix)
  // 将变换矩阵传递给uniform变量
  webgl.uniformMatrix4fv(matrixUniformLocation, false, transformMatrix)
  // 绘制正方形
  webgl.clearColor(0.0, 1.0, 1.0, 1.0)
  webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4)
  // 更新放缩因子
  updateScale()
  // 循环调用渲染函数以实现动态旋转
  requestAnimationFrame(render)
}
  • 先用mat4.create()创建矩阵,然后设置矩阵数据;
  • scale设置缩放数据,rotateZ设置物体绕z轴旋转
  • mat4.multiply()将旋转和放缩变换矩阵相乘
  • uniformMatrix4fv将变换矩阵传递给uniform变量
  • 绘制图形

放缩因子

const matrixUniformLocation = webgl.getUniformLocation(webgl.program, "uModelMatrix")
const rotationSpeed = 0.005
let scale = 1.0
let delta = 0.005
let direction = 1
const updateScale = () => {
  scale += delta * direction;
  if (scale >= 1.2 || scale <= 0.5) {
    direction = -direction;
  }
}

对于这些基础矩阵到复杂变换再到复合变换,那么我们可以熟悉的做到图形的变换了,并且用动画的方式展示出来,之后进入图形的表面了,就是颜色和纹理了

以上就是WebGL高级变换之Matrix4使用介绍的详细内容,更多关于WebGL高级变换Matrix4的资料请关注编程网其它相关文章!

--结束END--

本文标题: WebGL高级变换之Matrix4使用介绍

本文链接: https://lsjlt.com/news/210212.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • WebGL高级变换之Matrix4使用介绍
    目录引言gl-matrix简介示例--旋转矩阵变换WebGL按列矩阵gl-matrix 旋转矩阵复合变换效果放缩因子引言 上一篇结尾的说到了按列矩阵,但是如果是按照最原始的方式变换的...
    99+
    2023-05-16
    WebGL高级变换Matrix4 WebGL Matrix4
  • WebGL 多重纹理的使用介绍
    目录引言激活绑定配置分配传递效果代码着色器设置数据缓存区的设置纹理对象的初始化绘制和动态变化小结一下引言 基于上篇的内容,纹理中最小的单位是纹素,若干纹素组成一个纹理单元,每个纹理单...
    99+
    2023-05-16
    WebGL 多重纹理 WebGL 多重纹理
  • WebGL颜色与纹理使用介绍
    目录引言颜色三角形颜色纹理纹理坐标特别说明: 图片坐标解决方案纹理图像着色器设置引言 基于之前的知识,这里主要是 将顶点的其他数据--如颜色等-传入顶点着色器图元光栅化--在顶点着色...
    99+
    2023-05-16
    WebGL 颜色纹理 WebGL 纹理
  • Android变形(Transform)之Camera使用介绍
    引言 接Android变形(Transform)之Matrix,来总结下Camera的使用,Camera主要实现3D的变形,有转动,旋转等,Camera的源码是由Native(...
    99+
    2022-06-06
    transform Android
  • WebGL 绘制与变换使用示例详解
    目录缓冲区对象(buffer object)api说明绘制图形参数类型移动、旋转、缩放自动旋转缩放补充说明缓冲区对象(buffer object) 其中的API方法的说明官方网址:W...
    99+
    2023-05-16
    WebGL绘制变换 WebGL绘制
  • Css3之高级-5 Css转换(简介、2
    一、转换简介转换概述  - 转换是使元素改变形状、尺寸和位置的一种效果  - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转、缩放、移动或倾斜  - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状...
    99+
    2023-01-31
    高级 简介 Css
  • k8sseries初级calico使用介绍
    目录calico简介calico是什么calico优点calico安装calico组件calico简介 calico是什么 Calico 是一个开源网络和网络安全解决方案,适用于容...
    99+
    2024-04-02
  • Javascript 高级手势使用的介绍是怎样的
    这期内容当中小编将会给大家带来有关Javascript 高级手势使用的介绍是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。  在IE10中新加入的对高级用...
    99+
    2024-04-02
  • SpringCloud降级规则使用介绍
    目录官网基本介绍降级策略实战异常比例异常数官网 https://github.com/alibaba/Sentinel/wiki/%E7%86%94%E6%96%AD%E9%99%8...
    99+
    2024-04-02
  • jQuery之$(document).ready()使用介绍
    $(document).ready()是一个jQuery的方法,用于在DOM加载完成后执行指定的代码。它的作用是确保在页面元素完全加载后再执行jQuery代码,以避免在DOM还未完全加载时执行代码导致的错误。使用$(document)....
    99+
    2023-08-09
    jQuery
  • CSS注释的一些高级用法介绍
    本篇内容介绍了“CSS注释的一些高级用法介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!准修饰选择器(Q...
    99+
    2024-04-02
  • Linux中高级用户组和权限介绍
    本篇内容介绍了“Linux中高级用户组和权限介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!下面先来了解一下关于用户,组的四个文件 /et...
    99+
    2023-06-13
  • windows8消费者预览版中高级启动使用介绍
      适用范围:   Windows 8 消费者预览版   操作步骤:   1、系统下按“Windows+C”键打开应用Charm菜单 ,选择“设置”。 ...
    99+
    2022-06-04
    预览版 消费者
  • android之HttpPostHttpGet使用方法介绍
    直接讲用法,先知道怎么用,再知道怎么回事 1、HttpPost 代码如下: try{ //创建连接 HttpClient httpClient = new DefaultHt...
    99+
    2022-06-06
    方法 Android
  • 3 Linux之“男人”使用介绍
    每日一句:马哥你的每日一句呢!!! 果断搬出座右铭:宝剑锋从磨砺出,梅花香自苦寒来(=.=!)内部命令所谓内部命令,就是bash环境自带的命令,通过type COMMAND可查询内部命令可通过 help COMMAND 查看帮助[]:中括号...
    99+
    2023-01-31
    男人 Linux
  • linux下rsync的基础介绍和高级用法
    这篇文章主要介绍“linux下rsync的基础介绍和高级用法”,在日常操作中,相信很多人在linux下rsync的基础介绍和高级用法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”linux下rsync的基础介...
    99+
    2023-06-05
  • hystrix服务降级方法使用介绍
    当一个服务端的业务响应的时间过长的时候或者业务处理逻辑处理异常,不应该等待,应该给出一种处理方法 超时导致服务器变慢(转圈) --->超时不再等待 出错(宕机或程序运行出错) ...
    99+
    2024-04-02
  • Android之联系人PinnedHeaderListView使用介绍
    Android联系人中的ListView是做得比较独特的,但是源码写得比较复制,当我们想使用他的时候再从源码中提取,实属不易啊,而且容易出错,这几天,我把他提取出来了,写成一个...
    99+
    2022-06-06
    联系 Android
  • java基础之NIO介绍及使用
    目录一、NIO二、三大组件三、ByteBuffer的使用四、测试Demo五、Channel的使用六、网络编程七、Selector八、网络编程(多路复用)一、NIO java.nio...
    99+
    2024-04-02
  • Python 之plt.plot()的介绍以及使用
    文章目录 介绍代码实例 介绍 plt.plot() 是Matplotlib库中用于绘制线图(折线图)的主要函数之一。它的作用是将一组数据点连接起来,以可视化数据的趋势、关系或模式。以下是...
    99+
    2023-10-23
    python 开发语言
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作