WEBGL教程Word格式.docx
《WEBGL教程Word格式.docx》由会员分享，可在线阅读，更多相关《WEBGL教程Word格式.docx（37页珍藏版）》请在冰豆网上搜索。
启动Minefield。
打开“about:
config”页面
查找“webgl”
将“webgl.enabled_for_all_sites”的值改为true。
在2010年2月9日，我也建议你
将“dom.ipc.plugins.enabled”设置为false——这将禁用最近添加的一个功能，我发现特别是当你浏览器有一个正在显示PDF文件的不可见标签栏时，它往往导致浏览器死锁。
（感谢VladimirVukićević为此提供了资料。
）
接下来，点击此处尝试一些WebGL网页。
如果他们不工作，可能是你的图形驱动程序不支持OpenGL2.1。
如果是这种情况，你应该尝试更新驱动程序，如果这不起作用，你可以用软件渲染运行WebGL，这种方法明显会比全硬件加速图形卡要慢。
但是这比什么都没有好。
如下是Vladimir使用MESA软件渲染库的方法。
对于那些没有最新的OpenGL驱动或者不能获取驱动的windows用户来说，你可以下载实现OpenGL的Mesa软件的windows版本来进行软件渲染。
它不会很快，但是足以让你明白WebGL是怎么回事和运行一些演示。
为了使用Mesa，请下载webgl-mesa-751.zip，然后将它解压缩在你的电脑上。
它有一个OSMESA32.DLL文件，你需要告知Firefox它的位置：
打开about:
config页面，设置webgl.osmesalib的值为OSMESA32.DLL路径。
如果你将其展开在“C:
temp”，则其值应设为“C:
temposmesa32.dll”。
然后将webgl.software_rendering的值设为true即可。
Safari
记住，Safari只支持运行在Mac电脑雪豹操作系统（OSX10.6）上的WebGL；
如果你工作在豹操作系统（版本10.5）、PC或者linux上，那么你将不得不使用Firefox或者Chromium。
（如果你工作在较早版本的OS/X上，我就不知道你该用什么浏览器了:
-（）
如果你工作在雪豹上，为了使其运行，你需要：
确保你的Safari版本至少为4.0；
下载并安装每日构建的WebKit；
启动终端，运行命令：
com.apple.SafariWebKitWebGLEnabled-boolYES
运行刚安装的WebKit。
（感谢ChrisMarrin为此提供了资料。
接下来，点击此处尝试一些WebGL的网页。
Chromium
目前，Chrome开发人员建议你在Chrome中获取WebGL的方法是使用每日构建的Chromium浏览器，这个开源浏览器是Chrome浏览器的基础。
对于不同的操作系统来说，这个过程有一些不同。
这里提供了针对Windows、Macintosh和
Linux的方法。
（警告:
我自己只尝试了针对windows的方法，但是我得知其他方法也是可用的。
如果有问题，请在下面留言:
-）
对于Windows
进入下载页面，获得chrome-win32.zip
解压缩文件到合适的地方。
打开一个命令窗口，进入你解压缩chrome-win32.zip的目录。
确保您没有运行浏览器
运行以下命令：
chrome.exe--enable-webgl
对于Macintosh
进入下载页面，获得chrome-mac.zip
打开一个终端窗口，进入你解压缩chrome-mac.zip的目录。
确保你没有运行浏览器
./Chromium.app/Contents/MacOS/Chromium--enable-webgl
对于Linux
如果你使用32位Linux，到32位的下载网页获得chrome-linux.zip。
如果你想要一个64位版本，你可以到64位的下载页面，在页面的底部找到最新的build目录，进入并从那里获得chrome-linux.zip。
解压缩文件到合适的地方，进入你解压缩chrome-linux.zip的目录。
确保你没有运行浏览器。
./chromium--enable-webgl
（感谢MohamedMansour为此提供了资料。
一些例子
一旦你安装好浏览器，你应该能够看到WebGL的内容。
这里是一个完整性检查：
WebGL第二课的结果。
你应该看到一个染有红、绿、蓝三色的三角形和一个浅蓝色的正方形。
如果你没有看到正方形和三角形，请在下面留言，我会尽力提供帮助。
如果能看到，那一切就绪！
这里有一些有趣的网页：
来自
Murphy的一个旋转的三维棋盘球体。
我的一个演示：
弹跳曼德尔布罗立方体。
来至谷歌：
一个闪亮的茶壶（点击并拖动旋转它），“SanAngeles”和一些比较炫的粒子效果。
来至IlmariHeikkinen，一个立方螺旋纺纱和基于立方体的画图程序。
来至Pl4n3，一个友好的外来生物...
...一个看起来相当不友好的外来生物的游戏的开始部分。
Copperlicht是一个建立在WebGL上面的高级图书馆，这是他们雷神之锤级别的接口。
一个使用WebGL的真实世界：
ChemDoodle3D在网页上显示分子结构。
来至JacobSeidelin，两个惊人的图形演示一个音乐太阳能系统和WebGL的世界。
一些来至演示场景——喜欢创建令人吃惊小程序的人的WebGL接口：
DagÅ
gren’sportofŘrřola’sPulsdemo、Metatunnel、一个Escher-Droste效果的演示、以及FourdollarPlasticLaminator（最后一个需要几秒钟才可以开始-这是值得等待的！
）。
最后，我看到的第一个WebGL演示（那是2009年9月的事了），但不幸的是现在只支持Firefox：
VladimirVukićević’s的孢子生物（使用鼠标旋转）。
这是我的第一篇关于WebGL入门的文章，如果你想进一步了解如何创建自己的WebGL网页，你可以查阅我的WebGL第一节课。
学习WebGL——第1课一个三角形和一个正方形
欢迎来到WebGL教程的第一课！
这一课以NeHe
OpenGL教程的第二课内容为基础，NeHeOpenGL是一套针对游戏开发人员讲解3D图形技术的流行教程。
本课将向你显示如何在一个网页上绘制一个三角形和一个正方形。
也许它本身并不令人激动，但它却是一个不错的WebGL基础介绍；
如果你理解它是如何工作的，那么剩下的学习将变得很简单......
在支持WebGL的浏览器上运行本课代码显示如下：
如果你已经有了一个支持webGL的浏览器，点击此处你将看到WebGL的实时版；
如果你还没有，从这里你可以获取一个。
更多关于它是如何工作的细节，请看下面......
一点提示：
这些课程是面向那些具有一定编程知识但没有实际3D图形开发经验的开发人员的；
其目的是让你对代码层上发生了什么事有很好的理解，以便你能尽可能快地创建出自己的3D网页。
我一边自学WebGL一边写这个教程，因此有可能（甚至很有可能）有些概念是错误的；
然而，一旦我知道有错误，我就会去修改和纠正它们。
所以，如果你发现什么错误的话，请留言让我知道。
获取这个例子的代码有两种方法：
一种就是当你观看实时版的时候点击“查看源码”的链接，另一种是你从GitHub的代码库获取（包括以后课程的代码）。
对于任一种方式，一旦你获得源码，你就可以用你喜欢的文本编辑器打开并查看它。
即使你已经比较熟悉OpenGL，但是当你初次见到它时，你也会望而生畏。
首先，我们定义一对渲染器，一般认为渲染器相对高级一些。
但是不要害怕，它实际上比它看起来要简单一些。
像大多数程序一样，这个WebGL网页从定义一些下层函数开始，它们被位于网页底部的上层代码调用。
为了解释这个问题，我将按照我的方式从网页底部开始介绍它们。
因此，如果你正在浏览代码，请跳到网页的底部。
你将看到下面的html代码：
bodyonload="
webGLStart（）;
"
>
ahref="
BacktoLesson1
canvasid="
lesson01-canvas"
style="
border:
none;
width="
500"
height="
/body>
这是一个网页完整的body部分，其他的代码是在JavaScript中（如果你是通过“查看源码”方式得到这个代码的话，会看到一些额外用于网站分析的代码，你可以忽略它们）。
显然，我们可以将任何数量的普通HTML标签放入body标签内，并在一个普通网页里创建我们的WebGL图像，但是对于这个简单的演示来说，我们只是得到WebGL以及返回到这个博客帖子的链接。
同时，canvas标签是3D图形放置的地方。
canvas是html5.0的新特性——它允许JavaScript脚本在网页中绘制二维和三维（通过WebGL）元素。
我们不会指定多于canvas标签本身简单布局属性的其他属性，相反，我们将所有WebGL的安装代码放置在一个叫做webGLStart的JavaScript函数中，一旦网页被装载，这个函数就会被调用。
现在让我们向上翻到这个函数，来看一看它：
functionwebGLStart（）{
varcanvas=document.getElementById（"
）;
initGL（canvas）;
initShaders（）;
initBuffers（）;
gl.clearColor（0.0,0.0,0.0,1.0）;
gl.clearDepth（1.0）;
gl.enable（gl.DEPTH_TEST）;
gl.depthFunc（gl.LEQUAL）;
setInterval（drawScene,15）;
}
它调用函数来初始化我们前面提到的WebGL和渲染器，传入前面我们想要绘制三维物体的canvas元素，接着它使用initBuffers函数初始化缓冲区；
缓冲区用来保留我们要绘制的三角形和正方形的细节——稍后我们将更多地谈论此问题。
接下来，它对GL引擎做了一些基本设置，就是说当我们清除画布的时候我们应该使其变黑，以及清除操作应当百分之百的清除掉我们正在绘制的物体。
同时，我们应该做深度测试（以使位于其它物体后面的被绘制物体隐藏在它们前面的物体之后）。
最后，我们使用setInterval函数每隔15毫秒就调用一次drawScene函数。
根据函数名就可以知道，drawScene函数是通过使用缓冲区来绘制物体的。
稍后我们将回到initGL和initShaders函数上，因为它们对于理解网页如何工作是很重要的。
现在让我们先来看看initBuffers和drawScene函数。
vartriangleVertexPositionBuffer;
varsquareVertexPositionBuffer;
我们声明了两个全局变量来保存缓冲区。
（在一个真实的WebGL网页中，你不用对场景中的每一个对象声明一个单独的全局变量，但在这里我们使用它们是为了在第一课中让事情变得简单些
:
接下来：
functioninitBuffers（）{
triangleVertexPositionBuffer=gl.createBuffer（）;
我们为三角形顶点的位置创建一个缓冲区。
顶点是三维空间中定义我们正在绘制的图形的形状的点。
对于三角形，我们有三个这样的点（稍后我们将设置）。
这个缓冲区实际上是图形卡上的内存；
在初始化代码中将顶点位置放置在图形卡上，当重绘时，本质上只是告诉WebGL去“绘制先前我告诉你要绘制的物体”。
这样，我们就可以使代码运行起来十分有效率。
当然，在此例中我们只有三个顶点，将它们绘制到图形卡上不会花费太多的代价——但是当你处理具有成千上万个顶点的大型模型时，用这种方法处理将体现出其真正的优势。
gl.bindBuffer（gl.ARRAY_BUFFER,triangleVertexPositionBuffer）;
这行代码告诉WebGL以下任何在缓冲区上的操作都应该使用我们指定的缓冲区。
这里有一个“当前数组缓冲区”的概念，以及工作在其上的函数，而不是让你自行定义数组缓冲区。
听上去有点奇怪
，但我确信这样做是为了获得良好的性能。
varvertices=[
0.0,
1.0,
0.0,
-1.0,-1.0,
1.0,-1.0,
0.0
];
接下来，我们用一个JavaScript数组定义顶点位置。
可以看到它们位于一个中心为（0，0，0）的等腰三角形的顶点上。
gl.bufferData（gl.ARRAY_BUFFER,newWebGLFloatArray（vertices）,gl.STATIC_DRAW）;
现在，我们创建一个基于这个JavaScript数组的WebGLFloatArray对象，指示WebGL使用它来填充当前的缓冲区，即triangleVertexPositionBuffer。
在后面的课程中我们将更多地谈论WebGLFloatArrays，不过现在你只需知道，它是一种将JavaScript数组转换成某种数据的方法，这种数据我们用来传递给WebGL，以填充其缓冲区。
triangleVertexPositionBuffer.itemSize=3;
triangleVertexPositionBuffer.numItems=3;
最后，我们对缓冲区设置两个新的属性。
WebGL没有内置这两个属性，但是稍后它们将变得非常有用。
一件关于JavaScript的好事情（某些人会说是坏事情）是一个对象不必显式地支持某个你想给它设置的属性。
因此，尽管这个缓冲区对象以前没有itemSize和numItems属性，但是现在它具有了这样的属性。
我们使用它们来表示这个具有9个元素的缓冲区，该缓冲区实际上表示了三个独立的顶点位置（numItems），其中每一个由三个数（itemSize）组成。
我们已经完全设置好了三角形的缓冲区，现在轮到正方形了：
squareVertexPositionBuffer=gl.createBuffer（）;
gl.bindBuffer（gl.ARRAY_BUFFER,squareVertexPositionBuffer）;
vertices=[
1.0,
-1.0,
1.0,-1.0,
-1.0,-1.0,
gl.bufferData（gl.ARRAY_BUFFER,newWebGLFloatArray（vertices）,gl.STATIC_DRAW）;
squareVertexPositionBuffer.itemSize=3;
squareVertexPositionBuffer.numItems=4;
所有这些都很明显——正方形有4个顶点而不是3个，因此数组要大一些而且numItems的值不同。
好了，我们所要做的是将两个对象的顶点位置放置到图形卡上。
现在让我们看看drawScene函数，这个函数是我们使用缓冲区真正绘制我们所看到图形的地方。
让我们一步步来看看它：
functiondrawScene（）{
gl.clear（gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT）;
第一步：
清除画布，以便在画布上绘制图形。
perspective（45,1.0,0.1,100.0）;
此处我们为想要观看的场景设置透视参数。
默认情况下，WebGL将绘制与远端物体同尺寸的近端物体（一种称为正投影的三维类型）。
为了使较远的物体看起来较小，需要告诉它一些正在使用的透视参数。
对于这个场景，我们的（垂直）视野是45°
，画布的宽高比是1:
1，我们不想看到那些距离观察点近于0.1个单位的物体，也不想看到那些距离观察点远于100个单位的物体。
这个perspective
函数十分有用，但它并不内置于WebGL，因此，它在代码中被定义为应用函数。
稍后我将更详细地描述它是如何工作的，但是在不知其细节的情况下也应该清楚如何使用它。
现在我们已经设置好perspective函数，我们可以继续绘制一些物体：
loadIdentity（）;
第一步是“移动”到三维场景的中心。
在OpenGL中，当我们绘制一个场景时，你要告诉它用“当前的”旋转方法在“当前的”位置上绘制每一个物体——因此，例如你说“向前移动20个单位，旋转32度，接着绘制机器人”，这非常有用，因为你能将“绘制机器人”的代码封装在一个函数中，然后，只需在调用函数前改变“平移/旋转”参数，就能轻松绘制机器人。
当前的位置和旋转信息放在一个矩阵中；
正如你可能在学校了解的一样，矩阵可以表示平移（从一个位置到另一个位置的移动），旋转和其他几何变换。
现在我不想讲得太多，你可以用一个4×
4（不是3×
3）的矩阵来表示三维空间的任何变换；
你从单位矩阵开始——这种矩阵表示一种什么都不做的变换——，用第一个变换矩阵与之相乘，接着乘以第二个变换矩阵，以此类推。
合并后的矩阵在一个变换中表示了所有的变换。
我们使用的这个矩阵表示了模型视图矩阵的当前平移/旋转状态，现在你可能已经编制好了loadIdentity函数，该函数将模型视图矩阵转换为单位矩阵，我们可以将其相乘并旋转以得到它。
换句话说，它使我们从一个原始的点出发，开始绘制三维世界。
细心的读者可能会发现，一开始我讨论矩阵的时候说的是“在OpenGL中”而不是“在WebGL中”。
这是因为像perspective函数一样，WebGL没有内置这样的函数；
我们不得不自己实现它，或者拷贝一个已经实现好的应用函数。
再说一下，我稍后将详细地解释这些应用函数是如何工作的，不过你在不了解其细节的情况下也能使用它们。
让我们看一看绘制在画布左边的三角形的代码。
mvTranslate（[-1.5,0.0,-7.0]）;
loadIdentity函数使其移动到三维空间的中心。
我们通过向左移动1.5个单位（即沿着X轴的负方向）和向场景中移动7个单位（即远离观察者的方向，也就是沿着Z轴的负方向）开始绘制三角形。
（正如你可能猜到的一样，mvTranslate函数通过模型视图矩阵乘以一个带有下列参数的变换矩阵做了一次底层变换。
下一步真正开始绘制图形了！
gl.vertexAttribPointer（shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0）;
因此，你要记住为了使用其中的一个缓冲区，我们将调用gl.bindBuffer函数来指定一个当前的缓冲区，接着调用在缓冲区执行的代码。
我们选择triangleVertexPositionBuffer来告诉WebGL哪些值应该被用于顶点位置。
稍后我将更多地解释其如何工作；
现在，你能看到我们正在使用itemSize属性，该属性是我们设置在缓冲区上用来告诉WebGL缓冲区的每项有3个数大小。
接下来我们使用
setMatrixUniforms（）;
告诉WebGL考虑当前的模型视图矩阵（以及投影矩阵，稍后有详细的解释）。
这是必须的，因为WebGL没有内置这个矩阵的参数，但是这些都发生在JavaScript私有域中。
setMatrixUniforms把矩阵参数传到图形卡。
一旦完成这个函数，WebGL将要处理一组被看做是顶点位置和关于我们矩阵的数值。
下一步是告诉WebGL怎么处理这些数值：
gl.drawArrays（gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems）;
从顶点数组的第0项开始一直到第numItems个元素，将顶点数组绘制成三角形。
一旦这个过程结束，WebGL就绘制好了三角形。
下一步，我们来绘制正方形：
mvTranslate（[3.0,
升级会员 