WebGL入门

1.清空绘图区

清空绘图区是使用指定的背景颜色填充canvas,使用gl.clearColor设置背景色。gl.clearColor(red, green, blue, alpha)。openGL的颜色取值返回是0-1。

调用gl.clear()函数,用clearColor指定的背景色清空绘图区域。gl.clear(g.COLOR_BUFFRE_BIT),清理绘图区域实际上在清理颜色缓冲区(color buffer),传递的gl.COLOR_BUFFER_BIT就是在告诉WebGL清理颜色缓冲区。缓冲区还包括:
gl.COLOR_BUFFER_BIT颜色缓冲区、gl.DEPTH_BUFFER_BIT深度缓冲区、gl.STENCIL_BUFFER_BIT模板缓冲区。清理函数分别为gl.clearColor(red,green,blue,alpha)、gl.clearDepth(depth)、gl.clearStencil(s)。

2.什么是着色器

WebGL有两种着色器:

顶点着色器(Vertex shader):顶点着色器是用来描述顶点特性(如位置、尺寸等)的程序。顶点(vertext)是指二维或三维空间中的一个点,比如二维或三维图形的端点或交点。
    片元着色器(Fragment shader):进行片元处理过程如光照的程序。片元(fragment)是一个WebGL术语,你可以将其理解为像素(图像的单元)。

3.GLSE中的数据类型

float:表示浮点数

vec4:表示有四个浮点数组成的矢量

必须注意的是,如果WebGL需要的参数是浮点类型,例如10.0。如果传递10会报错,因为10被认为是整数。

4.vec4函数

我们在使用WebGL时,会给顶点着色器参数赋值,gl_Position的数据类型为vec4,gl_Position = vec4(0.0, 0.0, 0.0, 1.0)。但实际需要的位置坐标只有三个(x,y,z)值。幸好WebGL提供了vec4函数。由4个分量组成的矢量被称为齐次坐标,他能够提高三维数据的效率,在三维图形系统大量使用。如果最后一个分量设置为1.0,那么齐次坐标可以表示前三个分量为坐标值的那个点。所有当需要用齐次坐标表示顶点时,只需要将最后一个分量设置为1.0就可以了。

5.gl.drawArrays(mode, first, count)函数

mode:指定绘制的方式,包括gl.POINTS、gl.LINES、gl.LINE_STRIP、gl.TRIANGLES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN。

first:指定从哪个顶点开始绘制(整形数)
    count:指定绘制需要用到多少个顶点(整形数)

6.attribute变量

想要将位置信息从javascript程序中传给顶点着色器。有两种方式可做到:attribute变量和uniform变量。attribute变量传输时那些与顶点相关的数据,uniform变量传输的是哪些所有顶点相同(与顶点无关)的数据。例如attribute vec4 a_Position, attribute变量a_Position的类型为vec4。一般attribute变量都以a_开头,而uniform变量以u_开头。如何获取attribute变量的存储位置?
    var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘);
    如何给顶点位置设置值?
    gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

7.gl.getAttribLocation(program, name)函数

program:指定包含顶点着色器和片元着色器的着色器程序对象
    name:想要获取存储地址的attribute变量的名称
    返回值:大于等于0,attribute变量的存储地址;小于0,指定的attribute变量不存在

8.gl.vertexAttrib4f(location, v0, v1, v2, v3)函数

location:指定将要修改的attribute变量的存储位置
    v0:attribute变量的第一个分量的值
    v1:attribute变量的第二个分量的值
    v2:attribute变量的第三个分量的值
    v2:attribute变量的第四个分量的值
    说明:gl.vertexAttrib3f有几个同族函数。gl.vertexAttrib1f(location, v0),gl.vertexAttrib2f(location, v0, v1),gl.vertexAttrib3f(location, v0, v1, v2)。

9.gl.getUniformLocation(program, name)

program:指定包含顶点着色器和片元着色器的着色器程序对象
    name:想要获取存储地址的uniform变量的名称

返回值:not-null,指定的uniform变量的位置;null,指定的uniform变量不存在,或者其命名以gl_或者webgl_前缀。

说明:getUniformLocation和getAttribLocation的区别在于为null和-1,如果变量不存在时。

10.gl.uniform4f(location, v0, v1, v2, v3)

向location位置处的变量赋值,参数和vertexAttrib4f函数参数相似。

时间: 2024-10-12 13:07:20

WebGL入门的相关文章

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

[WebGL入门]二十,绘制立体模型(圆环体)

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 立体的模型 这次稍微喘口气,开始绘制立体模型.这里说的[喘口气]是指本次的文章中没有出现任何新的技术知识点.只是利用到现在为止所介绍过的内容,来绘制一个立体的圆环体.到现在为止,只绘制了三角形和四边形,当然,在三维空间中绘制简单的多边形也没什么不对,但是缺点儿说服力.

[WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 增加顶点属性的个数 上次,终于绘制了一个三角形,但是只绘制了一个纯白色的多边形.这次,给多边形的顶点中添加颜色属性,基本上做的事情和上一篇文章一样,只是稍微增加点步骤而已.首先,就像以前多次重复的那样,顶点可以包含很多种情报(参考:顶点缓存和基础),而且每一个情报叫做

[WebGL入门]十二,模型数据和顶点属性

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 顶点属性的意思 上次的文章中,介绍了一下从着色器的生成,编译,到程序对象的生成和着色器的连接.这次,简单的说一下模型数据的定义和顶点属性的处理.另外,介绍一下根据模型数据生成VBO的方法.VBO的使用要比生成难理解一些,但是不要担心,后面会慢慢说明.接下来看一下顶点属性.顶点属性,说的简单点,

[WebGL入门]七,context的初始化

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 非常重要的初始化 从这次开始,开始着手WebGL的处理.首先是WebGL的初始化,完成渲染前的所有准备.前面的文章也给过HTML的雏形,还记得吧,像下面的代码这样. <html> <head> <title>WebGL TEST</title> <s

[WebGL入门]五,矩阵的基础知识

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 不是让你到店前面排队 lufy:你一定奇怪,为什么叫这个题目,因为日语中的矩阵叫做"行列",所以作者就给读者们开了个玩笑,我就这么直接翻译了,大家知道什么意思就行了. 在3D渲染的世界里,会很频繁的用到矩阵. 这里所说的矩阵,是数学里的矩阵.英语中叫做Matrix. 矩阵虽然听起来好

[WebGL入门]十四,绘制多边形

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 这是本次的demo的运行结果 绘制流程 这次终于该绘制多边形了,之前的文章(十一,着色器的编译和连接)中介绍了HTML,顶点着色器和片段着色器,这次看一下javascript从开始到最终的全部处理.如果前两篇文章介绍的内容完全理解的话,这次的内容也应该不难了.或许会有不容易理解的地方,不要着急

[WebGL入门]六,顶点和多边形

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 可以在三维空间中描画的东西 要说在WebGL的世界里能够描画什么,其实任何东西都可以描画.而描画的最基本的东西就是下面几种. ?点 ?线段 ?三角形 虽然在OpenGL中提供了矩形的绘制,但是WebGL中基本上只能绘制上面的三种类型.和二维世界不同,比如像HTML中的img标签那样,简单的在画

[WebGL入门]十九,遮挡剔除和深度测试

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 多边形的外侧,内侧和遮挡剔除 上次介绍了索引缓存,以及使用IBO来绘图,使用索引缓存可以循环利用重复的顶点,能够提高绘图效率.这之后的文章,如果没有特殊的原因的话,基本上都会使用索引缓存,通过drawElements来绘图.这次来说一下遮挡剔除和深度测试,这是两个重要

[WebGL入门]十八,利用索引缓存来绘图

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 对应复杂的模型 上次,通过操作模型坐标变换矩阵,实现了多个模型的移动,旋转和放大缩小.但是,渲染的依然是简单的三角形,是个构造及其简单的模型.但是实际中,用WebGL来绘制一个简单的三角形的机会是很少见的.至少是个四角多边形吧,通常会是更复杂的模型.伴随着模型的复杂化