OpenGL ES着色器语言(GLSL ES)规范 ——上篇

---

前言

着色器语言通过控制GPU来进行前端图形的渲染，WebGL使用名为GLSL ES的规范进行着色器语言的编写，GLSL ES是在OpenGL的基础上进行一定的精简后形成的，它的语法与C语言有些类似。 本文对webgl常用到的GLSL ES知识进行记录。
着色器以字符串的形式存储在javascript中

---

OpenGL ES基础

一段基本的着色器代码

   // 顶点着色器
	const vertex =  `
		attribute vec4 aPosition;
		void main() {
			gl_Position = aPosition;
			gl_PointSize = 10.0;
		}
	`
	// 片元着色器
	const fragment =  `
		precision highp float;
		uniform vec4 uColor;
		void main(){
			gl_FragColor = uColor;
		}
	`

大小写和分号

• 大小写敏感

const vertex =  `
		// 不会报错，aPosition和aposition是两个不同的变量
		attribute vec4 aPosition;
		attribute vec4 aposition;
		void main() {
			gl_Position = aPosition;
			gl_PointSize = 10.0;
		}
	`

• 强制分号

const vertex =  `
		attribute vec4 aposition  // 运行会报错
		void main() {
			gl_Position = aPosition;
			gl_PointSize = 10.0;
		}
	`

• 执行次序

着色器的执行从main函数开始逐行运行，无论是顶点着色器还是片元着色器都有且只有一个main函数作为整个程序的入口，该函数由void声明，不接受任何参数，也没有返回值。

• 注释

着色器的注释与js相同， // 进行单行注释；/* xxx */ 进行多行注释。

数据值类型、命名规范、类型转换

GLSL 是强类型语言，数据声明时必须指定类型。GLSL支持整形（int）,浮点型（float）,布尔（bool）三种数据类型。

const vertex =  `
		void main() {
			int ten = 10; // 整型
			float pie = 3.14; // 浮点型
			bool isOk = true; // 布尔型
			
			gl_Position = aPosition;
			gl_PointSize = 10.0;
		}
	`

变量的命名需要遵守以下规则：

• 只包括a-z，A-Z，0-9，_,无其它特殊字符
• 首位不能是数字
• 不能以gl_、webgl_、_webgl_开头
• 避免与webgl内置关键字或者保留字重名

不同类型的变量之间不能直接相互赋值，但是通过内置函数进行类型转换后可以：

名称	参数类型	含义
int ( x )	float / bool	转换为整数
float ( x )	int / bool	转换为小数
bool ( x )	float / int	转换为布尔

运算符

矢量和矩阵

矢量和矩阵类型

类型	GLSL ES类型	含义
矢量	vec2、vec3、vec4	长度为2、3、4，元素类型为float的矢量
矢量	ivec2、ivec3、ivec4	长度为2、3、4，元素类型为int的矢量
矢量	bvec2、bvec3、bvec4	长度为2、3、4，元素类型为bool的矢量
矩阵	mat2、mat3、mat4	维度为2 * 2、3 * 3、4 * 4，元素类型为float的矩阵

矢量构造、访问

• 矢量构造函数赋值

const vertex =  `
		void main() {
			vec4 vector4 = vec4(1.0, 1.0, 1.0, 1.0); // 普通赋值
			vec4 vector4_copy = vec4(vector4); // 复制
			vec2 vector2 = vec2(vector4); // 取vector4前两个值组成矢量
			vec4 vector4_copy2 = vec4(2.0); // vec4(2.0, 2.0, 2.0, 2.0)
			vec4 vector4_new = vec4(vector2, vector2); // 组装成一个vec4
			
			···
		}
	`

• 矢量访问

可以通过 . 进行访问

const vertex =  `
		void main() {
			vec4 vector4 = vec4(1.0, 2.0, 3.0, 1.0); // 普通赋值
			
			float v1 = vector4.x  // 1.0
			vec2 v2 = vector4.xy  // vec2(1.0, 1.0)
			vec2 v2_ = vector4.zx  // vec2(3.0, 1.0)
			···
		}
	`

也可以通过 [ ] 获取下标进行访问

const vertex =  `
		void main() {
			vec4 vector4 = vec4(1.0, 2.0, 3.0, 1.0); // 普通赋值
			
			float v1 = vector4[0]  // 1.0
		}
	`

矩阵构造、访问

• 矩阵赋值

矩阵传入值必须是列主序的

像上面整个矩阵，赋值方式如下：

mat m4 = (
	a,  e,  i,  m,
    b,  f,  j,  n,
    c,  g,  k,  o,
    d,  h,  l,  p
)
// 或者
vec4 vec1 = (a,  e,  i,  m)
vec4 vec2 = (b,  f,  j,  n)
vec4 vec3 = (c,  g,  k,  o)
vec4 vec4 = (d,  h,  l,  p)

mat4 m4 = mat4(vec1, vec2, vec3, vec4)

• 矩阵访问

可以通过 . 和 [ ] 进行访问

const vertex =  `
		void main() {
			vmat m4 = (
				a,  e,  i,  m,
   				b,  f,  j,  n,
    			c,  g,  k,  o,
    			d,  h,  l,  p
			)

			vec4 v4_ = vector4[3];  // [m, n, o, p]
			float v4_2 = vector4[3][1] ; // n
			vec4 v4_2 = vector4[3].y;  // n
			···
		}
	`

矢量矩阵运算规则

• 当矩阵之间进行计算时（+ 、- 、* 、/），遵从矩阵运算规则。
• 矢量之间进行计算时（+ 、- 、* 、/），对应位置上的元素进行相应计算。
• 矩阵矢量之间进行计算时（* 、/），当向量在左，计算规则按照1 * n的矩阵与n阶矩阵相乘；当向量在右边，按照n阶矩阵与n*1的矩阵相乘。

特殊类型—结构体和数组

结构体

GLSL ES支持使用结构体来创建用户自定义的类型，与C++十分类似：

// 定义结构体pen
struct pen {
	vec4 color;
	float lenght;
}
// 声明pen类型的对象
pen pen1, pen2;
// 给结构体赋值
pen1 = pen(vec4(1.0,0.0,0.0,1.0, 10.1);
// 访问结构体
vec4 pen1_color = pen1.color;
float pen1_length = pen1.length;

数组

GLSL ES同时也支持数据类型，但是仅支持一维数组，数组不支持pop()和push()操作，数组不能一次性初始化，必须显式地对每个元素初始化。

// 声明数组
float floatArray[4]; // 元素类型是float，长度是4的数组
vec4 vec4Array[2]; // 元素类型是vec4，长度是2的数组

// 数组赋值
floatArray[0] = 0.0;
floatArray[1] = 1.0;
floatArray[2] = 2.0;
floatArray[3] = 3.0;

vec4Array[0] = (0.0,0.0,0.0,0.0);
vec4Array[1] = (1.0,1.0,1.0,1.0);

取样器

GLSL ES支持一种名为取样器（sampler的变量类型获取纹理，取样器变量必须是uniform变量,取样器支持两种类型sampler2D和samplerCube，sampler2D的使用见webgl纹理贴图机制，samplerCube是立方体纹理，使用和sampler2D差不多，唯一区别就是在使用gl.texImage2D（）进行图像分配给纹理对象时，要把六个面的数据都分配一次。

总结

OpenGL ES基础

• 一段基本的着色器代码
• 大小写和分号
• 数据值类型、命名规范、类型转换
• 运算符

矢量和矩阵

• 矢量和矩阵类型
• 矢量构造、访问
• 矩阵构造、访问
• 矢量矩阵运算规则

特殊类型—结构体和数组

• 结构体
• 数组

取样器