認識著色器

在〈準備WebGL Canvas〉中談到，WebGL 的組成中需要著色器程式，初學WebGL 時，著色器程式中基本上會有頂點著色器（Vertex shader）及片段著色器（Fragment sh... 回WebGL 在〈準備WebGLCanvas〉中談到，WebGL的組成中需要著色器程式，初學WebGL時，著色器程式中基本上會有頂點著色器（Vertexshader）及片段著色器（Fragmentshader），前者主要負責頂點的運算，將頂點對應至畫面上的二維座標，後者則是計算出需要繪製的像素顏色值。

著色器使用GLSL撰寫，並透過WebGL的JavaScriptAPI編譯、繫結（attach）、鏈結（link）等動作成為著色器程式，接下來會藉由在Canvas的正中央繪製一個點，認識一下這個流程。

頂點著色器的作用是產生裁剪空間（Clipspace）座標，例如，底下的頂點著色器始終生成裁剪空間中心座標： voidmain(void){ gl_Position=vec4(0.0,0.0,0.0,1.0); } 在被要求計算裁剪空間座標時，這個頂點著色器實際上沒有從屬性（Attribute）或緩衝區（Buffer）取得資料來進行計算，只是單純地生成固定的座標值(0.0,0.0,0.0)，分別代表(x,y,z)，裁剪空間三維座標的分量值必定介於-1.0~1.0，超過範圍的資料會被裁剪不被繪製，至於(x,y,z)的正方向如下（中心為(0,0,0)）： 如果要將Canvas的顯示空間對應至裁剪空間，那麼通常可以將Canvas顯示空間最左邊對應至裁剪空間的x的-1.0，最右邊對應至1.0，顯示空間最下方對應至裁剪空間y的-1.0，最上方對應至1.0，而z代表著深度，繪製像素時，z的資訊會轉換為0~1寫入深度緩衝，在啟用深度測試的情況下，預設像素的深度輸入值小於深度緩衝中對應位置的值才會進行繪製，也就是說，近物遮蓋遠物（可以改變這個行為）。

在GLSL中，gl_開頭的變數意謂著保留的變數，gl_Position用來指定裁剪空間中的座標，它需要指定GLSL中vec4型態的值，也就是具有四個分量的浮點數，實際上座標只需要用到前三個分量，第四個分量就座標本身來說用不上，然而慣例上會設為1.0，這在一些向量計算時會比較方便。

那麼一個片段著色器，看起來會是如何呢？ voidmain(void){ gl_FragColor=vec4(1.0,0.0,0.0,1.0); } 這個片段著色器實際上也沒有從屬性或緩衝區取得資料來進行計算，只是單純地生成固定的的顏色值(1.0,0.0,0.0)，也就是RGB，三個分量必定介於-1.0~1.0，同樣地，在這邊vec4的第四個分量慣例上會設為1.0。

在這邊要先知道的是，在被要求渲染時，這邊頂點的頂點著色器直接設定裁剪空間座標為空間的中心，之後片段著色器將直接將之繪製為紅色，之後會看到如何從屬性或緩衝區取得資料進行計算。

著色器要寫在哪呢？可以是個（透過Ajax或FetchAPI）下載的檔案，或者是寫在JavaScript字串裏（透過ES6的模版字串會比較方便），或者是個寫在裏的文字。

例如：