在WebGL中，著色器是用來定義圖形的外觀和行為的代碼段。著色器通常分為頂點著色器和片元著色器兩種類型。
頂點著色器主要負責對頂點的位置進行變換和投影操作，以及傳遞頂點屬性給片元著色器。片元著色器則負責計算每個像素的顏色值。
以下是一個簡單的頂點著色器和片元著色器示例：
// 頂點著色器
attribute vec3 a_position;
void main() {
gl_Position = vec4(a_position, 1.0);
}
// 片元著色器
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
在這個示例中，頂點著色器接收一個頂點位置屬性，并將其賦值給gl_Position變量，該變量表示頂點的最終位置。片元著色器則簡單地將所有像素設置為紅色。
要在WebGL中使用這些著色器，需要將它們編譯為著色器對象，然后將它們附加到著色器程序中，并鏈接該程序。最后，使用這個著色器程序來繪制圖形。
這只是一個簡單的示例，實際上著色器可以實現更復雜的視覺效果，比如光照、陰影等。可以通過在頂點著色器和片元著色器中編寫不同的代碼來實現這些效果。
