本文主要介绍基本的GLSL ES语言

GLSL ES基础数据类型

着色器语言GLSL的基本数据类型和C语言一样具有常见的整型数int、浮点数float和布尔值bool类型数据。

关键字	数据类型	值
bool	布尔值	布尔变量值为true或false
int	整型数	值为整数，比如0,1,2,3...
float	单精度浮点数	浮点数用小数点表示，比如0.6,3.14,2.8

声明变量

声明变量，并赋值

// 整型变量
int count = 10;
// 浮点数变量
float num = 10.0;
// 声明一个布尔值变量
bool lightBool = true;

通过上面变量声明，你也可以看出，着色器语言声明变量和TypeScript一样需要注明数据类型，但是JavaScript不用注明变量数据类型。

先声明变量，后赋值或改变。

float c;
c = 100.0;

改变变量的值

float count = 10.0;
count = 20.0;

注意: 注意变量的数据类型和值要对应

变量简单运算

// 32位浮点数相加
float a = 2.0;
float b = 4.0;
float c = a+b;

//整数相加
int a = 2;
int b = 4;
int c = a+b;

两个变量进行运算，需要保持一样数据类型，否则报错。

声明一个常量const

着色器语言和javascript语言一样可以通过关键字const声明一个常量。

// 着色器语言定义一个整形常量
const int count = 10;
// 定义一个浮点数常量10.0
const float count = 10.0;

着色器语言和其它语言一样，声明一个变量，可以重新赋值，如果通过关键字const声明一个常量，顾名思义是常量，在代码中是不可以更改的。

const int count = 10;
// 错误写法
count= 20;

着色器语言GLSL ES声明函数

函数计算后,如果需要返回的值，通过关键字return返回，不过注意声明函数时候，函数名称前需要声明return返回值的数据类型。

// 声明一个函数，返回值为int类型
int add(int a, int b) {
    return a + b;
}
// 调用函数
int result = add(1, 2);

注意: 函数声明时候，函数名称前需要声明return返回值的数据类型。

声明一个无返回值函数,函数前面用void关键字即可。

// 声明一个无返回值函数
void print() {
    // 打印信息
    console.log("Hello World");
}
// 调用函数
print();

if语句

着色器语言GLSL中关于if语句、for语句的使用，和javascript语言、C语言中的if语句、for语句执行逻辑规则基本一致

float x = 10.0
if(x > 100.0){
  x = 100.0;
}


float x = 10.0
if(x > 100.0){
  x = 100.0;
} else {
  x = x + 1.0;
}

float x = 10.0
if(x<10.0){

}else if (x>=10.0 && x<20.0) {

}else if (x>=20.0 && x<30.0) {

}else {

}

for循环语句

和你平时写JavaScript的for循环语句基本相似，只是注意注明变量i的数据类型即可。

for (int i = 0; i < 20; i++) {
  ...
}

continue和break关键字

着色器语言continue和break关键字和JavaScript语言习惯也是相似的。 break表示终止for循环执行

for (int i = 0; i < 20; i++) {
  ...
  if(i==15){
    break;//直接终止循环执行，i=16、17等后面的循环不再执行
  }
  ...
}

for (int i = 0; i < 20; i++) {
  ...
  if(i==15){
    continue;//进行下次循环，执行i=16对应的循环
  }
  ...
}

向量表示颜色

vec3、vec4关键字和int、float一样也是用来表示数据的类型，vec3表示三维向量、vec4表示四维向量，vec3和vec4的每个分量都是浮点数float。

// 四维向量有四个分量，可以用来表示颜色的R、G、B、A
vec4 color = vec4(1.0, 0.0, 0.0, 1.0);//红色不透明

具体颜色解释

vec4 是一个四维向量，通常用来表示颜色，其中的四个分量分别是红（Red）、绿（Green）、蓝（Blue）和透明度（Alpha）。具体来说：

• R（Red）：红色分量，取值范围为0到1，表示红色的强度。
• G（Green）：绿色分量，取值范围为0到1，表示绿色的强度。
• B（Blue）：蓝色分量，取值范围为0到1，表示蓝色的强度。
• A（Alpha）：透明度分量，取值范围为0到1，表示颜色的透明度。值为1表示完全不透明，值为0表示完全透明

常见颜色

红色：vec4(1.0, 0.0, 0.0, 1.0) 绿色：vec4(0.0, 1.0, 0.0, 1.0) 蓝色：vec4(0.0, 0.0, 1.0, 1.0) 黄色：vec4(1.0, 1.0, 0.0, 1.0) 青色：vec4(0.0, 1.0, 1.0, 1.0)

关键字

关键字	数据类型
vec2	二维向量，具有xy两个分量，分量是浮点数
vec3	三维向量 ，具有xyz三个分量，分量是浮点数
vec4	四维向量 ，具有xyzw四个分量，分量是浮点数
ivec2	二维向量，分量是整型数
ivec3	三维向量，分量是整型数
ivec4	四维向量，分量是整型数
bvec2	二维向量，分量是布尔值
bvec3	三维向量，分量是布尔值
bvec4	四维向量，分量是布尔值

向量表示顶点位置坐标

三维向量vec3表示变量pos具有三个分量，可以用来表示顶点的xyz坐标。

vec3 pos = vec3(1.0, 2.0, 3.0);

用四维向量vec4表示齐次坐标，所谓齐次坐标，就是在GLSL ES中表示一个顶点坐标的的时候，增加一个分量，1.0表示。

vec4 pos = vec4(1.0, 2.0, 3.0,1.0);

一个三维向量转化为四维向量

vec3 pos = vec3(1.0, 2.0, 3.0);
vec4 newPos = vec4(pos,1.0);

一个二维向量转化为四维向量

vec2 pos = vec2(1.0, 2.0);
vec4 newPos = vec4(pos, 3.0,1.0);

内置变量

不管是JavaScript语言，还是着色器语言GLSL ES，你想使用一个变量，都需要先声明。

float a = 2.0;
float b = 4.0;
float c = a+b;

所谓内置变量就是着色器语言GLSL ES默认提供的变量，不需要声明，就可以使用。GLSL ES内置变量很多

• gl_PointSize：点渲染像素大小，数据类型浮点数float

• gl_Position：顶点坐标，数据类型四维向量vec4

• gl_FragColor：像素颜色，数据类型四维向量vec4

// 赋值浮点数
gl_PointSize = 20.0;

vec4前面三个参数表示xyz坐标，第四个参数按照GLSL ES语法习惯需要设置为1.0

// 赋值四维向量，表示xyz坐标是原点
gl_Position = vec4(0.0,0.0,0.0,1.0);

vec4前面三个参数是颜色RGB值，第四个参数是透明度值

// 赋值四维向量，表示红色不透明
gl_FragColor = vec4(1.0,0.0,0.0,1.0);

GLSL ES语句结尾分号

在JavaScript中，代码语句结尾的分号可以省略，但是 GLSL ES中分号不能省略。

float a = 2.0;//正常

分号省略，会报错

float a = 2.0//分号省略，会报错