threejs_ES GLSL知识

ES GLSL

1. 着色器语言用于计算机图形编程，运行在GPU中，平时所说的大多数语言编写的程序都是运行在CPU中。
2. 与OpenGL API相配合的是着色器语言GLSL，与OpenGL ES API、WebGL API相互配合的是着色器语言
3. GLSL ES。OpenGL标准应用的是客户端 OpenGL ES应用的是移动端，WebGL标准应用的是浏览器平台。

WebGL（全写Web Graphics Library）
GLSL(全写OpenGL Shading Language）

着色器语言ES GLSL与C语言的共同点

1.声明一个变量需要定义变量的数据类型
2.关键字const声明一个常量
3.基本数据类型（int、float、bool）
4.数据类型转换（整型数int、浮点数float、布尔值bool三种不同的数据值可以相互转化，把一个类型转化为另一个类型通过相应的内置函数int()、float()、bool()实现）

着色器语言ES GLSL的特别之处

1.向量数据类型
关键字| 数据类型
--|--
vec2 |二维向量，具有xy两个分量，分量是浮点数
vec3 |三维向量 ，具有xyz三个分量，分量是浮点数
vec4 |四维向量 ，具有xyzw四个分量，分量是浮点数
ivec2 |二维向量，分量是整型数
ivec3 |三维向量 ，分量是整型数
ivec4 |四维向量 ，分量是整型数
bvec2| 二维向量，分量是布尔值bool
bvec3| 三维向量 ，分量是布尔值bool
bvec4| 四维向量 ，分量是布尔值bool
使用时候需要构造函数赋值

vec3 direction;
// 赋值
direction = vec3(1.0,0.0,0.0);

访问获取向量分量
向量vector| 访问
--|--
第1个分量| vector.x
第2个分量| vector.y
第3个分量| vector.z
第4个分量| vector.w
2.矩阵数据类型

mat4 matrix4 = mat4(
1.1,2.1,3.1,4.1,
1.2,2.2,3.2,4.2,
1.3,2.3,3.3,4.3,
1.4,2.4,3.4,4.4
);
// 访问矩阵matrix4的第二列
vec4 v4 = matrix4[1];//返回值vec4(1.2,2.2,3.2,4.2)
// 访问矩阵matrix4的第三列第四行对应的元素
float f = matrix4[2][3];//返回4.3

3.着色器语言中的内置变量
内置变量 |含义 |值数据类型
--|--|--
gl_PointSize| 点渲染模式，方形点区域渲染像素大小 |float
gl_Position| 顶点位置坐标| vec4
gl_FragColor |片元颜色值 |vec4
gl_FragCoord |片元坐标，单位像素| vec2
gl_PointCoord |点渲染模式对应点像素坐标 |vec2

  //给内置变量gl_PointSize赋值像素大小，注意值是浮点数
  gl_PointSize=20.0;
  //顶点位置，位于坐标原点
  gl_Position = vec4(0.0,0.0,0.0,1.0);
  // 片元沿着x方向渐变
  gl_FragColor = vec4(gl_FragCoord.x/500.0*1.0,1.0,0.0,1.0);