首页 > 网络编程 > JavaScript > javascript技巧 > WebGL高级变换Matrix4

WebGL高级变换之Matrix4使用介绍

2023-04-19 14:24:30 作者：H_World

这篇文章主要为大家介绍了WebGL高级变换之Matrix4使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

上一篇结尾的说到了按列矩阵，但是如果是按照最原始的方式变换的话，开发的成本其实是很高的，所以，只需要了解原理即可，在实际开发中，我们会用到封装后的库gl-matrix。

gl-matrix简介

gl-matrix是一个JavaScript库，用于处理线性代数中的向量和矩阵计算。它提供了许多常用的矩阵和向量计算函数，如矩阵相乘、矩阵求逆、矩阵转置、矩阵变换、向量点乘、向量叉乘、向量长度等等。

示例--旋转矩阵变换

步骤：创建变换矩阵，并将变换矩阵传给顶点着色器

WebGL按列矩阵

const VSHADER_SOURCE = `
  attribute vec4 a_position;
  uniform mat4 u_xformMatrix;
  void main(void){
    gl_Position=u_xformMatrix *  a_position;
  }
`

顶点着色器中定义了一个mat4类型的变量u_xformMatrix,然后新的顶点坐标是矩阵和变换前坐标的乘积

mat4和vec4类型的区别？

mat4是一个4x4的矩阵，用于进行3D变换的计算，例如旋转、缩放和平移.
vec4是一个4维向量，用于表示空间中的点或方向

let angle = 60
const radian = Math.PI * angle / 180
const cosB = Math.cos(radian)
const sinB = Math.sin(radian)
const xformMatrix = new Float32Array([
  cosB, sinB, 0.0, 0.0,
  -sinB, cosB, 0.0, 0.0,
  0.0, 0.0, 1.0, 0.0,
  0.0, 0.0, 0.0, 1.0,
])
const u_xformMatrix = webgl.getUniformLocation(webgl.program, 'u_xformMatrix')
webgl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix)

由于按列矩阵的特性，可以把xformMatrix当作成4*4的矩阵，然后通过方法uniformMatrix4fv进行数据的地址赋值即可变换。

gl-matrix 旋转矩阵

const render = () => {
  const matrixUniformLocation = webgl.getUniformLocation(webgl.program, "matrix")
  // 计算旋转矩阵
  const angle = performance.now() / 2000 * Math.PI
  const rotationMatrix = mat3.fromRotation(mat3.create(), angle)
  // 将矩阵传递给着色器程序
  webgl.useProgram(webgl.program)
  webgl.uniformMatrix3fv(matrixUniformLocation, false, rotationMatrix)
  // 绘制三角形
  webgl.clear(webgl.COLOR_BUFFER_BIT)
  webgl.drawArrays(webgl.TRIANGLES, 0, 3)
  // 循环调用渲染函数以实现动态旋转
  requestAnimationFrame(render)
}

mat3.create()创建了一个3*3的矩阵，mat3.fromRotation方法来计算旋转矩阵。该方法接受一个3x3的矩阵作为第一个参数，以及一个角度作为第二个参数，返回一个旋转矩阵。

复合变换

这儿的复合变换直接上gl-matrix库下处理矩阵的代码

效果

const vertexShaderSource = `
  attribute vec3 aPosition;
  attribute vec3 aColor;
  varying vec3 vColor;
  uniform mat4 uModelMatrix;
  void main() {
    gl_Position = uModelMatrix * vec4(aPosition, 1.0);
    vColor = aColor;
  }
`

顶点着色器中设置顶点gl_Position,变换矩阵和原来顶点坐标的乘积

const render = () => {
  webgl.clear(webgl.COLOR_BUFFER_BIT)
  const rotation = Date.now() * rotationSpeed / 10
  // 设置放缩变换矩阵
  let scaleMatrix = mat4.create()
  mat4.scale(scaleMatrix, scaleMatrix, [scale, scale, scale])
  // 设置旋转变换矩阵
  let rotationMatrix = mat4.create()
  mat4.rotateZ(rotationMatrix, rotationMatrix, rotation)
  // 将旋转和放缩变换矩阵相乘
  let transformMatrix = mat4.create()
  mat4.multiply(transformMatrix, rotationMatrix, scaleMatrix)
  // 将变换矩阵传递给uniform变量
  webgl.uniformMatrix4fv(matrixUniformLocation, false, transformMatrix)
  // 绘制正方形
  webgl.clearColor(0.0, 1.0, 1.0, 1.0)
  webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4)
  // 更新放缩因子
  updateScale()
  // 循环调用渲染函数以实现动态旋转
  requestAnimationFrame(render)
}

先用mat4.create()创建矩阵，然后设置矩阵数据；
scale设置缩放数据，rotateZ设置物体绕z轴旋转
mat4.multiply()将旋转和放缩变换矩阵相乘
uniformMatrix4fv将变换矩阵传递给uniform变量
绘制图形

放缩因子

const matrixUniformLocation = webgl.getUniformLocation(webgl.program, "uModelMatrix")
const rotationSpeed = 0.005
let scale = 1.0
let delta = 0.005
let direction = 1
const updateScale = () => {
  scale += delta * direction;
  if (scale >= 1.2 || scale <= 0.5) {
    direction = -direction;
  }
}

对于这些基础矩阵到复杂变换再到复合变换，那么我们可以熟悉的做到图形的变换了，并且用动画的方式展示出来，之后进入图形的表面了，就是颜色和纹理了

以上就是WebGL高级变换之Matrix4使用介绍的详细内容，更多关于WebGL高级变换Matrix4的资料请关注脚本之家其它相关文章！