三维可视化技术实验报告WebGL部分.docx
- 文档编号:24303771
- 上传时间:2023-05-26
- 格式:DOCX
- 页数:53
- 大小:143.36KB
三维可视化技术实验报告WebGL部分.docx
《三维可视化技术实验报告WebGL部分.docx》由会员分享,可在线阅读,更多相关《三维可视化技术实验报告WebGL部分.docx(53页珍藏版)》请在冰豆网上搜索。
三维可视化技术实验报告WebGL部分
WebGL部分
第十节HTML5Canvas
10.1HTML-5Canvas简介
HTML-5Canvas提供了一个简单而强大的选项来使用 JavaScript 绘制图形。
它可以用来绘制图形,使照片组合,或做简单的(和不那么简单的)动画。
这是一个简单的
width和height,以及所有HTML5元素有核心的属特,例如像:
id,name和class。
语法
HTML画布
要提到这些在双引号(“”)画布的名称。
canvas 标签有三个属性,即:
id, width 和 height。
Id − ID代表在文档对象模型(DOM)canvas元素的标识符。
Width − 表示canvas的宽度。
Height − 表示canvas的高度。
这些属性决定 canvas 的大小。
如果程序员不指定
示例-创建一个Canvas
用CSS来将一个彩色边框添加到画布上。
#mycanvas{border:
1pxsolidred;}
运行结果如图10.1所示
图10.1
10.2Context(渲染)
要canvas元素上显示东西,必须使用的脚本语言。
这个脚本语言应该访问渲染上下文,并且绘制就可以了。
canvas元素有一个DOM方法是 getContext(),它被用来获取呈现上下文和它的绘图功能。
这个方法有一个参数,上下文2D类型。
下面的代码将被写入,以获得必要的上下文。
可以将此脚本写在body标签内。
DOCTYPEHTML>
varcanvas=document.getElementById('mycanvas');
varcontext=canvas.getContext('2d');
context.font='20ptCalibri';
context.fillStyle='green';
context.fillText('Welcometo长庚楼505',100);
【运行结果】
图10.2
10.3WebGLContext
HTML5画布(Canvas)也用于写WebGL的应用程序。
要创建canvas元素使用WebGL来渲染,应该可传递 experimental-webgl,WebGL,而不是2D到 canvas.getContext()方法。
有些浏览器只支持“WebGL”。
DOCTYPEhtml>
varcanvas=document.getElementById('my_canvas');
vargl=canvas.getContext('experimental-webgl');
gl.clearColor(0.9,0.9,0.8,1);
gl.clear(gl.COLOR_BUFFER_BIT);
【运行结果】
第十一节WebGL着色器程序
我们通常使用三角形来构建网格。
因为WebGL使用GPU加速计算,有关这些三角形中的信息一般从CPU传送到GPU,这需要大量的通信开销。
WebGL提供了一个解决方案以降低通信开销。
由于它使用ES SL(嵌入式系统着色语言)在GPU上运行,我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。
这些着色器是GPU和用于编写着色器程序的程序语言是GLSL。
在这些着色器,我们定义确切的顶点,转换,材质,光源,和摄像机使用彼此交互以创建具体图像。
总之,这是一个实现的算法来获得像素一个网状片段。
在后面的章节我们将讨论更多关于着色器。
有两种类型的着色器- 顶点着色器和片段着色器。
1、顶点着色器是所谓的在每个顶点的程序代码。
它被用于转化(移动)的几何形状(例如:
三角形)从一个地方到另一个地方。
它处理每个顶点的数据(每个顶点的数据),例如顶点坐标,法线,色彩,和纹理坐标。
在顶点着色器的ES GL代码,程序员必须定义的属性来处理数据。
这些属性指向一个顶点缓冲区对象是用JavaScript编写的。
下面的任务可以使用顶点着色器来进行 :
(1)顶点变换
(2)正常转化和正常化(3)纹理坐标生成
(4)纹理坐标变换(5)灯光/光线(6)颜色材料应用
2、片段着色器(像素着色器)网状由多个三角形形成,并且每一个三角形的表面被称为一个片段
片段着色器是对每一个片段的所有像素上运行的代码。
这是写计算以填补单个像素的颜色。
下面的任务可以使用片段着色器来进行:
(1)插值操作
(2)纹理访问(3)纹理应用(4)灰蒙/雾(5)颜色总和
3、OpenGLESSL变量
OpenGL ES的SL完整形式是OpenGL的嵌入式系统着色语言。
为了处理着色器程序中的数据,ES SL提供了三种类型的变量。
(1)属性− 这些变量保存顶点着色器程序的输入值。
属性指向包含每个顶点数据的顶点缓冲对象。
顶点着色器被调用的时候,这个属性指向不同的顶点的VBO。
(2)制服− 这些变量存储输入数据,很常见为顶点和片段着色器,例如光位置,纹理坐标和颜色。
(3)变动充填− 这些变量用来从顶点着色到片段着色器传递数据。
有了这么多的基础知识,现在我们将继续前进,讨论图形管线。
第十二节WebGL图形管线
WebGL图形流水线
图12.1WebGL图形流水线
12.1JavaScript
在开发WebGL应用程序时,我们需要写Shader语言代码与GPU进行沟通。
使用JavaScript编写的程序,其中包括以下操作的控制代码:
(1)初始化WebGL − JavaScript是用于初始化WebGL的上下文。
(2)创建数组 − 我们创建JavaScript数组来保存几何数据。
(3)缓冲区对象 − 通过将数组作为参数来创建缓冲区对象(顶点和索引)。
(4)属性− 我们可以创建属性,启用它们并使用JavaScript缓冲区对象相关联。
(5)制服− 我们还可以使用JavaScript制服(uniforms)关联。
(6)变换矩阵 − 使用JavaScript,我们可以创建变换矩阵。
最初我们创建几何形状所需的数据和它们传递到着色器中缓冲器的形式。
着色器语言指向缓冲区对象,这作为输入传递给顶点着色器的属性变量。
12.2顶点着色器
当我们通过调用方法drawElements()和drawArray()启动渲染过程中,顶点着色器提供的每个顶点执行在顶点缓冲区对象。
它计算原始多边形各顶点的位置并且存储在不同的gl_position。
它还计算的其他属性,例如颜色,纹理坐标,以及顶点,这通常与顶点相关联。
原始汇编,计算位置及每个顶点的其他细节之后,下一阶段是原始装配阶段。
这里三角形被组装并传送给光栅化程序。
光栅化,在光栅化步骤,原始的最终图像的像素被确定。
它有两个步骤 -
(1)剔除− 最初的取向(是其正面或背面朝向?
)多边形被确定。
所有这些三角形使用不当取向不可见在观看区域被丢弃。
这个过程被称为剔除。
(2)剪裁 − 如果一个三角形部分在观看区域之外,则视图区域之外的部分被去除。
这个过程被称为剪裁。
12.3片段着色器
片段着色器获取从顶点着色器不同变量的数据,从光栅化阶段元语,然后计算颜色值顶点之间每一个象素。
片段着色器存储在每个片段的每一个像素的颜色值。
这些颜色值可以在片段操作进行访问。
一些片段操作确定在所述原始的每个像素的颜色后进行。
这些片段操作可以包括以下:
(1)深度
(2)颜色缓冲区混合
(3)抖色
一旦所有的片段进行处理,2D图像形成并显示在屏幕上。
帧缓冲器是渲染管线的最终目的地。
帧缓冲区的图形内存持有的场景数据的一部分。
这个缓冲区包含细节如宽度和表面的高度(以像素为单位),每个像素的颜色,深度和模版缓冲器。
第十三节WebGL应用程序
WebGL应用程序代码是JavaScript和OpenGL着色语言的组合。
JavaScript是需要与CPU进行沟通。
OpenGL着色语言,需要与GPU通信。
使用WebGL绘制图形遵循五个序列步骤。
这些步骤的解释如下:
(1)准备画布,并得到WebGL的渲染上下文我们得到当前HTML Canvas对象并获取WebGL渲染环境。
(2)定义几何并将其存储在缓冲器的对象
我们定义几何的如顶点,索引,颜色等的属性,并把它们存储在 JavaScrip t数组。
然后,我们创建一个或多个缓冲器的对象和传递包含数据到相应的缓冲对象的阵列。
在这个例子中,我们存储一个三角形的顶点在JavaScript数组中,并传递这个数组到一个顶点缓冲区对象。
(3)创建和编译着色器程序
我们写的顶点着色器和片段着色器程序,编译它们,并通过连接这两个程序将创建一个合并成程序。
(4) 关联缓冲区对象和着色器程序
我们关联缓冲器对象,并合并的着色器程序。
(5)绘制所需的对象(三角形)
此步骤包括操作如:
清除颜色,清除缓冲比特,启用深度测试,设置视图端口等。
最后,使用其中一个方法所需要的原语来绘制 − drawArrays() 或 drawElements()。
绘制结果如下图13.1所示
图13.1绘制图形
第十四节WebGLContext上下文
要编写一个WebGL的应用程序,第一步是让WebGL渲染上下文-Context对象。
这个对象与WebGL绘制缓冲区进行交互,可以调用所有WebGL的方法。
执行以下操作来获取WebGL的上下文:
1、创建HTML5 canvas
(1)获取画布 canvas的ID
(2)获取WebGL
(3)创建HTML5 canvas元素
我们知道,建立一个HTML5 canvas元素需要在HTML5主体内写入canvas语句声明,给定 canvas 一个ID,使用高度和宽度(height&width)属性(可选)更改画布尺寸
2、获取Canvas的ID
Canvas ID是通过调用DOM(文档对象模型)的getElementById()方法获得的。
这个方法接受一个字符串值作为参数,所以我们传递了当前 Canvas 的名字。
例如,如果 canvas 名称是my_canvas,则canvas ID被得到 - 如图如下
varcanvas=document.getElementById('my_Canvas');
3、获取WebGL的绘图上下文
为了得到WebGLRenderingContext对象(或图形的WebGL上下文对象或只在WebGL的情况下),调用当前HTMLCanvasElement的getContext()方法。
getContext()的语法如下:
canvas.getContext(contextType,contextAttributes);
通过 WebGL字符串或experimental-webgl 作为 contentType。
contextAttributes参数是可选的。
下面的代码片段展示了如何获取WebGL的渲染上下文。
在这里,gl是参考变量所获得的上下文对象。
varcanvas=document.getElementById('my_Canvas');
vargl=canvas.getContext('experimental-webgl');
(1)WebGLContextAttributes
参数WebGLContextAttributes不是强制性的。
此参数提供接受布尔值,如下表列出各种选项 ,
Alpha
如果它的值是 true,它提供了一个alpha缓冲区到画布上。
默认情况下,它的值是 true
depth
如果它的值是true,会得到一个绘图的缓冲区,其中包含至少16位的深度缓冲。
默认情况下,它的值是true
stencil
如果它的值是true,会得到一个绘图的缓冲区,其中包含至少8位的模板缓存。
默认情况下,它的值是false
antialias
如果它的值是true,会得到一个绘图缓冲区,执行抗锯齿。
默认情况下,它的值是true
premultipliedAlpha
如果它的值是true,会得到一个绘图缓冲区,其中包含的颜色与预乘alpha。
默认情况下它的值是true
preserveDrawingBuffer
如果它的值是true,缓冲区将不会被清零,直到被清除或由作者改写将保留它们的值。
默认情况下,它的值是false
表14.1参数WebGLContextAttributes选项
下面的代码片段展示了如何创建一个WebGL的上下文模板缓存,这将不执行抗锯齿。
varcanvas=document.getElementById('canvas1');
varcontext=canvas.getContext('webgl',{antialias:
false,stencil:
true});
在创建 WebGLRenderingContext 的时候,一个绘图缓冲器被创建。
上下文对象管理OpenGL 状态,并呈现到图形缓冲区。
(2)WebGLRenderingContext
它是WebGL的主要接口。
它表示WebGL绘图上下文。
该接口包含了所有用于在绘图缓冲执行各种任务的方法。
此接口的属性给出在下表中。
S.No.
属性和说明
1
Canvas
这是一个对创建此 canvas 元素的上下文
2
drawingBufferWidth
此属性表示绘图缓冲器的实际宽度。
它可以不同于HTMLCanvasElement的宽度属性。
3
drawingBufferHeight
此属性表示绘图缓冲器的实际高度。
它可以不同于HTMLCanvasElement的高度属性。
表14.2接口属性
第十五节WebGL几何体
15.1定义所需的几何体
所有对象模型应该有明确定义的几何细节。
这些细节可以包括顶点,指数,颜色,纹理等。
在WebGL中几何详细信息存储在JavaScript数组。
图形对象由其中在GPU上运行的着色器程序来创建。
几何信息传递到使用缓冲区对象着色器程序定义所需的几何体使用顶点所绘的2D或3D模型被称为网格。
在网格的每个面被称为多边形和多边形是由3个或更多的顶点组成。
要绘制模型在WebGL中渲染,必须定义使用 JavaScript 数组的顶点和索引。
举例来说,如果我们想创建一个三角形的位于坐标{(5,5),(5,5),(-5,-5)}如下图15.1所示,可以创建一个数组的顶点。
图15.1创建一个三角形
对于绘图图元,WebGL提供了以下两种方法:
drawArrays() − 当使用这种方法,我们通过原语使用JavaScript数组的顶点。
drawElements() − 当使用这种方法,我们通过这两个顶点和原语使用JavaScript数组的索引。
15.2缓冲区对象
缓冲对象是由WebGL的提供了一个机制,用于指示分配到系统中的存储器区域。
在这些缓冲区对象,可以存储要绘制模型的数据,对应的顶点,索引,颜色等。
使用这些缓冲区对象,可以通过它的属性变量中的一个传递多个数据的着色器程序(顶点着色器)。
由于这些缓冲对象驻留在GPU存储器,它们可以被直接呈现,这反过来又提高了性能。
1、为了处理几何形状,有两种类型的缓冲区的对象。
他们是:
(1)顶点缓冲区对象 (VBO) − 它保持所述图形模型,要被渲染的每个顶点的数据。
我们使用顶点缓冲对象中的WebGL存储和处理关于顶点诸如顶点坐标,法线,色彩,纹理坐标数据。
(2)索引缓冲区对象(IBO) − 它保持所述图形模型的索引(索引数据),这是要被渲染的。
WebGL提供了一种特殊类型数组称为类型数组来传输数据元素,如索引顶点和纹理。
这些类型的数组存储大量数据并处理它们在本地二进制格式,这将产生更好的性能。
使用WebGL类型数组是Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,UInt32Array,Float32Array和Float64Array。
通常,用于存储顶点数据,我们用Float32Array; 要存储索引数据,我们使用Uint16Array。
可以创建类型数组就像使用new关键字JavaScript数组。
2、步骤存储在缓冲区的数据:
(1)创建缓冲区
要创建一个空的缓冲区对象,WebGL提供了一个名为createBuffer()的方法。
该方法如果创建成功,返回一个新创建的缓冲区对象;否则返回失败的情况下一个null值。
WebGL操作为状态机。
一旦缓冲器被创建,任何后续缓冲操作将在当前缓冲器被执行,直到我们解除绑定它。
使用下面的代码来创建缓冲区:
varvertex_buffer=gl.createBuffer();
(2)绑定缓冲
创建一个空的缓冲区对象后,需要一个合适的数组缓冲区(目标)绑定到它。
WebGL提供)用于此目的称为bindBuffer()方法。
voidbindBuffer(enumtarget,Objectbuffer)
这个方法有两个参数:
target − 第一变量是一个枚举值,表示我们要绑定到空缓冲器的缓冲的类型。
有两个预定义枚举值作为该参数选项。
ARRAY_BUFFER 表示顶点的数据。
ELEMENT_ARRAY_BUFFER 表示索引数据。
Objectbuffer − 第二个是参考变量,在上一步中创建的缓冲区对象。
参考变量可以是一个索引缓存对象或顶点缓冲对象。
(3)数据传递到缓冲区
(4)将数据(顶点/索引)传送给缓冲器。
截至目前数据是一个数组的形式在传递到缓冲区之前,我们需要把它包在WebGL的一个类型数组。
WebGL提供用于此目的的bufferData()方法。
voidbufferData(enumtarget,Objectdata,enumusage)
第十六节WebGL着色器的使用
着色器是在GPU上运行的程序。
着色器写入OpenGL ES着色语言(称为ES SL)。
ES SL拥有它自己的数据类型,限定符,内置的输入和输出变量。
顶点着色器是一个程序代码,这被称为在每个顶点。
它改变(移动)的几何形状(例如:
三角形)从一个地方到另一个。
它处理每个顶点的数据(每个顶点的数据),例如顶点坐标,法线,色彩,和纹理坐标。
在顶点着色器的ES-GL代码中,必须定义的属性来处理数据。
这些属性指向一个顶点缓冲区对象是用JavaScript编写的。
下面的任务可以使用顶点着色器与顶点变换进行:
(1)顶点变换
(2)正常转化和正常化(3)纹理坐标生成
(4)纹理坐标变换(5)光线(6)彩色材料应用
1、合并程序
创建和编译两个着色器程序后,需要创建一个合并的程序同时包含着色器(顶点和片段)。
下面的步骤必须遵循 :
(1)创建一个程序对象
(2)附加两个着色器(3)连接两个着色器(4)使用程序
通过使用createProgram()方法创建程序对象。
它会返回一个空的程序对象。
下面是它的语法-
createProgram();
2、附加着色器
附加的着色器的使用 attachShader()方法创建的程序对象。
它的语法如下-
attachShader(Objectprogram,Objectshader);
此方法接受两个参数:
Program − 通过创建空的程序对象作为一个参数
Shader − 传递的着色器编译程序中的一个(顶点着色器,片段着色器)
3、链接着色器
使用linkProgram()方法链接着色器。
通过传递到所附加的着色器程序对象。
它的语法如下-
linkProgram(shaderProgram);
4、使用程序
WebGL提供了一个名为useProgram()方法。
需要链接程序时向它传递。
它的语法如下 -
useProgram(shaderProgram);
下面的代码片段展示了如何创建,连接和使用组合着色器程序。
varshaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertShader);
gl.attachShader(shaderProgram,fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
第十七节WebGL关联属性和缓冲区对象
在顶点着色器程序中的每个属性点为顶点缓冲区对象。
创建顶点缓冲区对象之后,程序员必须将它们与顶点着色器程序的属性相关联。
每个属性点只有一个顶点缓冲对象,从它们中提取数据值,然后将这些属性传递给着色器程序。
到了顶点缓冲对象的顶点着色器程序的属性联系起来,必须按照下面的步骤:
(1)获取属性的位置
(2)点属性顶点缓冲区对象
(3)启用属性
1、获取属性的位置
WebGL提供一种方法getAttribLocation(),它返回属性的位置。
它的语法如下:
ulonggetAttribLocation(Objectprogram,stringname)
此方法接受顶点着色器的程序对象和顶点着色器程序的属性值。
下面的代码片段展示了如何使用此方法。
这里,shader_program是着色器程序对象和坐标是顶点着色器程序的属性,
varcoordinatesVar=gl.getAttribLocation(shader_program,"coordinates");
2、指向属性到VBO
要分配缓冲对象的属性变量,WebGL提供了一个名为vertexAttribTutorialser()的方法。
下面是该方法的语法:
voidvertexAttribTutorialser(location,intsize,enumtype,boolnormalized,longstride,longoffset)
此方法接受六个参数:
(1)Location − 它指定一个属性变量的存储位置。
根据这个方案,必须通过由getAttribLocation()方法
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 三维 可视化 技术 实验 报告 WebGL 部分
![提示](https://static.bdocx.com/images/bang_tan.gif)