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

相关推荐
】余1853816280010 小时前
矩阵系统源码搭建与定制化开发,支持OEM
线性代数·矩阵
Data_Adventure18 小时前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
YuTaoShao2 天前
【LeetCode 热题 100】73. 矩阵置零——(解法一)空间复杂度 O(M + N)
算法·leetcode·矩阵
Kaltistss2 天前
240.搜索二维矩阵Ⅱ
线性代数·算法·矩阵
说私域2 天前
视频号账号矩阵运营中定制开发开源 AI 智能名片 S2B2C 商城小程序的赋能研究
人工智能·矩阵·开源
康康的幸福生活3 天前
webgl2 方法解析: bufferData()
webgl
张晓~183399481213 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d3 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
魂断蓝桥6663 天前
使用three.js,实现微信3D小游戏系列教程,框架篇(一)
webgl·threejs·微信小游戏·3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
我爱C编程4 天前
基于拓扑结构检测的LDPC稀疏校验矩阵高阶环检测算法matlab仿真
算法·matlab·矩阵·ldpc·环检测