目录引言gl-matrix简介示例--旋转矩阵变换webGL按列矩阵gl-matrix 旋转矩阵复合变换效果放缩因子引言 上一篇结尾的说到了按列矩阵,但是如果是按照最原始的方式变换的
上一篇结尾的说到了按列矩阵,但是如果是按照最原始的方式变换的话,开发的成本其实是很高的,所以,只需要了解原理即可,在实际开发中,我们会用到封装后的库gl-matrix。
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
类型的区别?
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使用介绍的详细内容,更多关于WebGL高级变换Matrix4的资料请关注编程网其它相关文章!
--结束END--
本文标题: WebGL高级变换之Matrix4使用介绍
本文链接: https://lsjlt.com/news/210212.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0