Stories

Detail Return Return

WebGL學習筆記着色器語法篇-數據類型篇 - Stories Detail

數據類型

基礎數據類型

關鍵字 數據類型
bool 布爾值 ture 或 false
int 整型數 值為整數,比如0,1,2,3...
float 單精度浮點數 浮點數用小數點表示,比如0.6,3.14,2.8

變量定義

// 整型變量
int count = 10;
// 浮點數變量
float num = 10.0;
// 聲明一個布爾值變量
bool lightBool = true;

數據類型

  • 錯誤賦值方式
float num = 1;
  • 正確賦值方式
float num = 1.0;

向量類型

關鍵字 數據類型
vec2 二維向量,具有xy兩個分量,分量是浮點數
vec3 三維向量 ,具有xyz三個分量,分量是浮點數
vec4 四維向量 ,具有xyzw四個分量,分量是浮點數
ivec2 二維向量,分量是整型數
ivec3 三維向量,分量是整型數
ivec4 四維向量,分量是整型數
bvec2 二維向量,分量是布爾值bool
bvec3 三維向量,分量是布爾值bool
bvec4 四維向量,分量是布爾值bool

向量定義

  • 二維向量定義
vec2 pos = vec2(1.0, 2.0);

三維向量定義方法類型

  • 二維向多維向量轉換
vec2 pos = vec2(1.0, 2.0);
vec4 newPos = vec4(pos,1.0 , 1.0);
向量意義

和數學上的向量意義不同,n維數據可以按照數據類型賦予意義。

例如賦予顏色意義

vec4 color = vec4(1.0,0.0,0.0,0.45)

如上:表示為rgba,同理三維向量也可表示rgb不透明。

vec2 location = vec2(108.23,27.98)

內置變量

所謂內置變量就是着色器語言GLSL ES默認提供的變量,不需要聲明,就可以使用。GLSL ES內置變量很多,下面介紹幾個下節課會用到的。
  • gl_PointSize:點渲染像素大小,數據類型浮點數float
  • gl_Position:頂點座標,數據類型四維向量vec4
  • gl_FragColor:像素顏色,數據類型四維向量vec4
注意:和JavaScript不同的是,GLSL ES語句結尾分號不可以省略。

Add a new Comments

Some HTML is okay.