【WebGL】《WebGL编程指南》读书笔记——第四章

2021-05-20 04:28

阅读：810

标签：ati 编程指南 ide 动画旋转执行缩放 current 单位

一、前言

今天继续第四章的学习内容，开始学习复合变换的知识。

二、正文

Example1: 复合变换

在书中，作者为我们封装了一套用于变换的矩阵对象：Matrix4对象。它包含以下几种方法：

Matrix4.setIdentity(): 将Matrix4实例化为单位矩阵
Matrix4. setTranslate(x,y,z): 将Matrix4实例设置为平移变换矩阵，在x轴平移距离为x，在y轴平移距离为y，在z轴平移距离为z;
Matrix4.setScale(x,y,z): 将Matrix4实例设置为缩放变换矩阵，缩放因子分别为x,y,z;
Matrix4.setRotate(angle,x,y,z): 将Matrix4实例设置为旋转变换矩阵，角度为angle，旋转轴为(x,y,z);
Matrix4.translate(x,y,z): 将Matrix4实例本身乘以一个平移变换矩阵；
Matrix4.rototate(angle,x,y,z): 将Matrix4实例本身乘以一个旋转变换矩阵；
Matrix4.scale(x,y,z): 将Matrix4实例本身乘以一个缩放变换矩阵；
Matrix4.set(m): 将Matrix4设置为m;
Matrix4.elements: 类型化数组包含了Matrix4实例的矩阵元素；

var modelMatrix = new Matrix4();
modelMatrix.setRotate(ANGLE,0,0,1);
modelMatrix.translate(Tx,0,0);

... ...

gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);

Example2: 动画

requestAnimationFrame(func): 请求浏览器在将来某时刻回调函数func以完成重绘。我们应当在回调函数最后再次发起该请求。

var tick = function() {
    currentAngle = animate(currentAngle);  // Update the rotation angle
    draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);   // Draw the triangle
    requestAnimationFrame(tick, canvas); // Request that the browser calls tick
};
tick();

由于浏览器执行Tick()的时间是不可控的，我们需要让三角形匀速的旋转，那么就需要控制时间：

var g_last = Date.now();
function animate(angle) {
  // Calculate the elapsed time
  var now = Date.now();
  var elapsed = now - g_last;
  g_last = now;
  // Update the current rotation angle (adjusted by the elapsed time)
  var newAngle = angle + ANGLE_STEP * (elapsed / 1000.0);
  return newAngle %= 360;
}

三、结尾

下周日继续更新第五章。

【WebGL】《WebGL编程指南》读书笔记——第四章

标签：ati 编程指南 ide 动画旋转执行缩放 current 单位

原文地址：http://www.cnblogs.com/lovecsharp094/p/7709654.html

上一篇：php设计模式之适配器模式

下一篇：css入门5—BFC

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【WebGL】《WebGL编程指南》读书笔记——第四章
文章链接：http://soscw.com/index.php/essay/87846.html

亲，登录后才可以留言！

【WebGL】《WebGL编程指南》读书笔记——第四章

评论

热门文章

推荐文章

最新文章

置顶文章