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

相关推荐
烛阴5 小时前
Ceil -- 从平滑到阶梯
前端·webgl
康康的幸福生活10 小时前
webgl2 方法解析: layout - glsl 300 es版本
前端·javascript·webgl
FogLetter10 小时前
用Three.js打造炫酷3D地球:从入门到实现交互式体验
webgl·canvas
庖丁解牛3 天前
WebGL第四十五课:研究一下shader中的随机数
webgl·游戏开发·计算机图形学
烛阴4 天前
ABS - Rhomb
前端·webgl
烛阴5 天前
Smoothstep
前端·webgl
格调UI成品7 天前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
烛阴7 天前
Mix - Bilinear Interpolation
前端·webgl
魂断蓝桥6668 天前
使用three.js实现3D消防,消防管线,消防教育(课一:消防给水系统01)
webgl·数字孪生·three.js·3d建筑·物联网3d·3d定位、三维室内定位、3d建筑·3d消防·消防演习模拟·消防给水系统
烛阴8 天前
Mix
前端·webgl