WEBGL教程

尝试WebGL的第一步就是让浏览器支持它。现在，这意味着你必须使用特殊的预览发布版本，因为它甚至还不是测试版。幸运的是，这非常容易！WebGL不能运行在我所知道的任何版本的InternetExplorer上，但对于其他三大主流浏览器，情况如下：Firefox：WebGL工作在Windows、MacOSX和Linux中每日构建（NightlyBuild,也叫DailyBuild)，是将一个软件项目的所有最新代码取出,从头开始编译，链接，运行测试软件包对代码进行单元测试并对主要功能进行测试，发现错误并报告错误的完整过程。——译者注）的Firefox开发版上。点击此处了解如何安装支持WebGL的Firefox。如果你使用PC机，建议用Firefox。Safari：Safari的WebKit核心支持WebGL，但只针对Mac电脑的雪豹操作系统（即OSX10.6）（它曾工作在版本10.5——又名豹操作系统——上，但遗憾的是现在不再被支持了）。如果你在使用雪豹操作系统，我建议你选择Safari；如果你仍旧使用豹操作系统，我建议你使用Chromium或Minefield。点击此处了解如何安装支持WebGL的Safari。Chrome：在Chrome上尝试WebGL的最佳方式是使用每日构建的多个Chromium浏览器版本之一，Chromium开源项目是Chrome的基础。点击此处了解如何获取可在Chromium上运行的WebGL。Firefox“不稳定的”Firefox开发版叫做Minefield。它每天更新，实际上现在相当稳定：在设置上有一个小调整，最近我还没有看见它崩溃（我使用它做一切事情）。同时也可以安装一个普通版本的Firefox。因此，如果你不想用它或者只是想切换回普通版本一段时间，你不必去卸载。获取Minefield：登陆到每日构建网页上去获取与你电脑匹配的版本。安装它（当你安装时，你需要退出所有正在运行的Firefox实例）。启动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的内容。这里是一个完整性检查：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教程的第一课！这一课以NeHeOpenGL教程的第二课内容为基础，NeHeOpenGL是一套针对游戏开发人员讲解3D图形技术的流行教程。本课将向你显示如何在一个网页上绘制一个三角形和一个正方形。也许它本身并不令人激动，但它却是一个不错的WebGL基础介绍；如果你理解它是如何工作的，那么剩下的学习将变得很简单......在支持WebGL的浏览器上运行本课代码显示如下：如果你已经有了一个支持webGL的浏览器，点击此处你将看到WebGL的实时版；如果你还没有，从这里你可以获取一个。更多关于它是如何工作的细节，请看下面......一点提示：这些课程是面向那些具有一定编程知识但没有实际3D图形开发经验的开发人员的；其目的是让你对代码层上发生了什么事有很好的理解，以便你能尽可能快地创建出自己的3D网页。我一边自学WebGL一边写这个教程，因此有可能（甚至很有可能）有些概念是错误的；然而，一旦我知道有错误，我就会去修改和纠正它们。所以，如果你发现什么错误的话，请留言让我知道。获取这个例子的代码有两种方法：一种就是当你观看实时版的时候点击“查看源码”的链接，另一种是你从GitHub的代码库获取（包括以后课程的代码）。对于任一种方式，一旦你获得源码，你就可以用你喜欢的文本编辑器打开并查看它。即使你已经比较熟悉OpenGL，但是当你初次见到它时，你也会望而生畏。首先，我们定义一对渲染器，一般认为渲染器相对高级一些。但是不要害怕，它实际上比它看起来要简单一些。像大多数程序一样，这个WebGL网页从定义一些下层函数开始，它们被位于网页底部的上层代码调用。为了解释这个问题，我将按照我的方式从网页底部开始介绍它们。因此，如果你正在浏览代码，请跳到网页的底部。你将看到下面的html代码：bodyonload=webGLStart();ahref==28BacktoLesson1canvasid=lesson01-canvasstyle=border:none;width=500height=500ahref==28BacktoLesson1/body这是一个网页完整的body部分，其他的代码是在JavaScript中（如果你是通过“查看源码”方式得到这个代码的话，会看到一些额外用于网站分析的代码，你可以忽略它们）。显然，我们可以将任何数量的普通HTML标签放入body标签内，并在一个普通网页里创建我们的WebGL图像，但是对于这个简单的演示来说，我们只是得到WebGL以及返回到这个博客帖子的链接。同时，canvas标签是3D图形放置的地方。canvas是html5.0的新特性——它允许JavaScript脚本在网页中绘制二维和三维（通过WebGL）元素。我们不会指定多于canvas标签本身简单布局属性的其他属性，相反，我们将所有WebGL的安装代码放置在一个叫做webGLStart的JavaScript函数中，一旦网页被装载，这个函数就会被调用。现在让我们向上翻到这个函数，来看一看它：functionwebGLStart(){varcanvas=document.getElementById(lesson01-canvas);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函数初始化缓冲区；缓冲区用来保留我们要绘制的三角形和正方形的细节