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.效果如下:

相关推荐
代码AI弗森2 小时前
从 IDE 到 CLI:AI 编程代理工具全景与落地指南(附对比矩阵与脚本化示例)
ide·人工智能·矩阵
平行云10 小时前
赋能数字孪生:Paraverse平行云实时云渲染平台LarkXR,提供强大的API与SDK用于二次开发和深度集成
3d·unity·ue5·webgl·实时云渲染·云xr
18538162800余+14 小时前
数字人分身 + 矩阵系统聚合的源码搭建与定制开发
线性代数·矩阵
Swift社区14 小时前
LeetCode 378 - 有序矩阵中第 K 小的元素
算法·leetcode·矩阵
墨染点香14 小时前
LeetCode 刷题【73. 矩阵置零】
算法·leetcode·矩阵
semantist@语校14 小时前
第十九篇|东京世界日本语学校的结构数据建模:制度函数、能力矩阵与升学图谱
数据库·人工智能·线性代数·矩阵·prompt·github·数据集
passxgx2 天前
10.3 马尔可夫矩阵、人口和经济
矩阵
彬彬醤2 天前
TikTok矩阵有哪些运营支撑方案?
大数据·网络·网络协议·tcp/ip·矩阵·udp·产品运营
云手机掌柜2 天前
下一代社媒运营工具:亚矩阵云手机集成AIGC与数字人技术引领内容革命
大数据·线性代数·智能手机·矩阵·aigc