WebGL学习笔记（一）

一个最简单的webgl程序

*引入的js文件是简单的webgl辅助函数 *

程序中有一段着色器程序。

着色器程序有两种：顶点着色器和片元着色器

上面这段代码的执行过程：

执行过程

下面是简版的

简单过程

initShaders(gl,vshader,fshader)	在webgl系统内部建立和初始化着色器
参数	gl	指定渲染上下文
	vshader	指定顶点着色器的代码
	fshader	指定片元着色器的代码

返回值	true	初始化着色器代码成功
	false	初始化着色器代码失败

着色器代码和C语言一样，有一个main（）入口函数，他没有返回值

顶点着色器的内置变量

类型和变量名	描述	是否必需
vec4 gl_Position	表示顶点位置	是
float gl_PointSize	表示点的尺寸（像素数）	否，默认为1.0

GLSE ES是一种强类型的语言，必须明确指明变量的类型，下面是几种类型

类型
float	表示浮点数
vec4	表示由四个浮点数组成的矢量

其中，由四个分量组成的矢量被称为齐次坐标，它能够提高运算效率，虽然齐次坐标是四维的，但如果最后一个分量是1.0，这个齐次坐标就可以表示为“前三个分量为坐标值”的那个点；

齐次坐标如果用（x,y,z,w）,就等价于三维坐标（x/w,y/w,z/w）。

片元着色器的内置变量

类型和变量名	描述
vec4 gl_FragColor	指定片元颜色（RGBA格式）

绘制操作

使用`gl.drawArrays(gl.POINTS,0,1); 该函数规范如下：

gl.drawArrays(mode,first,count)
执行顶点着色器，按照mode参数指定的方式绘制图形
参数	mode	指定绘制的方式，可接受以下常量符号：gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP, gl.TRIANGLES, gl.TRIANGLE_STRIP ,gl.TRIANGLE_FAN
	first	指定从哪个顶点开始绘制（整型数）
	count	指定绘制需要用到多少个顶点（整型数）
返回值	无
错误	INVALI D_EN UM	传入的mode参数不是前述参数之一
	INVALID_VALUE	传入的first或count是负数

当程序调用gl.drawArrays()时，顶点着色器将被执行count次，每次处理一个顶点。一旦顶点着色器着色器执行完毕，片元着色器将开始执行。最后一个基本图形就绘制在屏幕上了。