WebGl 使用平行矩阵实现图像平移

1. 平行矩阵原理

平行矩阵,也称为平移矩阵,是一种在二维或三维空间中应用平移变换的矩阵。平移矩阵的作用是将空间中的每个点沿着一定的方向移动固定的距离,而不改变点之间的相对位置和距离。

在三维空间中,平移矩阵的形式为

javascript 复制代码
| 1  0  0  0 |
| 0  1  0  0 |
| 0  0  1  0 |
| x  y  z  1 |

2. 实现步骤

2.1 创建平移矩阵

javascript 复制代码
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,
    ])
}

2.2 设置着色器

javascript 复制代码
// 顶点着色器代码 
attribute vec4 aPosition;
uniform mat4 mat;
void main() {
    gl_Position = mat * aPosition;
}

在顶点着色器中,我们定义了一个uniform变量mat,用来接收平移矩阵。

2.3 传递矩阵

uniformMatrix4fv用于设置着色器程序中的统一矩阵(uniform matrix)变量。这个函数允许开发者将一个4x4的浮点矩阵传递给顶点着色器或片段着色器中的矩阵属性。这个矩阵可以用于多种变换,包括平移、旋转和缩放。

gl.uniformMatrix4fv(location, transpose, array);

  • ocation:指定 uniform 变量的存储位置。
  • transpose:在 webgl 中恒为false。
  • array:矩阵数组。
javascript 复制代码
// 平行矩阵赋值
const matrix = getTranslateMatrix(x)
// 将平移矩阵传递给着色器
gl.uniformMatrix4fv(mat, false, matrix);

2.4 渲染场景

javascript 复制代码
// 图形平移
let x = 1;
function animation() {
    x += 0.01;
    if (x > 1) {
        x = -1;
    }
    // 平行矩阵赋值
    const matrix = getTranslateMatrix(x)
    // 将平移矩阵传递给着色器
    gl.uniformMatrix4fv(mat, false, matrix);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    // 实现流畅的动画效果
    requestAnimationFrame(animation);
}
animation();

3.效果如下:

相关推荐
刘皇叔code2 小时前
如何给Three.js中ExtrudeGeometry的不同面设置不同材质
webgl·three.js
淘小白_TXB21963 天前
头条号矩阵运营经验访谈记录
线性代数·矩阵
Nicander3 天前
上帝视角看 GPU 学习笔记
webgl·gpu
智者知已应修善业3 天前
【矩阵找最大小所在位置】2022-11-13
c语言·c++·经验分享·笔记·算法·矩阵
semantist@语校3 天前
第二十篇|SAMU教育学院的教育数据剖析:制度阈值、能力矩阵与升学网络
大数据·数据库·人工智能·百度·语言模型·矩阵·prompt
deephub4 天前
机器人逆运动学进阶:李代数、矩阵指数与旋转流形计算
人工智能·机器学习·矩阵·机器人·李群李代数
时空无限4 天前
说说transformer 中的掩码矩阵以及为什么能掩盖住词语
人工智能·矩阵·transformer
hn小菜鸡4 天前
LeetCode 3643.垂直翻转子矩阵
算法·leetcode·矩阵
张晓~183399481214 天前
短视频矩阵源码-视频剪辑+AI智能体开发接入技术分享
c语言·c++·人工智能·矩阵·c#·php·音视频
听情歌落俗4 天前
MATLAB3-1变量-台大郭彦甫
开发语言·笔记·算法·matlab·矩阵