参考资料：threejs中文网
threejs qq交流群：814702116
着色器GLSL ES语言10分钟了解
学习原生WebGL，除了前面说的JavaScript语言之外，你还需要学习一门新的语言就是着色器语言GLSL ES。
平时你接触的JavaScript、C、java等语言是在CPU上执行，对于着色器语言GLSL ES是在显卡GPU上执行。
如何学习
着色器语言GLSL ES语法虽然类似Typescript、C等语言，但是GLSL主要在GPU上执行，有自身的特殊性，只有结合WebGL案例学习GLSL ES语法，才能更好的理解，所以这节课只介绍GLSL ES部分语法。
所以你本节课不用写任何代码，只要跟着视频过一遍即可，后面还会结合WebGL案例具体介绍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不用注明变量数据类型。
// JavaScript语言声明变量，不用设置数据类型
let count = 10;
先声明变量，后赋值或改变。
float c;
c = 100.0;
改变变量的值
float count = 10.0;
count = 20.0;
注意: 注意变量的数据类型和值要对应
错误赋值方式
float num = 1;
正确赋值方式
float num = 1.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
着色器语言和C语言、javascript语言一样可以通过关键字const声明一个常量。
// 着色器语言定义一个整形常量
const int count = 10;
// 定义一个浮点数常量10.0
const float count = 10.0;
着色器语言和其它语言一样，声明一个变量，可以重新赋值，如果通过关键字const声明一个常量，顾名思义是常量，在代码中是不可以更改的。
const int count = 10;
// 错误写法
count= 20;
着色器语言GLSL ES声明函数
函数计算后,如果需要返回的值，通过关键字return返回，不过注意声明函数时候，函数名称前需要声明return返回值的数据类型。
// 两个参数是浮点数，相加后返回值自然也是浮点数
float add(float x,float y){
return x + y
}
声明一个无返回值函数,函数前面用void关键字即可。
void main(){
float x = 10.0;
}
if语句
着色器语言GLSL中关于if语句、for语句的使用，和javascript语言、C语言中的if语句、for语句执行逻辑规则基本一致，这里默认你已经有一定的编程基础，也就不做过多讲解，只是简单说明一下。
单独使用if
float x = 10.0
if(x > 100.0){
x = 100.0;
}
if-else形式
float x = 10.0
if(x > 100.0){
x = 100.0;
} else {
x = x + 1.0;
}
if-else if-else if-...else形式
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等后面的循环不再执行
}
...
}
continue表示直接跳到for循环的下一个循环
for (int i = 0; i < 20; i++) {
...
if(i==15){
continue;//进行下次循环，执行i=16对应的循环
}
...
}
向量表示颜色
在GLSL ES中，向量可以表示多种数据，也能进行多种数学运算，咱们这里先不讲解那么多，说些简单的。
vec3、vec4关键字和int、float一样也是用来表示数据的类型，vec3表示三维向量、vec4表示四维向量，vec3和vec4的每个分量都是浮点数float。
// 四维向量有四个分量，可以用来表示颜色的R、G、B、A
vec4 color = vec4(1.0, 0.0, 0.0, 1.0);//红色不透明
| 关键字 | 数据类型 |
|---|---|
| vec2 | 二维向量，具有xy两个分量，分量是浮点数 |
| vec3 | 三维向量 ，具有xyz三个分量，分量是浮点数 |
| vec4 | 四维向量 ，具有xyzw四个分量，分量是浮点数 |
| ivec2 | 二维向量，分量是整型数 |
| ivec3 | 三维向量 ，分量是整型数 |
| ivec4 | 四维向量 ，分量是整型数 |
| bvec2 | 二维向量，分量是布尔值bool |
| bvec3 | 三维向量 ，分量是布尔值bool |
| bvec4 | 四维向量 ，分量是布尔值bool |
向量表示顶点位置坐标
三维向量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代码注释
GLSL ES代码注释和JavaScript语言的习惯一样。
-
单行注释符号
// -
快级注释符号
/* */
GLSL ES语句结尾分号
在JavaScript中，代码语句结尾的分号可以省略，但是 GLSL ES中分号不能省略。文章来源：https://www.toymoban.com/news/detail-774947.html
float a = 2.0;//正常
分号省略，会报错文章来源地址https://www.toymoban.com/news/detail-774947.html
float a = 2.0//分号省略，会报错
到了这里，关于着色器GLSL ES语言10分钟了解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
