【WebGL】《WebGL编程指南》读书笔记——第4章
2017-10-22 15:26
447 查看
一、前言
今天继续第四章的学习内容,开始学习复合变换的知识。
二、正文
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编程指南》读书笔记——第5章
- 【WebGL】《WebGL编程指南》读书笔记——第2章
- 【WebGL】《WebGL编程指南》读书笔记——第3章
- 【WebGL】《WebGL编程指南》读书笔记——第6章
- 《Python 编程快速上手 — 让繁琐工作自动化》读书笔记之【第4章 列表】
- 《Unix环境高级编程》读书笔记 第4章-文件和目录
- 读书笔记_代码大全_第4章_关键的“构建”决策
- 《从0到1》读书笔记第4章“竞争意识”第2记:一块猪肉引发的竞争论
- 《TCP/IP详解卷1:协议》第4章 ARP:地址解析协议-读书笔记
- 《JavaScript高级程序设计》 - 读书笔记 - 第4章 变量、作用域和内存问题
- 【读书笔记】软件测试的艺术第4章
- 【读书笔记】TCP/IP网络编程 第4章 回声
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(6-改变点的颜色))
- 《权力》读书笔记,第4章 成为最引人注目的那一个
- 《Essential Guide》读书笔记【3】【第4章】
- UML用户指南第二版-读书笔记-第4章-类
- 机器学习实战---读书笔记: 第4章 基于概率论的分类而方法:朴素贝叶斯
- 软件工程-读书笔记(第4章)
- 【读书笔记】Spring实战(第4章 面向切面的Spring)
- 《Effective C++》第4章 设计与声明(1)-读书笔记