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

时间:2021-08-28 10:43:51

一、前言

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

二、正文

       Example1: 复合变换

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

  1. Matrix4.setIdentity(): 将Matrix4实例化为单位矩阵
  2. Matrix4.setTranslate(x,y,z): 将Matrix4实例设置为平移变换矩阵,在x轴平移距离为x,在y轴平移距离为y,在z轴平移距离为z;
  3. Matrix4.setScale(x,y,z): 将Matrix4实例设置为缩放变换矩阵,缩放因子分别为x,y,z;
  4. Matrix4.setRotate(angle,x,y,z): 将Matrix4实例设置为旋转变换矩阵,角度为angle,旋转轴为(x,y,z);
  5. Matrix4.translate(x,y,z): 将Matrix4实例本身乘以一个平移变换矩阵;
  6. Matrix4.rototate(angle,x,y,z): 将Matrix4实例本身乘以一个旋转变换矩阵;
  7. Matrix4.scale(x,y,z): 将Matrix4实例本身乘以一个缩放变换矩阵;
  8. Matrix4.set(m): 将Matrix4设置为m;
  9. Matrix4.elements: 类型化数组包含了Matrix4实例的矩阵元素;
var modelMatrix = new Matrix4();
modelMatrix.setRotate(ANGLE,,,);
modelMatrix.translate(Tx,,); ... ... 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 %= ;
}

三、结尾

      下周日继续更新第五章。

相关文章