WebGl 缩放矩阵

缩放矩阵是线性代数中的一种矩阵,用于描述图形在空间中沿着各个坐标轴进行均匀缩放的变换。在3D图形编程中,缩放矩阵通常用于调整物体的大小,而不改变其形状。

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

其中,(x, y, z)是缩放向量,表示沿着x、y、z轴的缩放比例。如果x、y、z都等于1,则矩阵表示不进行缩放;如果小于1,则表示缩小;如果大于1,则表示放大。

1. 使用缩放矩阵流程

  • 在WebGL中实现缩放,需要创建一个缩放矩阵,并将其传递给顶点着色器。
  • 顶点着色器中的顶点位置变量(aPosition)会与缩放矩阵相乘,从而实现缩放变换。
  • 这个过程通常涉及到使用uniformMatrix4fv函数来设置着色器中的统一矩阵变量,该函数允许传递一个4x4的浮点矩阵到着色器程序。

2. 示例代码

以下是一个简单的WebGL示例,展示了如何创建一个缩放矩阵并将其应用到顶点着色器中:

javascript 复制代码
// 假设已经有了WebGL上下文gl和已初始化的着色器程序program

// 1.创建顶点着色器
const vertexShaderSource = `
    attribute vec4 aPosition;
    uniform mat4 mat;
    void main() {
        gl_Position = mat * aPosition;
        gl_PointSize = 10.0;
    }`

// 2.创建缩放矩阵
function getScaleMatrix(x = 1, y = 1, z = 1) {
    return new Float32Array([
        x, 0.0, 0.0, 0.0,
        0.0, y, 0.0, 0.0,
        0.0, 0.0, z, 0.0,
        0.0, 0.0, 0.0, 1,
    ])
}

// 3.获取顶点着色器中的uniform矩阵变量的位置
const mat = gl.getUniformLocation(program, 'mat');

// 4.缩放矩阵赋值
const matrix = getScaleMatrix(x);

// 5.将缩放矩阵传递给着色器
gl.uniformMatrix4fv(mat, false, matrix);

// 继续其他渲染流程...

3.效果如下

相关推荐
失忆爆表症1 天前
基于 MediaPipe + Three.js 的实时姿态可视化前端
前端·webgl
串串狗xk2 天前
使用 webgl 写的新概念笔记应用《赛博城寨》,在三维开放世界里写笔记
javascript·webgl
刘皇叔code4 天前
Three.js后处理UnrealBloomPass的分析
webgl·three.js
掘金安东尼6 天前
用 WebGL + Solid.js 构建混合材质 Shader
前端·webgl
郝学胜-神的一滴9 天前
Three.js 材质系统深度解析
javascript·3d·游戏引擎·webgl·材质
Tetap9 天前
pixijs实现绿幕抠图和视频
前端·webgl
山西第一大怨种10 天前
我的浏览器下雨了进水了
前端·webgl
sixgod_h13 天前
Threejs源码系列- Object3D
webgl·three.js
烛阴14 天前
Clamp
前端·webgl
答案answer14 天前
three.js 实现几个好看的文本内容效果
前端·webgl·three.js