webgl学习笔记4_初识着色器语言ES GLSL-摩杜云开发者社区

ES GLSL

着色器语言用于计算机图形编程，运行在GPU中，平时所说的大多数语言编写的程序都是运行在CPU中。
与OpenGL API相配合的是着色器语言GLSL，与OpenGL ES API、WebGL API相互配合的是着色器语言
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.矩阵数据类型

关键字	数据类型
mat2	2x2矩阵，4个元素
mat3	3x3矩阵，9个元素
mat4	4x4矩阵，16个元素

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);