着色器语言 GLSL ES 文档

Question

文档的阐述侧重于总结，把偏重于记忆性的东西总结出来，各类编程语言大同小异，本文档默认大家有计算机语言基础，比如变量、数据类型、结构体是对什么的抽象，在语言预处理、编译时起什么作用。

一、概述

着色器语言GLSL ES语法类似高级语言C语言，编程时需要定义变量的数据类型，属于强类型语言， 运行在GPU中，可以结合WebGL 在浏览器中展现模拟3D世界。

二、GLSL用户自定义标识符命名规则

变量、常量、函数、语句块名字命名，也就是着色器语言GLSL ES标识符的命名规则

• 标识符由字母（区分大小写）、数字和下划线组成
• 标识符第一位不能是数字，下划线和字母都可以
• 自定义标识符不能与GLSL关键字重复，比如现在版本中使用的if、Int、float等关键字
• 自定义标识符不能与GLSL保留字重复，比如未来新版本GLSL语言可能会使用的class、fevc2等保留字
• 自定义标识符名字也不能以OpenGL ES中的保留字gl_、webgl_开头

三、GLSL ES 1.0关键字

in	const	vec2	bvec2	if	do	highp
out	TRUE	vec3	bvec3	else	void	medium
inout	FALSE	vec4	bvec4	return	while	struct
attribute	float	ivec2	mat2	continue	sampler2D	lowp
varying	int	ivec3	mat3	for	samplerCube	precision
uniform	bool	ivec4	mat4	break	invariant	discard

四、GLSL ES 运算符（操作符）

运算符	意义	案例
+、-、*、/	加减乘除	运算优先级和数学一样
++、--	自增、自减	i++; //语句执行一次变量i本身加一
=	赋值	int a; a=10; //把整数10赋值给变量a
+=、-=、*=、/=	算术赋值	int a=2; a+=10; //整数a加上10得出12，把计算结果在赋值给a
<、>、<=、>=	与数学表达意思相同	比较结果返回布尔值 int a=10; int b=20; if(a<b){ a++; } // a小于b，返回true，if里面的语句会执行，否则不会执行
==、!=	比较	if(a==b); //判断a与b是否相等 if(a！=b); //判断a与b是否不相等

五、存储限定字

const

声明定义的是常量，不再改变。

// const 定义标识符PI代表圆周率
const float PI = 3.1415926;

代码案例

int r = 10;//定义半径
int s
s = PI*r*r;//PI代入公式求解面积，可以避免每次书写3.1415926。

attribute

类型数组构造对象创建的数据可以通过WebGL Javascript API传递给attribute定义的顶点着色器变量

用于声明顶点着色器坐标、颜色、纹理坐标属性的变量。attribute用在顶点着色器中用于全局变量的声明，不能用在片元着色器中，也不能在顶点着色器中声明局部变量。

声明全局变量 a_pos（4个浮点数的向量数据）

attribute vec4 a_pos;

在顶点着色器 main 主程序中把变量 a_pos 中的顶点信息赋值给顶点位置内置变量gl_Position

void main(){
  gl_Position = a_pos;
}

uniform

可以在顶点着色器和片元着色器中定义变量，要求以全局方式声明变量，顶点着色器和片元着色器可以共享同名字的uniform变量，uniform定义的是顶点共用数据，与逐顶点 attribute 变量不同， 比如一个三维模型发生旋转，所有模型的顶点都会发生一样的旋转，这时候就可以用uniform定义旋转变换矩阵变量，平移同样道理。

声明矩阵变量 u_ViewMatri

uniform mat4 u_ViewMatrix

varying

在顶点着色器和片元着色器中同时用 varying 声明同名变量，就可以实现顶点着色器向片元着色器传递数据的任务，比如一个几何体的区域颜色与几何的位置相关， 顶点着色器从 js 代码中获得颜色逐顶点数据后再传递给片元着色器

六、GLSL ES语言内置变量(顶点着色器)

在顶点着色器编程阶段使用，代码位于 main 函数里面，可以在main函数里面利用 vec4 等构造函数直接定义参数，也可以把 attribute 定义的全局变量赋值给内置变量

gl_Position

顶点位置

gl_Position = vec4(0.5,0.0,0.0,1.0);

gl_PointSize

顶点像素大小

gl_PointSize=1.0;

gl_FrontFacing

七、GLSL ES语言内置变量(片元着色器)

gl_FragColor

设置顶点颜色，在片元着色器编程阶段使用，代码位于 main 函数里面

红色不透明

gl_FragColor = vec4(1.0,0.0,0.0,1.0);