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. Go Revel - Filter(过滤器)源码分析

    在 Go Revel - server.go 源码分析 http://www.cnblogs.com/hangxin1940/p/3265538.html 说到revel框架很多重要的东西都Filte ...

  2. 将安卓手机短信导入到iPhone6 plus中

    不越狱的情况下短信不能直接同步到iphone手机,视频.图片.联系人可以直接使用itools的手机搬家功能超方便从android到iphone中.短信得变通的处理才能导入. 工具: 安卓手机iPhon ...

  3. font-face 跨域解决

    nginx 里设置@font-face 跨域 server { ... # Fix @font-face cross-domain restriction in Firefox location ~* ...

  4. Hive Tuning(五) 标准调优清单

    Hive的标准调优清单,我们可以对照着来做我们的查询优化!

  5. mysql国内镜像下载网址

    http://mirrors.sohu.com/mysql/ http://mirrors.ustc.edu.cn/mysql-ftp/Downloads/ 开源镜像站点汇总 http://segme ...

  6. WebRTC 源码分析(二):安卓预览

    有过一定相机开发经验的朋友可能会疑惑,预览还有什么好分析的,不是直接 camera.setPreviewDisplay 或者 camera.setPreviewTexture 就能在 SurfaceV ...

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

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

  8. 如何使用Javascript XSLT 处理XML文件(支持Firefox)

    最近使用Firefox进行网页的调试,发现有些Javascript XSLT处理XML的语句仅仅支持IE浏览器.而网络中的一些介绍javascript XSLT 处理XML的文章基本上都是依据AJAX ...

  9. How to deal with "Could not find component on update server. Contact VMware Support or your system administrator." in Vmware.

    手动将vmware安装目录下的vmtools镜像文件,windows.iso文件放到虚拟机的光区里. 再进入虚拟机的系统,在系统里打开光盘进行安装

  10. USB2.0相关应用笔记集锦

    在AN65209中 有一些应用笔记集锦,希望对大家有用.当然AN65209这篇应用笔记很重要,希望大家一定要看!!!一定要看!!!!