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

相关推荐
余~1853816280021 分钟前
矩阵系统源码搭建,OEM贴牌技术
网络·人工智能·线性代数·算法·矩阵
程序员阳哥shen1616111 小时前
短视频矩阵系统源码开发优势,短视频矩阵系统oem部署
矩阵·视频·源代码管理
xhload3d4 小时前
掌控物体运动艺术:图扑 Easing 函数实践应用
大数据·3d·智慧城市·html5·webgl·数字孪生·可视化·数据可视化·工业互联网·轻量化·demo·hightopo·大屏展示·图形组件
蚂蚁RichLab前端团队4 小时前
走进高校:互动引擎 Galacean Engine 的成长历程
前端·开源·webgl
战术摸鱼大师16 小时前
线性代数&群论应用:正逆运动学 & 变换矩阵
线性代数·算法·矩阵
CodeLearing1 天前
【CUDA代码实践03】m维网格n维线程块对二维矩阵的索引
线性代数·矩阵·cuda
weixin_307779131 天前
证明矩阵A和B特征值之间关系的两个不等式
线性代数·矩阵
海绵波波1071 天前
74.搜索二维矩阵
数据结构·算法·矩阵
程序员阳哥shen1616111 天前
抖音短视频矩阵源码开发/抖音矩阵系统OEM搭建/短视频源码开发
大数据·人工智能·矩阵·视频·源代码管理
余~185381628001 天前
抖音矩阵系统贴牌的优势及所需技术支持详解
线性代数·矩阵·音视频·1024程序员节