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

相关推荐
大松鼠君7 小时前
轿车3D展示
前端·webgl·three.js
伶俜monster1 天前
UV 法向量实验室:Threejs 纹理与光照炼金术
前端·webgl·three.js
xhload3d1 天前
智能网联汽车云控平台 | 图扑数字孪生
3d·gis·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·车联网·智慧交通·智能网联·汽车云控
三木前端2 天前
像设计师一样处理图像,只需几行 JavaScript 代码!
前端·javascript·webgl
伶俜monster5 天前
模型苏醒计划:Threejs 让静态模型「叛逆」起来
前端·webgl·three.js
DragonBallSuper7 天前
在Cesium中使用ThreeJs材质(不是场景融合哦)
webgl·材质·threejs·cesium·可视化渲染
GISBox10 天前
PLY格式文件如何转换成3DTiles格式——使用GISBox软件实现高效转换
arcgis·信息可视化·node.js·gis·webgl·cesium
XZen12 天前
DeepSeek + 码上掘金 学习shadertoy之 —— Catmull-Rom样条插值
javascript·webgl·计算机图形学
海盗123412 天前
Unity导出WebGL,无法显示中文
unity·webgl
匹马夕阳14 天前
mapbox-gl源码中解析style加载地图过程详解
webgl