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

相关推荐
张晓~183399481212 小时前
数字人分身+矩阵系统聚合+碰一碰发视频: 源码搭建-支持OEM
线性代数·矩阵·音视频
魂断蓝桥66613 小时前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
康康的幸福生活1 天前
webgl2 方法解析: getContext()
webgl
YuTaoShao1 天前
【LeetCode 热题 100】73. 矩阵置零——(解法二)空间复杂度 O(1)
java·算法·leetcode·矩阵
庖丁解牛2 天前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
康康的幸福生活2 天前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
szekl2 天前
HDMI 2.0 4×2矩阵切换器412HN——多信号输入输出的高清解决方案
linux·矩阵·计算机外设·电脑·ekl
康康的幸福生活3 天前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥6663 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
引量AI13 天前
TikTok 矩阵如何快速涨粉
大数据·人工智能·矩阵·tiktok矩阵·海外社媒