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:表示有四个浮点数组成的矢量

mat4:4*4矩阵(WebGL中矩阵是列主序的)

必须注意的是,如果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函数参数相似。

11.gl.uniform4fv(location, [v0, v1, v2, v3])

向location位置处的变量赋值,参数是以数组的形式传入。

11.gl.uniformMatrix4fv(location, transpose, array)

将array表示的4*4矩阵分配给由location指定的uniform变量。参数:

location:uniform变量的存储位置。

Transpose:在WebGL中必须指定为false

array:带传输的类型化数组,4*4矩阵按列主序存储在其中

12.gl.FragCoord

该内置变量的第一个分量和第二个分量表示片元在<canvas>坐标系统中的坐标值

13.gl.drawingBufferWidth/gl.drawingBufferHeight

分别表示颜色缓冲区的宽度和高度

WebGL入门的更多相关文章

  1. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  2. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  3. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

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

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  5. 【WebGL入门】画一个旋转的cube

    最近搜罗了各种资料,发现WebGL中文网特别好用,很适合新手入门:http://www.hewebgl.com/article/getarticle/50 只需要下载好需要的所有包,然后用notepa ...

  6. WebGL入门教程(一)-初识webgl

    一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...

  7. WebGL 入门-WebGL简介与3D图形学

    什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象. WebGL基于OpenG ...

  8. [WebGL入门]二,開始WebGL之前,先了解一下canvas

    年2月)HTML5依旧处于草案阶段. HTML5支持网页端的多媒体功能和画布功能,追加了非常多全新的更合理的Tag标签.各个浏览器也都在逐渐的完好这些新的特性. Canvas对象表示一个 HTML画布 ...

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

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

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

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:],另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误.欢迎大家指 ...

随机推荐

  1. poj3436 ACM Computer Factory, 最大流,输出路径

    POJ 3436 ACM Computer Factory 电脑公司生产电脑有N个机器.每一个机器单位时间产量为Qi. 电脑由P个部件组成,每一个机器工作时仅仅能把有某些部件的半成品电脑(或什么都没有 ...

  2. python抓取今日头条

    # 直接上代码,抓取关键词搜索结果的json数据# coding:utf-8 import requests import json url = 'http://www.toutiao.com/sea ...

  3. Emacs代码折叠

    进入HideShow mode: M-x hs-minor-mode(幸亏有tab键..要不这么长的命令=.=) 主要的功能: * C-c @ C-M-s 显示所有的代码 * C-c @ C-M-h ...

  4. 再谈git的http服务-权限控制hooks版

    通过git-http-backend方法提供的http服务基本上可以做到认证用户才能使用,但只能控制到服务器路径访问,而且无法区分读写.经过不懈努力,找到了方法,相关脚本及配置见后. 基本思路就是利用 ...

  5. android 代码混淆模板

    #指定代码的压缩级别 -optimizationpasses #包明不混合大小写 -dontusemixedcaseclassnames #不去忽略非公共的库类 -dontskipnonpublicl ...

  6. 开始一段新的敏捷学习之旅 —— IT帮读书会第4期《Scrum实战》

    刚看了一下,距离上一次写博客过去快1年半了.之前的知识管理都放到笔记软件中了,但是现在看来,收藏了很多东西,输入很多,但是输出有限. 学习任何领域的知识,如果只有输入没有输出,效果都是很有限的,有时需 ...

  7. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

  8. 8、QObject类 moc处理后代码

    QObject在QT中是所有类的基类,经过MOC处理后代码如下 之所以贴出这段代码,是因为很多流程追踪到最后一些关键性函数都是出自这个类 源码 4.8.6 MOC版本 63 1 /********** ...

  9. HBase启动后发现HMaster进程消失了

    HMaster没起来很多原因,这次看日志是这个.详细请看:http://www.bkjia.com/yjs/982064.html Hbase:namespace异常处理,hbase异常处理 Hbas ...

  10. USB2.0学习笔记连载(十):关于WIN8及以上系统哈希值问题

    笔者上一篇博客讲解了关于驱动的安装,笔者使用的系统是win8.1系统,那么对于win8系统及以上系统,会对外部设备,没有在windows系统中进行签名过的,都是不允许在windows系统中进行安装的, ...