canvas教程

WebGL 高级技术(3)

字号+ 作者:H5之家 来源:H5之家 2017-09-10 18:00 我要评论( )

将renderbuffer指定的渲染缓冲区对象关联到绑定在target上的帧缓冲区对象。参数: target:必须是gl.FRAMEBUFFER attachment:指定关联的类型。gl.COLOR_ATTACHMENT0,表示renderbuffer是颜色关联对象;gl.DEPTH_ATTAC

    将renderbuffer指定的渲染缓冲区对象关联到绑定在target上的帧缓冲区对象。参数:
    target:必须是gl.FRAMEBUFFER
    attachment:指定关联的类型。gl.COLOR_ATTACHMENT0,表示renderbuffer是颜色关联对象;gl.DEPTH_ATTACHMENT,表示renderbuffer是深度关联对象;gl.STENCIL_ATTACHMENT,表示renderbuffer是模板关联对象
    renderbuffertarget:必须是gl.RENDERBUFFER
    renderbuffer:指定被关联的渲染缓冲区对象

20.gl.checkFramebufferStatus(target)

    检查绑定在target上的帧缓冲区对象的配置状态。参数:
    target:必须为gl.FRAMEBUFFER
    返回值:0,target不是gl.FRAMEBUFFER。其他包括:gl.FRAMEBUFFER_COMPLETE,帧缓冲区对象正确配置;gl.FRAMEBUFFER_INCPOMPLETE_ATTACHMENT,某一个关联对象为空,或者关联对象不合法;gl.FRAMEBUFFER_INCOMPOLETE_DIMENSIOUS,颜色关联对象和深度关联对象的尺寸不一致;gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT,帧缓冲区尚未关联任何一个关联对象

21.gl.viewport(x, y, width, height)

    设置gl.drawArrays()和gl.drawElements函数的绘图区域。在cavans上绘图时,x和y就是canvas中的坐标。参数:
    x,y:指定绘图区域的左上角,以像素为单位
    width,height:指定绘图区域的宽度和高度

22.绘制阴影

    实现阴影有若干不同的方法,经常采用的是阴影贴图(shadow map),或称深度贴图(depth map)。该方法具有较好的表现力,在多种计算机图形学的场合,甚至电影特效总都有所使用。
    我们需要用到光源和物体之间的距离(实际上也就是物体在光源坐标系下的深度z值)来决定物体是否可见。如下图所示,同一条光线上有两个点P1和P2,由于P2的z值大于P1,所以P2在阴影中。

image

    我们需要使用两对着色器以实现阴影:(1)一对着色器用来计算光源到物体的距离,(2)另一对着色器根据(1)中计算出的距离绘制场景。使用一张文理图像吧(1)的结果传入(2)中,这张文理图像就被称为阴影贴图(shadow map),而通过阴影贴图实现阴影的方法就被称为阴影映射(shadow mapping)。

23.读取OBJ模型文件步骤

    1.准备Float32Array类型的数组vertices,从文件中读取模型的顶点坐标数据并保存到其中;

    2.准备Float32Array类型的colors,从文件中读取模型的顶点颜色数据并保存到其中;

    3.准备Float32Array类型的数组normals,从文件中读取模型的顶点法线数据并保存到其中;

    4.准备Unit32Array(或Uint8Array)类型的数组indices,从文件中读取顶点索引数据并保存在其中,顶点索引数据定义了组成整个模型的三角序列;

    5.将前4步骤获取的数据写入缓冲区中,调用gl.drawElements()以绘制出整个立方体;

24.OBJ文件格式

    OBJ格式的文件由若干个部分组成,包括顶点坐标部分、表面定义部分、材质(material,即表面的样式,可能是单色或渐变色,也可能贴有纹理)定义部分等。每个部分定义了多个顶点、法线、表面等等。下面是一个OBJ文件。

image

    已#号开头的行表示注释,如图10.26中的第1行到第2行就是Blender软件根据其自身版本创建出来的注释;

    第3行引用了一个外部材质文件。OBJ格式将模型的材质信息爆粗能在外部的MTL格式的文件中。

mtllib <外部材质文件名>

    例如mtllib cube.mtl,外部材质文件是cube.mtl。

    第4行按照如下格式自定了模型的名称:

o <模型名称>

    第5行到第12行按照如下格式定义了顶点的坐标,其中w是可选的,如果没有就默认为1.0:

v x y z [w]

    该模型是一个标准的立方体,共有8个顶点。

    第13行到第20行先指定了某个材质,然后列举了使用这个材质的表面。第13行指定了材质名称,该材质被定义在第3行引用的MTL文件中。

usemtl <材质名>

    第14行到18行定义了使用这个材质的表面。每个表面是由顶点、纹理坐标和法线的索引序列定义的。

f v1 v2 v3 v4 …

   其中v1、v2、v3、v4是之前定义的顶点的索引值。注意,这里顶点的索引值从1开始,而不是从0开始。本例为了简单,没有包含法线,如果包含法线向量,就需要遵照如下格式:

f v1//vn1 v2//vn2 v3//vn3 ...

    其中,vn1、vn2等是法线向量的索引值,也是从1开始。

    第19行到第20行定义了使用了另一个材质的表面,即橘黄色的表面。

25.MTL文件格式

    MTL文件定义了多个文件,下图显示了cube.mtl中的内容。

image

    第1行和第2行是注释。

    第3行使用newmtl定义一个新材质,格式如下:

newmtl <材质名>

    材质名被OBJ文件引用,如材质Material就被cube.obj的第13行引用了。

    第4行到第6行,分别使用Ka、Kd、Ks定义了表面的环境色、漫射色、高亮色。颜色使用RGB格式定义的,每个分量值得区间为[0.0, 1.0],本例只用到漫射色,也就是物体表面本来的颜色。我们不用管其他两个颜色的含义。

    第7行使用Ns指定了高光亮的权重,第8行用Ni指定了表面光学密度,第9行使用d指定了透明度,第10行用illum指定了光照模型。本例没有用到这些信息。

    第11行到第18行以同样的方法定义了另外一种材质material.001。

16.根据顶点坐标,通过交叉操作计算法线方向

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • webgl下经常崩溃,canvas下mesh又用不了

    webgl下经常崩溃,canvas下mesh又用不了

    2017-08-23 13:03

  • 无插件纯Web 3D机房,HTML5+WebGL倾力打造

    无插件纯Web 3D机房,HTML5+WebGL倾力打造

    2017-08-07 15:01

  • unity发布的WebGL问题

    unity发布的WebGL问题

    2017-07-27 10:02

  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    2017-06-13 12:01

网友点评
s