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

相关推荐
爱看书的小沐10 小时前
【小沐学Web3D】three.js 加载三维模型(Svelte.js)
javascript·vue.js·webgl·three.js·opengl·web3d·svelte.js
林枫依依12 小时前
Unity Webgl在编辑器中报错:Cannot connect to destination host
unity·编辑器·webgl
烛阴1 天前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
陈小峰_iefreer1 天前
stone 3d v3.3.0版本发布,含时间线和连接器等新功能
3d·webgl·metaverse·cadcg
supermapsupport2 天前
SuperMap GIS基础产品FAQ集锦(20250421)
服务器·webgl·supermap·idesktop
zhu_zhu_xia2 天前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
伶俜monster2 天前
光影编程师:Threejs Shader 基础全攻略
前端·webgl·three.js
烛阴3 天前
Swizzling--OpenGL的向量的灵活组合
前端·webgl
前端小崔3 天前
从零开始学习three.js(14):一文详解three.js中的场景Scene
webgl·three.js·数据可视化
烛阴4 天前
Vec--OpenGL的顶点基础
前端·webgl