ES语言 基础语法入门

令狐冲

ES语言 基础语法入门

可能大家对GLSL 比较陌生，下面将详细介绍下这个 OpenGL 着色器语言。在 OpenGL ES 和 WebGL 中使用的是 GLSL ES，可能大家已经猜到了，WebGL 中使用是基于 GLSL 1.2 也是 GLSL ES 2.0 版本，WebGL2 中使用的是基于 3.30 的版本，也是 GLSL ES 的 3.0 版本。

它是强类型语言，每一句都需要有分号。它注释语法和JS 一样，变量名规则也和 JS 一样，不能使用关键字，保留字，不能以 gl_、webgl_ 或 _webgl_ 开头。

GLSL 中主要有三种数据值类型，浮点数、整数和布尔。注意浮点数必须要带小数点。类型转换可以直接使用 float、int 和 bool 函数。

float f =float(1);

它的运算符基本也和JS 一样，++ -- += && || 还有三元运算符都支持。

矩阵和矢量

因为是用来画图的，所以对矩阵和矢量也有支持。

vec2、vec3 和 vec3 代表 2、3 和 4 个浮点数的矢量。

ivec2、ivec3 和 ivec3 整数版本。

bvec2、bvec3 和 bvec3 布尔版本。

mat2、mat3 和 mat4 2x2、3x3 和 4x4 的矩阵。

vec3 color =vec3(1., 1., 1.); // 白色

GLSL 对矢量的赋值、获取和构造也十分强大。

vec4 v4 =vec4(1.,2.,3.,4.);
vec3 color = v4.rgb; // 可是用 rgba 获取，相当于 vec3(1., 2., 3.)
vec3 position = v4.xyz; // 也可以用 xyzw 获取
vec3 texture = v4.stp; // 也可以使用 stpq 获取

vec2 v2 =vec2(v4); // 使用 v4 的前两个元素构造
vec4 v41 =vec4(v2, v4.yw); // 使用 v2 和 v4 的后两个元素构造
vec4 v42 =vec4(1.); // 4 个元素都设成 1.
v42.g =2.;
v42[1] =3.; // 也可以使用 [] 获取

mat2 m2 =mat2(1., 2., 3., 4.);
vec2 v21 = m2[0]; // [1., 2.]
float f = v21[0].x // 混合使用都行

分支和循环

分支和循环也和JS 一样。

if (true) {} elseif (true) {} else {}
for (int i =0; i <3; i++) {
  continue; // 或 break
}

函数

每个着色器中都必须有个 main 函数，它会被自动执行，函数的返回值写在函数名前，没返回值就为 void。

float add(float a, float b) {
  return a + b;
}

如果函数定义在调用之后则需要先声明该函数。

float add(float a, float b); // 声明
voidmain() {
  float c =add(1., 1.);
}
float add(float a, float b) {
  return a + b;
}

另外函数参数还有限定词。

in 默认，表示像函数传入参数。

const in 和 in 一样，但是不能修改。

out 在函数中被赋值，并被传出。

inout 传入参数，在函数中被赋值，并被传出。

inout 传入参数，在函数中被赋值，并被传出。
voidadd(in float a, in float b, out float answer) {
  answer = a + b; // 不使用 return 而用 out
}

GLSL 中还有一些内置函数，例如 sin, cos, pow, abs 等等。

精度限定字

精度限定字用来控制数值的精度，越高的精度也就意味着更慢的性能，所以我们要合理的控制程序的精度。GLSL 中分为三种精度 highp、mediump 和 lowp，分别是高、中和低精度。

mediump float size; // 声明一个中精度浮点数
highp int len; // 声明一个高精度整数
lowp vec4 v; // 低精度矢量

这样一个一个变量的声明，非常麻烦，我们还可以一次性声明这些精度。

precision mediump float; // 浮点数全部使用中精度

GLSL 已经帮我们设置了默认变量精度。

在顶点着色器中 int 和 float 都是 highp。

在片元着色器中 int 是 mediump，float 没有定义。

这也就是为什么上面片元着色器中第一行代码是 precision mediump float; 了，因为 OpenGL 没有设置默认值，所以必须得我们自己设置。

另外在顶点和片元着色器 sampler2D 和 samplerCube 都是 lowp