欢迎来到WebGL教程第三课。这次我们将学习如何移动物体。本课基于NeHe OpenGL教程的第4课。
如果你的浏览器已经支持WebGL,请点击此处,你将看到本课WebGL的现场版;如果不支持,你从此处可以获取一个支持WebGL的浏览器。
一点提示:这些课程是面向那些具有一定编程知识但没有实际3D图形开发经验的开发人员的;其目的是让你对代码层上发生了什么事 有很好的理解,以便你能尽可 能快地创建出自己的3D网页。如果你还没看过第一课和第二课的话,你应该在开始本课之前看 看它们。因为我在这里仅仅解释与第二课代码的不同之处和一些新的代码。
同之前的课程一样,本课也可能存在一些缺陷和错误概念。如果你发现有什么不对的话,请留言让我知道,我会纠正它。
获取这个例子的代码有两种方法:一种就是当你观看实时版的时候点击“查看源码”的链接,另一种是你从 GitHub的代码库获取(包括 以后课程的代码)。对于任一种方式,一旦你获得源码,你就可以用你喜欢的文本编辑器打开并查看它。
在讲解代码之前,我要澄清一件事。在webGL中制作3D场景的动画是十分容易的——你只需重复地绘制该场景,每次都把它绘制 得不一样。这对许多读者来说也许是一件显而易见的事,但当我开始学习webGL时,对此却有点惊讶。可能对于那些第一次使用webGL绘制3D图形的人来 说也有点吃惊吧。起初让我困惑的原因是,我想象它应该使用更高级的抽象方法,即它应该这样运行:“告诉3D系统有一个正方形在点X处(我起初绘制它的地方),接着移动这个正方形,告诉3D系统该正方形已经移动到了点Y处。”然而事实是:“你告诉3D系统有一个正方形在点X处,接着在下次绘制它时,告诉系 统它在点Y处,再下一次它在点Z处”,以此类推。
我希望上面这段话至少能让部分人有一个更加清晰的概念(如果它让人迷惑的话,请留言给我,我将删除它:-)
由于到目前为止我们的示例代码一直使用drawScene函数来绘 制物体,并一直使用如下代码:
setInterval(drawScene, 15);
来告诉JavaScript每隔15ms就调用一次drawScene函 数,为了制作场景动画并让三角形和正方形移动,我们所需要做的就是改变此处代码以便每次调用drawScene函数时,它绘制的物体略有不同。
这意味着我们对第二课中的代码改动最大地方在drawScene函数中,因此让我们就从这里(大约在index.html文件三分之二的地方)开始吧。第一件需要注意的事就是在函数声明之前,我们要定义两个新的全局变量。
var rTri = 0;
var rSquare = 0;
这两个变量分别用来 跟踪三角形和正方形的旋转。它们都从0度开始旋转,然后角度将随时间增加——稍后你将看到如何进行——,从而渐渐旋转(提示:在一个三维程序中像这样使用 全局变量并不是很好的应用。我将在第九课中使用一种更合适的方式来构造程序。)
对drawScene函数的另一个改变在我们绘制三角形的点。我将通过上下文的方式来介绍绘制三角形的所有代码,新添加的代码用红色标示:
perspective(45, gl.viewportWidth / gl.viewportHeight,0.1, 100.0);
loadIdentity();
mvTranslate([-1.5, 0.0, -7.0])
mvPushMatrix();
mvRotate(rTri, [0, 1, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0,triangleVertexPositionBuffer.numItems);
mvPopMatrix();
为了解释这些代码,让我们回到第一课。在那里,我曾经说过:在OpenGL中,当我们绘制一个场景时,你要告诉它用“当前 的”旋转方法在“当前的”位置上绘制每一个物体——因此,例如你说“向前移动20个单位,旋转32度,接着绘制机器人”,这非常有用,因为你能将“绘制机器人”的代码封装在一个函数中,然后,只需在调用函数前改变“平移/旋转”参数,就能轻松绘制机器人。
你应该记得这个当前状态存储于一个模型视图矩阵中。考虑到这点,下面这个函数调用的目的是十分显而易见的:
mvRotate(rTri, [0, 1, 0]);
改变存储在模型视图矩阵中的当前旋转状态,围绕垂直轴(通过第二个矢量参数指定)旋转rTri度。这意味着绘制三角形时,三角形将被旋转rTri度。mvRotate函数就像我们在第一课中看到的mvTranslate函数一样使用JavaScript编写——稍后我们再来看它。
那么,mvPushMatrix和mvPopMatrix这两个函数又是做什么的呢?通过函数名,你可能会猜到他们也和模型视图矩阵有关。回到先前绘制机器人的那个例子,处在最高层的代码需要移至A点,绘制机器人,接着从A点做些偏移并绘制一个茶壶。绘制机器 人的代码可能会给模型视图矩阵带来各种各样的变化;它可能从机器人的身体开始绘制,然后向下移动到腿部,接着向上移动到头部,最后绘制完胳膊。问题是如果你在绘制完机器人之后试图移动至偏移点,那此时的移动不是相对于A点,而是相对于最后绘制的点。这就意味着如果机器人抬起了它的胳膊,那么茶壶的位置也将向上移动。这可不是什么好事情。
现在需要做的,是在你开始绘制机器人之前将模型视图矩阵的状态存储起来,之后再将其恢复。当然,这就是mvPushMatrix和mvPopMatrix这两个函数所做的事情。mvPushMatrix将矩阵放入一个堆栈,而 mvPopMatrix放弃当前矩阵并从堆栈顶部取出一个矩阵,然后恢复其状态。使用堆栈意味着我们可以嵌套任意多层的绘图代码,每层对模型视图矩阵进行操作,然后再将其恢复。因此,一旦绘制好旋转的三角形,我们应该用mvPopMatrix来恢复模型视图矩阵,所以代码如下:
mvTranslate([3.0, 0.0, 0.0]);
...在一个非旋转的参考帧中移动整个场景。(如果对此仍然不是很清楚的话,我建议你拷贝该代码并移除push/pop代码看看会发生什么,然后再重新运行它,不同的效果很快就会显现)
因此,对代码的这三处改变将使得三角形围绕垂直轴的中心旋转,但并不影响正方形。同样也有三行类似的代码使得正方形围绕水平轴的中心旋转。
mvPushMatrix();
mvRotate(rSquare, [1, 0, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0,squareVertexPositionBuffer.numItems);
mvPopMatrix();
}
... 以上就是drawScene函数所有变动的地方。
显然,为了将场景制作成动画我们还需要做另一件事,这就是随时间的变化而改变rTri和 rSquare的数值,以使每次绘制的场景略有不同。我们使用animate函数来做到这一点,它就像drawScene函数一样每隔一段时间就被调用一次。其代码如下:
var lastTime = 0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime;
rTri += (90 * elapsed) / 1000.0;
rSquare += (75 * elapsed) / 1000.0;
}
lastTime = timeNow;
}
一种制作场景动画的简单方法是在每次调用animate时增加固定值(这也是我编写本教程所参考的的原始教程所使用的方法),但在这里我将使用一种我认为比较好的方法:用距离函数上次被调用的时间长短来决定一个物体旋转多少。特别地,三角形每秒旋转90度,正方形每秒旋转75度。这样做的好处是:无论你们的机器有多快,大家在场景中看到的都是相同的移动速度;只是在较慢的机器上图像会发生抖动。这对于像本例这样一个简单演示并不重要,但是对于像游戏或类似的应用就比较重要了。
接下来的变化是我们必须每隔一段时间有规律地调用animate,就像对drawScene所做的那样。我们创建一个名为tick的新函数,该函数用来调用 这两个函数并且自身每隔15毫秒被调用一次。
function tick() {
drawScene();
animate();
}
function webGLStart() {
var canvas =document.getElementById("lesson03-canvas");
initGL(canvas);
initShaders();
initTexture();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
setInterval(tick, 15);
}
这就是在绘制并制作场景动画代码中所有变动的地方。现在,让我们来看看需要添加的代码。首先是mvPushMatrix和mvPopMatrix:
var mvMatrixStack = [];
function mvPushMatrix(m) {
if (m) {
mvMatrixStack.push(m.dup());
mvMatrix = m.dup();
} else {
mvMatrixStack.push(mvMatrix.dup());
}
}
function mvPopMatrix() {
if (mvMatrixStack.length == 0) {
throw "Invalid popMatrix!";
}
mvMatrix = mvMatrixStack.pop();
return mvMatrix;
}
这里并没有什么令人吃惊的地方。我们用一个列表来保留矩阵堆栈并适当地定义push和pop。
现在,来看看mvRotate函数:
function mvRotate(ang, v) {
var arad = ang * Math.PI / 180.0;
var m = Matrix.Rotation(arad, $V([v[0], v[1],v[2]])).ensure4x4();
multMatrix(m);
}
创建一个矩阵用以表示旋转的所有困难工作通过Sylvester库来完成——这非常简单。
- 大小: 1.9 KB
分享到:
相关推荐
ysoserial是一个用于生成利用不安全的Java对象反序列化的有效负载的概念验证工具。它包含一系列在常见Java库中发现的"gadget chains",可以在特定条件下利用执行不安全的反序列化操作的Java应用程序。ysoserial项目最初在2015年AppSecCali会议上提出,包含针对Apache Commons Collections(3.x和4.x版本)、Spring Beans/Core(4.x版本)和Groovy(2.3.x版本)的利用链
1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2530上运行,如果是其他型号芯片,请自行移植。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、例程具有一定专业性,非专业人士请谨慎操作。
YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;
**Oracle 10g DBA学习手册:安装Oracle和构建数据库** **目的:** 本章节旨在指导您完成Oracle数据库软件的安装和数据库的创建。您将通过Oracle Universal Installer (OUI)了解软件安装过程,并学习如何利用Database Configuration Assistant (DBCA)创建附加数据库。 **主题概览:** 1. 利用Oracle Universal Installer (OUI)安装软件 2. 利用Database Configuration Assistant (DBCA)创建数据库 **第2章:Oracle软件的安装与数据库构建** **Oracle Universal Installer (OUI)的运用:** Oracle Universal Installer (OUI)是一个图形用户界面(GUI)工具,它允许您查看、安装和卸载机器上的Oracle软件。通过OUI,您可以轻松地管理Oracle软件的安装和维护。 **安装步骤:** 以下是使用OUI安装Oracle软件并创建数据库的具体步骤:
消防验收过程服务--现场记录表.doc
数据库管理\09-10年第1学期数据库期末考试试卷A(改卷参考).doc。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。
YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;
职业暴露后的处理流程.docx
Java Web开发短消息系统
项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7
这是一款可以配置过滤目录及过滤的文件后缀的工具,并且支持多个项目同时输出导出,并过滤指定不需要导出的目录及文件后缀。 导出后将会保留原有的路径,并在新的文件夹中体现。
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
YOLO算法-挖掘机与火焰数据集-7735张图像带标签-挖掘机.zip
操作系统实验 Ucore lab5
IMG_5950.jpg
竞选报价评分表.docx
java系统,mysql、springboot等框架
1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2530上运行,如果是其他型号芯片,请自行移植。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、例程具有一定专业性,非专业人士请谨慎操作。
YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;
内容概要:本文详细讲解了搜索引擎的基础原理,特别是索引机制、优化 like 前缀模糊查询的方法、建立索引的标准以及针对中文的分词处理。文章进一步深入探讨了Lucene,包括它的使用场景、特性、框架结构、Maven引入方法,尤其是Analyzer及其TokenStream的实现细节,以及自定义Analyzer的具体步骤和示例代码。 适合人群:数据库管理员、后端开发者以及希望深入了解搜索引擎底层实现的技术人员。 使用场景及目标:适用于那些需要优化数据库查询性能、实施或改进搜索引擎技术的场景。主要目标在于提高数据库的访问效率,实现高效的数据检索。 阅读建议:由于文章涉及大量的技术术语和实现细节,建议在阅读过程中对照实际开发项目,结合示例代码进行实践操作,有助于更好地理解和吸收知识点。