WebGL编程指南笔记-第四章高级变换与动画基础

最新推荐文章于 2024-09-28 07:49:34 发布

ACE0220

最新推荐文章于 2024-09-28 07:49:34 发布

阅读量304

点赞数

分类专栏： WebGL编程指南学习文章标签： web javascript 前端 html5 图形渲染

本文链接：https://blog.csdn.net/havenzeng555/article/details/125448104

版权

本文深入探讨WebGL中的高级变换，包括平移、旋转的复合变换，以及如何利用矩阵库创建动画。通过示例代码解释了变换矩阵的组合和动画的基础，强调了矩阵乘法顺序对结果的影响，并展示了使用requestAnimationFrame()实现图形的平滑旋转动画。

摘要由CSDN通过智能技术生成

第四章高级变换与动画基础

本章内容

第三章中学了利用缓冲区对象绘制三角形，图形变换的原理，利用矩阵简化变换操作等。

本章中进一步研究变换矩阵，在此基础制作一些简单的动画效果，具体内容包括：

学习使用一个矩阵变换库，库中封装了矩阵运算的数学细节
快速上手矩阵库，对图形进行复合变换
利用矩阵库，实现简单的动画效果。

本章内容是复杂的WebGL程序的基础。

平移，然后旋转

上一张最后的综合练习中，已经通过变换矩阵实现了平移和旋转，通过综合练习切入矩阵函数库的学习。

矩阵变换库

先举个例，在opengl中glTranslate()函数并传入x, y, z上的平移距离，就可以创建一个平移矩阵

在这里插入图片描述

但是在webgl中，没有提供类似的函数库。接下来开始学习使用书中提供的矩阵函数库

示例程序（RotatedTriangle_Matrix4.js）

示例代码：RotatedTriangle_Matrix4.js

旧的创建方式，我们要自己去编写变换矩阵，位于代码的29～40行，和52行

新的创建方式，使用书中提供的Matrix库，位于代码的42～46行，和54行

在这里插入图片描述

在新的创建方式中，通过简单三句代码就可以创建好变换矩阵和将数据传入着色器

// 通过new Matrix4()创建一个Matrix4类型的对象
var xformMatrix = new Matrix4();
// 通过setRotate()把自身设为计算出的旋转矩阵
// 函数的接收的参数分别为：旋转角(角度制，库的内部会转为弧度制)，旋转轴x, y, z，示例代码是围绕着z轴旋转的，所以传入的是(0, 0, 1);
xformMatrix.setRotate(ANGLE, 0, 0, 1);
......
// Matrix4