WebGL高級變換之Matrix4怎么使用

本篇內容介紹了“WebGL高級變換之Matrix4怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！