绕y轴旋转动画

上节课给大家演示了矩形平面绕z轴旋转，本节课给大家展示一个绕y轴旋转的案例。

绕y轴旋转

在上节课代码基础上给大家讲解。

在渲染循环render函数外面，创建一个uniform的缓冲区用来存储矩阵数据，然后在render里面更新缓冲区中的矩阵数据，没必要重新创建，毕竟每个缓冲区都会占用GPU显存空间。

const modelMatrixBuffer = device.createBuffer({
    size: 16*4,//旋转矩阵16个元素，每个元素占4个字节
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});

// .create()创建一个单位矩阵
const modelMatrix = glMatrix.mat4.create();
// 在GPU显存上创建一个uniform数据缓冲区
const modelMatrixBuffer = device.createBuffer({
    size: modelMatrix.byteLength,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});

渲染循环函数render每次执行，重新生成对应的绕y轴旋转的矩阵，更新原来uniform缓冲区中的矩阵数据。

//渲染循环
let angle = 0.0;
function render() {
    angle += 0.05;
    const modelMatrix = glMatrix.mat4.create();
    glMatrix.mat4.rotateY(modelMatrix, modelMatrix,angle);
    device.queue.writeBuffer(modelMatrixBuffer, 0, modelMatrix)
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    renderPass.draw(6);
    ...
    requestAnimationFrame(render);
}
render()

绕y旋转矩形平面显示不完整

你会发现上面绕y旋转矩形平面显示不完整，原因很简单，你回顾1.8.WebGPU 3D坐标系(投影) (opens new window)讲解的知识点就会明白。

具体说就是当矩形平面旋转的时候，矩形z的值不在0~1范围的部分被剪裁了。

如果你想看到完整的

//渲染循环
let angle = 0.0;
function render() {
    angle += 0.05;
    const modelMatrix = glMatrix.mat4.create();
    // 每次操作(旋转后，再平移)
    glMatrix.mat4.translate(modelMatrix, modelMatrix,[0,0,0.5]);//后平移，不平移矩形平面会被剪裁掉一半
    glMatrix.mat4.rotateY(modelMatrix, modelMatrix,angle);//先旋转
    device.queue.writeBuffer(modelMatrixBuffer, 0, modelMatrix)
    ...
    const commandEncoder = device.createCommandEncoder();
    ...
    renderPass.draw(6);
    ...
    requestAnimationFrame(render);
}
render()