本篇内容介绍了“WebGL高级变换之Matrix4怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
gl-matrix是一个JavaScript库,用于处理线性代数中的向量和矩阵计算。它提供了许多常用的矩阵和向量计算函数,如矩阵相乘、矩阵求逆、矩阵转置、矩阵变换、向量点乘、向量叉乘、向量长度等等。
步骤:创建变换矩阵,并将变换矩阵传给顶点着色器
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
进行数据的地址赋值即可变换。
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怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。