第1节WebGL概述.docx
- 文档编号:23385042
- 上传时间:2023-05-16
- 格式:DOCX
- 页数:15
- 大小:252.48KB
第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>
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)在标签下方添加下列代码。
vargl=null;
functiongetGLContext(){
varcanvas=document.getElementById("canvas-element-id");
if(canvas==null){
alert("thereisnocanvasonthispage");
return;
}
varnames=["webgl",
"experimental-webgl",
"webkit-3d",
"moz-webgl"];
for(vari=0;i try{ gl=canvas.getContext(names[i]); } catch(e){} if(gl)break; } if(gl==null){ alert("WebGLisnotavailable"); } else{ alert("Hooray! YougotaWebGLcontext"); } } (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;i try{ 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,对应代码如下所示。
attributes
canvas{border:
2pxdottedblue;}
vargl=null;
varc_width=0;
varc_height=0;
window.onkeydown=checkKey;
functioncheckKey(ev){
switch(ev.keyCode){
case49:
{//1
gl.clearColor(0.3,0.7,0.2,1.0);
clear(gl);
break;
}
case50:
{//2
gl.clearColor(0.3,0.2,0.7,1.0);
clear(gl);
break;
}
case51:
{//3
varcolor=gl.getParameter(gl.COLOR_CLEAR_VALUE);
//Don'tgetconfusedwiththefollowingline.It
//basicallyroundsupthenumberstoonedecimalcipher
//justforvisualizationpurposes
alert('clearColor=('+
Math.round(color[0]*10)/10+
','+Math.round(color[1]*10)/10+
','+Math.round(color[2]*10)/10+')');
window.focus();
break;
}
}
}
functiongetGLContext(){
varcanvas=document.getElementById("canvas-element-id");
if(canvas==null){
alert("thereisnocanvasonthispage");
return;
}
varnames=["webgl",
"experimental-webgl",
"webkit-3d",
"moz-webgl"];
varctx=null;
for(vari=0;i try{ ctx=canvas.getContext(names[i]); } catch(e){} if(ctx)break; } if(ctx==null){ alert("WebGLisnotavailable"); } else{ returnctx; } } functionclear(ctx){ ctx.clear(ctx.COLOR_BUFFER_BIT); ctx.viewport(0,0,c_width,c_height); } functioninitWebGL(){ gl=getGLContext(); } 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场景之间的定义、加载和渲染方式。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WebGL 概述