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