前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【愚公系列】2023年12月 WEBGL专题-图形平移矩阵

【愚公系列】2023年12月 WEBGL专题-图形平移矩阵

作者头像
愚公搬代码
发布于 2025-05-28 08:49:58
发布于 2025-05-28 08:49:58
6500
代码可运行
举报
文章被收录于专栏:历史专栏历史专栏
运行总次数:0
代码可运行

🚀前言

图形平移、缩放、旋转是计算机图形学中常用的操作,用来改变图像的位置、大小和方向。

  1. 平移:平移是将图形在二维平面上沿着一个方向移动一段距离,通常用一个二维向量表示平移的距离。在计算机图形学中,可以通过修改坐标系来实现平移操作。
  2. 缩放:缩放是将图形按照一定比例进行放大或缩小,在计算机图形学中,通常使用缩放矩阵来进行缩放操作。缩放矩阵中,对角线上的元素表示沿着坐标轴的缩放比例,非对角线上的元素表示斜线方向的缩放比例。
  3. 旋转:旋转是将图形围绕某个点或轴旋转一定角度,通常使用旋转矩阵来实现。旋转矩阵是一个二维矩阵,其中cos和sin分别表示旋转角度的余弦和正弦值。通过对图形中每个点进行旋转矩阵变换,可以实现旋转操作。

这些操作常常用于计算机图形学、图像处理等领域中的图像变换。图形平移、缩放、旋转是计算机图形学中常用的操作,用来改变图像的位置、大小和方向。

🚀一、图形平移矩阵

🔎1.矩阵的概念

矩阵是一个数学对象,由一组数排成的矩形排列组成。它可看作向量的扩展。通常表示为一个大写字母,如A、B等,其中每一个元素都用小写字母表示。一个矩阵包含了一定数量的行和列,并且每个元素都可以在矩阵中通过其行号和列号来确定其位置。

一般地,一个m×n矩阵A的元素可以表示为a[i,j],其中i表示该元素所在的行数,j表示该元素所在的列数。例如,对于一个3×3的矩阵A,其元素可以表示为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
A = [ a[1,1]  a[1,2]  a[1,3] ]
    [ a[2,1]  a[2,2]  a[2,3] ]
    [ a[3,1]  a[3,2]  a[3,3] ]

矩阵广泛应用于线性代数、图论、概率论等许多数学分支领域,以及计算机科学、物理、经济学、工程学等其他学科中。

矩阵就是纵横排列的数据表格(m行n列),作用是把一个点转换到另一个点。

🔎2. 行主序和列主序

矩阵的行主序和列主序都是指存储顺序。

行主序指矩阵元素按行依次存储的方式,即先存储第一行的元素,再存储第二行的元素,以此类推,直到最后一行的元素。在计算机中,矩阵的行主序存储方式是一般的存储方式。

列主序指矩阵元素按列依次存储的方式,即先存储第一列的元素,再存储第二列的元素,以此类推,直到最后一列的元素。在计算机中,矩阵的列主序存储方式也常用于某些特定的应用场景,例如矩阵乘法算法的优化。

🔎3. 三维坐标平移

🔎4. 平移矩阵

1、ax + by + cz + d = x + x1: 只有当 a = 1,b = c = 0, d = x1 的时候,等式左右两边成⽴

2、ex + fy + gz + h = y + y1: 只有当 f = 1, e = g = 0, h = y1 的时候,等式左右两边成⽴

3、ix + jy + kz + l = z + z1: 只有当 k = 1,i = j = 0, l = z1 的时候,等式左右两边成⽴

4、mx + ny + oz + p = 1: 只有当 m = n = o = 0, p = 1 的时候,等式左右两边成⽴

🔎5. uniformMatrix4fv

uniformMatrix4fv是WebGL的一个函数,用于将四维矩阵数据传输到着色器中的uniform变量中。具体用法如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
uniformMatrix4fv(location, transpose, value);

其中,location是指uniform变量的存储位置,transpose是一个布尔值,表示是否要对矩阵进行转置操作,value是一个Float32Array类型的数组,表示要传输的矩阵数据。

例如,以下代码将一个4×4的单位矩阵传输到名为uModelViewMatrix的uniform变量中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var modelViewMatrix = mat4.create(); // 创建一个4x4的单位矩阵
gl.uniformMatrix4fv(uModelViewMatrixLoc, false, modelViewMatrix);

在着色器中,我们可以这样定义名为uModelViewMatrix的uniform变量:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
uniform mat4 uModelViewMatrix;

🔎6. 案例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>
</html>
<script>
  // 平移矩阵
  function getTranslateMatrix(x = 0,y = 0,z = 0) {
    return new Float32Array([
      1.0,0.0,0.0,0.0,
      0.0,1.0,0.0,0.0,
      0.0,0.0,1.0,0.0,
      x  ,y  ,z  , 1,
    ])
  }
  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    uniform mat4 mat;
    void main() {
      gl_Position = mat * aPosition;
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const mat = gl.getUniformLocation(program, 'mat');

  const points = new Float32Array([
    -0.5, -0.5,
     0.5, -0.5,
     0.0,  0.5,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPosition)

  let x = -1;
  function animation() {
    x += 0.01;
    if (x > 1) {
      x = -1;
    }

    const matrix = getTranslateMatrix(x, x);
    // gl.vertexAttrib1f(aTranslate, x);
    gl.uniformMatrix4fv(mat, false, matrix);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    requestAnimationFrame(animation);
  }

  animation()
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-12-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 🚀前言
  • 🚀一、图形平移矩阵
    • 🔎1.矩阵的概念
    • 🔎2. 行主序和列主序
    • 🔎3. 三维坐标平移
    • 🔎4. 平移矩阵
    • 🔎5. uniformMatrix4fv
    • 🔎6. 案例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档