9
它调用函数来初始化我们前面提到的 和渲染器,传入前面我们想要绘制三维物体
的 canvas 元素,接着它使用 &.! 函数初始化缓冲区;缓冲区用来保留我们要绘
制的三角形和正方形的细节——稍后我们将更多地谈论此问题。接下来,它对 引擎做
了一些基本设置,就是说当我们清除画布的时候我们应该使其变黑,以及清除操作应当百
分之百的清除掉我们正在绘制的物体。同时,我们应该做深度测试(以使位于其它物体后
面的被绘制物体隐藏在它们前面的物体之后)。最后,我们使用 !( 函数每隔 +8
毫秒就调用一次 # 函数。根据函数名就可以知道,# 函数是通过使
用缓冲区来绘制物体的。
稍后我们将回到 和 #! 函数上,因为它们对于理解网页如何工作是很重
要的。现在让我们先来看看 &.! 和 # 函数。
$:;1!&.-
!<:;1!&.-
我们声明了两个全局变量来保存缓冲区。(在一个真实的 网页中,你不用对场景
中的每一个对象声明一个单独的全局变量,但在这里我们使用它们是为了在第一课中让事
情变得简单些 =,
接下来:
&.!
$:;1!&."$&.-
我们为三角形顶点的位置创建一个缓冲区。顶点是三维空间中定义我们正在绘制的图形的
形状的点。对于三角形,我们有三个这样的点(稍后我们将设置)。这个缓冲区实际上是
图形卡上的内存;在初始化代码中将顶点位置放置在图形卡上,当重绘时,本质上只是告
诉 去“绘制先前我告诉你要绘制的物体”。这样,我们就可以使代码运行起来十分
有效率。当然,在此例中我们只有三个顶点,将它们绘制到图形卡上不会花费太多的代价
——但是当你处理具有成千上万个顶点的大型模型时,用这种方法处理将体现出其真正的
优势。
$#&.$7>>7?3&644%>0$:;1!&.-
这行代码告诉 以下任何在缓冲区上的操作都应该使用我们指定的缓冲区。这里有
一个“当前数组缓冲区”的概念,以及工作在其上的函数,而不是让你自行定义数组缓冲区
听上去有点奇怪