WebGL高级变换与动画基础

小白啥时候能进阶成功

已于 2024-05-20 15:20:27 修改

阅读量855

点赞数 20

文章标签： webgl

于 2024-04-30 16:47:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34754747/article/details/138347839

版权

这篇博客探讨了WebGL中的变换与动画基础。首先介绍了如何利用cuon-matrix.js库进行平移和旋转的矩阵变换，包括平移矩阵的创建和复合变换的应用。接着，文章讲解了如何实现动画，通过设置颜色、创建矩阵和获取位置来让三角形连续旋转，并详细阐述了requestAnimationFrame()方法在现代浏览器中的作用，以实现高效的动画更新并减少资源消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、平移+旋转

1.1 矩阵变换库cuon-matrix.js

OpenGL提供了一系列有用的函数来帮助我们创建变换矩阵。例如，通过调用glTranslate()函数并传入在X,Y,Z轴上的平移距离，就可以创建一个平移矩阵。

glTranslatef(5,80,30) ==》

WebGL没有提供类似的矩阵函数，因此，如果想要使用它们，就得自己编写，或使用别人编好的(开源的)。例如：矩阵变换库：cuon-matrix.js

（WebGL-Programming-Guide/lib at master · hushhw/WebGL-Programming-Guide · GitHub）

Matrix4是矩阵库提供的新类型，Matrix4对象表示一个4*4的矩阵，该对象内部使用类型化数组Float32Array来存储矩阵的元素。

示例：

//顶点着色器程序
var VSHADER_SOURCE = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main(){
    gl_Position = u_xformMatrix * a_Position;
    gl_PointSize = 10.0;
}
`;
//片元着色器程序
var FSHADER_SOURCE = `
precision mediump float;
uniform vec4 u_FragColor;//uniform变量
void main(){
    gl_FragColor = u_FragColor;//设置颜色
}`

function main() {
    //获取<canvas>元素
    var canvas = document.getElementById('myCanvas');
    if (!canvas) {
        console.log("failed to retrieve the canvas element");
        return;
    }
    //获取WebGL的绘图上下文
    var gl = canvas.getContext('webgl');
    if (!gl) {
        console.log("failed to get webgl context");
        return;
    }
    //初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log("failed to initialize shaders");
        return;
    }
    //*************设置顶点位置start***************/
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log("failed to set the positions of the vertices");
        return;
    }

最低0.47元/天解锁文章