webgl學習筆記4_初識着色器語言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.矩陣數據類型

關鍵字	數據類型
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);