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:表示有四个浮点数组成的矢量
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入门的更多相关文章
- WebGL入门教程(五)-webgl纹理
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...
- WebGL入门教程(四)-webgl颜色
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...
- WebGL入门教程(三)-webgl动画
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...
- WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
- 【WebGL入门】画一个旋转的cube
最近搜罗了各种资料,发现WebGL中文网特别好用,很适合新手入门:http://www.hewebgl.com/article/getarticle/50 只需要下载好需要的所有包,然后用notepa ...
- WebGL入门教程(一)-初识webgl
一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...
- WebGL 入门-WebGL简介与3D图形学
什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象. WebGL基于OpenG ...
- [WebGL入门]二,開始WebGL之前,先了解一下canvas
年2月)HTML5依旧处于草案阶段. HTML5支持网页端的多媒体功能和画布功能,追加了非常多全新的更合理的Tag标签.各个浏览器也都在逐渐的完好这些新的特性. Canvas对象表示一个 HTML画布 ...
- [WebGL入门]十四,绘制多边形
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...
- [WebGL入门]十九,遮挡剔除和深度測试
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:],另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误.欢迎大家指 ...
随机推荐
- Go Revel - Filter(过滤器)源码分析
在 Go Revel - server.go 源码分析 http://www.cnblogs.com/hangxin1940/p/3265538.html 说到revel框架很多重要的东西都Filte ...
- 将安卓手机短信导入到iPhone6 plus中
不越狱的情况下短信不能直接同步到iphone手机,视频.图片.联系人可以直接使用itools的手机搬家功能超方便从android到iphone中.短信得变通的处理才能导入. 工具: 安卓手机iPhon ...
- font-face 跨域解决
nginx 里设置@font-face 跨域 server { ... # Fix @font-face cross-domain restriction in Firefox location ~* ...
- Hive Tuning(五) 标准调优清单
Hive的标准调优清单,我们可以对照着来做我们的查询优化!
- mysql国内镜像下载网址
http://mirrors.sohu.com/mysql/ http://mirrors.ustc.edu.cn/mysql-ftp/Downloads/ 开源镜像站点汇总 http://segme ...
- WebRTC 源码分析(二):安卓预览
有过一定相机开发经验的朋友可能会疑惑,预览还有什么好分析的,不是直接 camera.setPreviewDisplay 或者 camera.setPreviewTexture 就能在 SurfaceV ...
- React Native常用第三方组件汇总--史上最全[转]
本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...
- 如何使用Javascript XSLT 处理XML文件(支持Firefox)
最近使用Firefox进行网页的调试,发现有些Javascript XSLT处理XML的语句仅仅支持IE浏览器.而网络中的一些介绍javascript XSLT 处理XML的文章基本上都是依据AJAX ...
- How to deal with "Could not find component on update server. Contact VMware Support or your system administrator." in Vmware.
手动将vmware安装目录下的vmtools镜像文件,windows.iso文件放到虚拟机的光区里. 再进入虚拟机的系统,在系统里打开光盘进行安装
- USB2.0相关应用笔记集锦
在AN65209中 有一些应用笔记集锦,希望对大家有用.当然AN65209这篇应用笔记很重要,希望大家一定要看!!!一定要看!!!!