第1节WebGL概述.docx
《第1节WebGL概述.docx》由会员分享，可在线阅读，更多相关《第1节WebGL概述.docx（15页珍藏版）》请在冰豆网上搜索。
第1节WebGL概述
第1章WebGL概述
2007年，软件工程师VladimirVukicevic针对HTML
2011年3月，VladimirVukicevic与KronosGroup（OpenGL幕后的一家非营利组织）联手推出了WebGL标准，该规范使得互联网浏览器可对图形处理单元（GPU）予以访问。
WebGL源自OpenGLES2.0（ES是指嵌入式系统），即某些移动设备上的OpenGL规范，如Apple公司所研制的iPhone和iPad。
在随后的发展过程中，该规范逐渐脱离于最初的既定目标，即提供不同操作系统以及设备之间的可移植性。
对于3D Web环境，如视频游戏、专业的可视化领域以及医学成像，基于Web的实时渲染理念则提供了更为广阔的天地。
除此之外，考虑到Web浏览器的普及性，移动设备也可视为一类重要的应用平台，其中包括智能手机和平板电脑。
若计划打造一款Web视频游戏、构建虚拟3D可视环境、实现数据可视化操作，或者是生成想象中的3D应用程序，则需要首先了解开发环境是否可满足当前的需求。
本章内容包含以下要点：
❑理解Web应用程序结构。
❑设置绘制区域（即canvas）。
❑理解WebGL的状态机机制。
❑调整WebGL变量以修改当前场景环境。
❑加载并检测全功能场景环境。
1.1系统需求
WebGL可视为一类3DWeb图形API，因而无须执行安装步骤，但应提供以下一种互联网浏览器。
❑Firefox4.0浏览器（或以上版本）。
❑GoogleChrome11浏览器（或以上版本）。
❑Safari浏览器（OSX 10.6或以上版本）。
默认状态下，Safari禁用WebGL，读者可查看Developer菜单并选取WebGL选项。
❑Opera12浏览器（或以上版本）。
为了获得WebGL所支持的互联网Web浏览器更新列表，读者可访问KhronosGroup网站，对应网址为http:
//www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation。
除此之外，读者还应在自己的机器设备上配有图形卡。
同时，还可进一步访问http:
//get.webgl.org/以获取WebGL所支持的环境配置。
1.2WebGL提供的渲染类型
WebGL定义为一个3D图形库，并以标准、高效的方式支持互联网浏览器的3D场景渲染操作。
根据维基百科中所描述的内容，渲染操作可视为源自模型的图像生成过程，并通过计算机程序予以实现。
由于该过程可表示为计算机处理行为，因而存在多种方式生成此类图像。
差别一体现于是否需要使用特定的图形硬件。
对于软件渲染，3D场景所需计算均在CPU中执行；相应地，硬件渲染则是指图形处理单元（GPU）以实时方式执行3D图形计算。
从技术视角来看，由于硬件负责某些专属操作，因而与软件渲染相比，其行为更加高效。
鉴于独立于硬件支持，因而软件渲染方案应用范围较大。
差别二是指渲染处理过程出现于本地端或远程端。
若渲染图像过于复杂，则渲染器通常位于远程一端，如3D动画电影，复杂图像通常由配以大量硬件资源的服务器负责渲染，即服务器渲染。
相反，若渲染过程出现于本地，则该过程称作客户端渲染。
WebGL采用了客户端渲染方案，3D场景素材通过服务器下载，但图像处理过程依赖于客户端的图形硬件并在本地予以执行。
与其他技术相比（如Java3D、Flash以及UnityWebPlayerPlugin），WebGL具有以下优点。
❑JavaScript编程机制。
对于Web开发人员以及互联网Web浏览器，JavaScript可视为相对自然的程序设计语言，并支持DOM访问。
除此之外，JavaScript还可方便地在各元素间进行通信。
由于WebGL在JavaScript中进行编程，因而可方便地与其他JavaScript库以及HTML5技术进行整合。
❑自动内存管理。
在OpenGL以及其他相关技术中，读者需手工分配或释放内存空间，而WebGL无须执行此项操作。
WebGL遵循变量作用域规则，并在必要时自动释放内存空间。
这简化了程序设计过程，并降低了代码的书写量，进而使程序易于理解。
❑性能问题。
WebGL程序的性能可与独立的应用程序相媲美，这一切均归功于WebGL的本地图形硬件访问能力。
当前，多数3DWeb渲染技术均采用软件渲染方案。
❑零编译。
由于WebGL于JavaScript中实现，因而在运行前无须进行编译，并可实现即时调整。
据此，读者可尝试观察此类变化对3D Web应用程序所带来的影响。
尽管如此，当讨论着色器程序时，编译过程依然不可或缺，但该过程出现于图形硬件中，而非浏览器。
1.3WebGL应用程序结构
类似于其他3D图形库，WebGL同样需要特定组件的支持，进而构造3D场景环境。
本书第1~4章将讨论此类基本要素，并于随后探讨3D场景之外的其他元素，如颜色和纹理。
最后，本书还将对某些高级话题予以分析。
其相关组件包括如下内容。
❑canvas：
作为一类容器，承载即将渲染的场景，此类场景多由HTML 5元素构成，并可通过文档对象模型（DOM）进行访问。
❑对象：
部分场景还采用了3D实体对象，且由三角形构成。
第2章将考察WebGL针对三角形的处理方式。
其中，WebGL通过缓冲区机制存储多边形数据，并于随后渲染场景中的对象。
❑光照：
若缺乏光照的支持，3D场景将难以呈现其应有外观。
第3章将对此予以阐述，其中，WebGL通过着色器对场景中的光照进行建模，3D对象根据物理定律反射、吸收光线。
除此之外，第3章还将讨论WebGL中的不同光照模型，进而实现场景对象的可视化操作。
❑相机：
canvas通常视为3D场景世界的视口，并以此对当前场景进行查看。
第4章将讨论各类矩阵操作，进而生成视见透视效果。
另外，第4章还将进一步分析此类操作基于相机的建模方式。
本章将讨论上述第1项内容canvas，包括canvas的生成方式以及WebGL上下文环境的构建方式。
1.4HTML5canvas的生成方式
下面讨论Web页的生成过程，并向其添加HTML 5 canvas。
此处，canvas可视为Web页中渲染3D场景时的矩形元素。
1.4.1构造canvas
（1）读者可根据个人喜好选取相应的编辑器，并通过下列代码生成Web页。
DOCTYPEhtml>
WebGLBeginner'sGuide-Settingupthecanvas
canvas{border:
2pxdottedblue;}
YourbrowserdoesnotsupportHTML5
下载示例代码
读者可访问以下载本书附带的源代码。
（2）将当前文件另存为ch1_Canvas.html。
（3）使用所支持的浏览器打开当前文件。
（4）对应显示效果如图1-1所示。
图1-1
1.4.2运行结果
上述步骤生成了一个包含canvas的简单Web页，对应canvas包含了4个3D应用。
下面针对相关元素加以简要描述。
1.4.3针对边框定义CSS样式
下列代码段定义了canvas样式。
canvas{border:
2pxdottedblue;}
不难发现，上述代码并非是构造WebGL应用程序的基础型代码。
另外，点状边框可视为一类较好的canvas定位方式，且初始状态下，canvas中的内容为空。
1.4.4理解canvas的属性
当前示例涉及以下3个属性。
❑id：
表示为文档对象模型（DOM）中的canvas标识符。
❑width和height：
用于确定canvas的尺寸，若二者未经定义，则Firefox、Chrome和WebKit将采用300×150的默认canvas尺寸。
1.4.5是否支持canvas
若屏幕上显示“YourbrowserdoesnotsupportHTML 5”，即之间设置的消息，则读者应查看当前互联网浏览器是否支持canvas。
例如，若读者使用Firefox浏览器，则代码运行结果将会显示“HTML 5notsupportedmessage”。
对此，可在Firefox浏览器地址栏中输入“about:
config”，并查看属性webgl.disabled。
若该属性设置为true，则对其进行修改，重启Firefox并加载ch1_Canvas.html。
此时，canvas应显示为点状边框这一正确结果。
若在远程端无法显示canvas，该情形可解释为：
Firefox浏览器禁用某些图形卡驱动程序。
对此，除了使用不同的计算机设备之外，别无他法。
1.5访问WebGL上下文环境
WebGL上下文可视为一类句柄（严格地讲则是JavaScript对象），据此可访问全部WebGL函数和属性，后者构成了WebGL的应用程序接口（API）。
稍后将编写JavaScript函数，并检测是否可针对canvas获取WebGL上下文。
其他JavaScript库需要下载并包含至当前工作项目中，与此不同，WebGL已置于浏览器中。
换而言之，若浏览器对此予以支持，读者无须安装并包含任何库。
1.5.1访问WebGL上下文
下面将调整前述示例，并添加JavaScript函数以检测浏览器中的WebGL功能项（进而尝试获取对应句柄）。
当页面加载时，该函数将被调用。
对此，这里将使用标准的DOMonLoad事件，具体步骤如下：
（1）读者可根据个人喜好选取文本编辑器（理想状态下，文本编辑器应可高亮显示HTML/JavaScript语法）并打开ch1_Canvas.html文件。
（2）在标签下方添加下列代码。
（3）此处，需要在onLoad事件中调用上述函数，并调整
标签，对应代码如下所示。
（4）将文件另存为ch1_GL_Context.html。
（5）使用某一支持WebGL的浏览器打开ch1_GL_Context.html文件。
（6）若支持WebGL，则运行效果将显示如图1-2所示的对话框。
图1-2
1.5.2过程分析
当使用JavaScript变量（gl）时，即可获得WebGL上下文环境句柄。
下面对WebGL访问代码稍作回顾，其代码如下所示。
varnames=["webgl",
"experimental-webgl",
"webkit-3d",
"moz-webgl"];
for（vari=0;itry{
gl=canvas.getContext（names[i]）;
}
catch（e）{}
if（gl）break;
}
其中，canvas中的getContext（）方法可访问WebGL，全部工作仅需确定上下文名称（根据不同厂商而变化）。
因此，可在名称数组中对其予以分类。
关于与命名规则相关的更新结果，读者可查看WebGL规范以获取更为详细的信息（如在线资源）。
除此之外，当采用2D作为上下文名称时，getContext（）方法还可访问HTML 52D图形库。
与WebGL不同，HTML 5采用了标准命名规则，且HTML 5 2D图形API完全独立于WebGL，其深入内容则超出了本书的讨论范围。
1.6WebGL状态机
WebGL上下文环境可理解为状态机：
当调整某一属性后，对应调整结果保持恒定，直至下次更新。
在任意时刻，读者均可查询此类属性状态，进而确定WebGL上下文的当前状态。
下面将结合具体实例对此予以分析。
1.6.1构造WebGL上下文属性
（1）该示例将调整颜色值以清除当前canvas，对应代码如下所示。
WebGLBeginner'sGuide-SettingWebGLcontext</p><p>attributes
canvas{border:
2pxdottedblue;}
YourbrowserdoesnotsupporttheHTML5canvaselement.
（2）上述文件与前述示例十分类似，但依然增加了某些新型代码结构，其中包含以下4个JavaScript函数。
❑checkKey函数。
该函数定义为辅助函数，用于捕捉键盘输入内容，进而执行对应代码。
❑getGLContext函数。
与“访问WebGL上下文”小节类似，当前版本增加了某些代码行，进而获得canvas的宽度和高度。
❑clear函数。
作为WebGL上下文的一个属性，该函数将canvas清除为当前颜色值。
如前所述，WebGL以状态机方式工作，因而可保持所选颜色值，进而清除当前canvas，直至该颜色值通过WebGL函数gl.clearColor产生变化（参见checkKey源代码）。
❑initWebGL函数。
针对文档onLoad事件，该函数可替换getGLContext函数。
initWebGL函数可视为getGLContext函数的改进版本，并返回位于ctx变量中的当前上下文。
随后，上下文环境被赋予全局变量gl。
（3）打开test_gl_attributes.html文件。
（4）当按下1键时，读者将会查看到canvas的颜色变化方式（变为绿色）。
同时，读者还可按下3键查询当前所使用的真实颜色。
（5）canvas维持当前颜色值，直至调用gl.clearColor函数改变清除颜色。
对此，可尝试按下2键对其进行调整。
通过源代码可知，canvas的清除颜色将变为蓝色。
同时，还可按下3键查询当前所使用的真实颜色。
1.6.2过程分析
在上述示例中，通过调用clearColor函数可改变或设置颜色值，以使WebGL清除当前canvas。
相应地，还可使用getParameter（gl.COLOR_CLEAR_VALUE）获得canvas清除运算的当前值。
类似的构造过程多次出现于本书中，即特定函数负责构造WebGL的各项属性，getParameter函数通过对应参数获得此类属性的当前值（上述示例采用了COLOR_CLEAR_VALUE）。
1.6.3使用上下文访问WebGLAPI
需要注意的是，全部WebGL函数均可通过WebGL上下文环境加以访问。
在前述示例中，上下文由变量gl持有。
因此，WebGLAPI调用可通过该变量予以执行。
1.7加载3D场景
截止到目前为止，前述内容讨论了canvas的构建方式，以及WebGL的获取方式。
下面将讨论对象、光照以及相机。
本节简要介绍WebGL场景内容。
1.7.1虚拟车辆仓库
本书将通过WebGL实现一个虚拟车辆仓库示例，当前仅在canvas中加载一个简单场景，该场景由车辆、光照和相机构成。
1.7.2场景视觉化
本书内容围绕虚拟车辆仓库示例展开，相关步骤如下：
（1）选取适当的互联网Web浏览器，并打开文件ch1_Car.html。
（2）随后即可查看到如图1-3所示的WebGL场景。
第2章将讨论几何体渲染问题，以及如何加载和渲染模型。
图1-3
（3）使用滑块并以交互方式更新4个场景光源，各光源分别包含3个元素：
环境光、漫反射光和镜面光，第3章将对该值进行深入分析。
（4）单击并拖曳当前canvas，旋转汽车模型并以不同视角对其加以查看。
同时，读者可在canvas上拖曳鼠标时按下Alt键，以对当前场景执行缩放操作。
另外，读者还可使用箭头键围绕汽车模型旋转相机。
这里应在使用箭头键之前单击canvas，以确保其获得焦点。
第4章将讨论相机的创建方式以及WebGL中的相机操作方式。
（5）若单击Above、Front、Back、Left或Right按钮，读者则会查看到相应的动画效果，当相机抵达既定位置时，动画过程终止。
对此，可采用JavaScript计时器实现这一效果，第5章将对动画进行讨论。
（6）使用颜色选择器widget可改变汽车模型的颜色。
随后，本书将依次讨论场景颜色的使用方式（第6章），颜色、深度测试和Alpha混合（第7~10章），场景对象的选取方式（第8章），虚拟车辆仓库的构造方式（第9章）以及WebGL高级话题（第10章）。
1.7.3过程分析
当前已通过WebGL将简单场景加载至互联网浏览器中。
该场景由以下内容构成：
❑场景所使用的canvas。
❑形成车辆模型的一系列多边形网格（对象），包括车顶、车窗、头灯、挡泥板、车门、轮胎、扰流板以及保险杠等。
❑光源。
否则，场景将无法展示其应有的外观。
❑相机用以确定视点在3D场景世界中的位置。
取决于用户的输入内容，相机可通过交互方式实现，且视点也可随之发生变化。
例如，可使用左键、右键以及鼠标使得相机围绕车辆模型旋转。
当前示例并未涉及其他元素，如纹理、颜色以及特殊光照效果（镜面光），本书后续内容将对此进行逐一讲解。
当前示例仅讨论场景中所展现的4个基本元素。
1.8本章小结
本章讨论了WebGL应用程序中的4个基本元素，即canvas、对象、光照以及相机。
同时，本章还学习了HTML 5canvas与Web页之间的添加方式，以及如何设置id、宽度和高度值。
随后，还展示了与WebGL上下文构建相关的代码。
如前所述，WebGL以状态机方式工作，读者可通过getParameter函数查询变量。
第2章将阐述3D对象与WebGL场景之间的定义、加载和渲染方式。
升级会员 