GLSL 程式設計/簡介
GLSL（OpenGL 著色語言）是幾種常用的即時渲染著色語言之一（其他例子包括 Cg 和 HLSL）。這些著色語言用於編寫著色器（即或多或少的小程式），這些程式在 GPU（圖形處理單元）上執行，即計算機圖形系統的處理器 - 與計算機的 CPU（中央處理單元）相對。
GPU 是大規模並行處理器，功能非常強大。如今大多數遊戲和其他互動式圖形應用程式中的即時圖形如果沒有 GPU 是不可能實現的。然而，要充分利用 GPU 的效能，有必要直接對其進行程式設計。這意味著必須編寫可以由 GPU 執行的小程式（即著色器）。編寫這些著色器的程式語言是著色語言。GLSL 是其中之一。事實上，它是幾個 3D 圖形 API（應用程式程式設計介面）的著色語言，即 OpenGL、OpenGL ES 2.x 和 WebGL。因此，GLSL 通常用於桌上型電腦、移動裝置和 Web 應用程式。
學習 GLSL 有很多好處
- 它提供了對現代即時圖形的洞察，即 GPU 的工作方式。大多數高效能即時圖形應用程式（如遊戲）在某種程度上依賴於 GPU 上的計算，即著色器程式。
- 它使您能夠編寫 GLSL 著色器（從而編寫高效的圖形應用程式）並理解其他著色語言（如 Cg 和 HLSL），因為它們之間的差異並不太大。
- 它還可以幫助您更好地理解和使用高階圖形開發工具，因為它們通常也基於著色器。
- 它可能有助於您找到工作，因為著色器程式設計技能對於遊戲程式設計師、圖形開發人員、技術美術師等來說是一個優勢。
GLSL 並不是一種特別複雜的程式語言，用 GLSL 編寫的典型程式（即著色器）相當小。儘管如此，學習 GLSL 仍然具有挑戰性，原因如下：
- GLSL 只是其他圖形 API（如 OpenGL、OpenGL ES 2.x 和 WebGL）的一部分；因此，GLSL 通常與相當大的圖形 API 一起學習，這通常是為圖形應用程式設定 GLSL 程式碼和所需圖形資料（如網格和影像）所必需的。
- GLSL 程式設計需要一些關於 GPU 實現的可程式設計圖形管道的知識。
- 大多數 GLSL 著色器都需要矩陣和向量運算，這需要對向量和矩陣運算有一定的瞭解。
- GLSL 很難除錯。大多數情況下，圖形只是簡單地無法繪製，沒有任何錯誤或崩潰。問題最好透過對 GLSL 基礎知識的透徹理解來解決，而不是嘗試許多小的程式碼更改或複製程式碼片段，就像其他形式的程式設計中常見的那樣。
因此，如果你喜歡圖形但討厭程式設計和數學，GLSL 會很有挑戰性。
這本華夏公益教科書是針對學生而建立的，他們不喜歡程式設計也不喜歡數學。這本書的基本動機是，學生在從事具體專案時，學習程式設計環境、程式語言和 API 的積極性要高得多。這樣的專案通常是在特定平臺上開發的，因此本書的方法是在特定平臺或框架中展示 GLSL，例如 Unity 遊戲引擎、Blender 遊戲引擎、帶有 GLUT 的 OpenGL、HTML5、PowerVR SDK、Android Java SDK、iOS SDK 等。幾乎所有這些平臺都不支援最新版本的 GLSL，並且它們都有自己的特定陷阱和缺陷。
因此，本書沒有介紹最新版本的 GLSL（這對那些真正嘗試用 GLSL 程式設計的學習者來說可能並不重要），而是試圖介紹在特定平臺上使用的 GLSL 的特定版本。當然，這些版本的 GLSL 之間有很大的重疊，但它們之間的差異通常很細微，可能會導致很多問題。事實上，要求學生弄清楚如何將教科書中 GLSL 著色器的示例適應某個平臺的要求並不是一個好主意。相反，本書針對每個平臺都提供了具體的示例。
這本華夏公益教科書關於 Unity、Blender、帶有 GLUT 的 OpenGL、HTML5 等中 GLSL 的部分是相互獨立的。但是，它們之間有一定的順序
- Unity 幾乎不需要任何設定程式碼；匯入網格和紋理通常只需拖放和點選幾下滑鼠。
- Blender 需要一些用 Python 編寫的設定程式碼；網格和紋理可以在 Blender 中匯入。
- HTML5（WebGL）需要相當多的設定程式碼，但可以在任何現代 Web 瀏覽器中執行，無需編譯和連結應用程式。（我沒有研究在 WebGL 中匯入網格和影像。）
- 帶有 GLUT 的 OpenGL 需要庫（OpenGL、GLUT，通常還有 GLEW 或類似的庫來訪問所有擴充套件）、編譯器和連結器，以及通常用於匯入影像和網格的庫。當然，它還需要大量的設定程式碼。
- 在移動平臺上進行 GLSL 程式設計在某種程度上是特定於作業系統或框架的（例如 PowerVR SDK）。
因此，即使您不打算在 Unity 或 Blender 中使用 GLSL，從 Unity 或 Blender 中開始編寫 GLSL 程式碼可能也是一個好主意，這樣可以快速學習基礎知識，而不必擔心設定程式碼和匯入網格和影像的煩人細節。
這本華夏公益教科書的每個部分都組織成一系列教程，其中包含產生特定效果的工作示例。這些示例決定了 GLSL 語法中哪些部分將被討論。GLSL 語法的一份全面描述可以在 Khronos 組 的規範中找到：用於 OpenGL 的 GLSL 和 用於 OpenGL ES 2.x 和 WebGL 的 GLSL。
有一種趨勢是將 OpenGL 圖形管道逐級展示；然而，這種逐級的方法往往會使人們更難理解圖形管道的各個部分如何以各種組合方式協同工作來產生特定效果。因此，對每個示例的討論也決定了圖形管道的哪些部分將被討論。儘管如此，還是有一些平臺無關的部分，用於提供圖形管道的概述、傳統矩陣變換的概述、GLSL 特定向量和矩陣運算的概述、關於如何將矩陣變換應用於點、向量和法線的討論，以及其他一些通用主題。
顯然，這本華夏公益教科書不涉及 Cg、HLSL 或除 GLSL 之外的任何其他著色語言。（有關 Cg 的介紹，請參閱華夏公益教科書 Cg 程式設計，Cg 與 HLSL 非常相似。）此外，這本華夏公益教科書不涉及用於 Cg 和 HLSL 程式設計師的 GLSL。它適合所有人（包括 Cg 和 HLSL 程式設計師）。此外，這本華夏公益教科書不涉及編寫高效的 GLSL 著色器。它旨在讓讀者能夠編寫有效的著色器。最佳化會增加一整層額外的任務（引入適當的近似值、選擇適當的精度修飾符、決定是否使用查詢表、透過巧妙的算術表示式避免分支等），這些任務超出了 GLSL 入門的範圍。當然，現實生活是不同的；然而，你不會透過參加一級方程式比賽來學習駕駛。
歡迎來自所有人的貢獻。在新增新的示例時，應確保不會侵犯版權，並且所有概念都已在示例本身或同一部分的先前示例中進行了解釋。
除非另有說明，否則這本華夏公益教科書中的所有示例原始碼均歸為公有領域。因此，您可以對其進行修改並根據您喜歡的任何許可證對其進行重新授權。原始碼應嵌入在 <syntaxhighlight lang="..."> ... </syntaxhighlight> 中，以便使用語法高亮顯示。
同一部分的其他維基頁面應透過模板進行引用，例如{{GLSL Programming Unity SectionRef}}，該模板應將維基頁面的名稱（例如 X）作為第一個引數。輸出應類似於Section “X”。然而，在印刷版中，它應該包含一個節號。
在引用圖時，請嘗試使用適用於任何圖位置的引用（例如“相應的圖”），或者使用模板為線上版本和印刷書籍生成不同的引用（例如the figure {{Hide in print|to the left}}{{Only in print|below}}）。忽略 PDF 版本的問題，因為線上版本是迄今為止最重要的版本，並且許多讀者對書籍版本有很高的期望。
為了便於編輯圖表，鼓勵使用表格。例如，使用：
{|cellpadding="5px" cellspacing="0" style="text-align:center; vertical-align:center;"
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''first stage or input data'''
|style="width:1%; font-size:200%;" |←
|style="width:69%; background:#e0e0d0;"|additional input (optional, 1st style)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left;"|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''second stage or processed data'''
|style="width:1%;font-size:200%;" |←
|style="width:69%; text-align:left;"|additional input (optional, 2nd style)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left; "|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''third stage or processed data'''
|style="width:1%;font-size:200%;" |
|style="width:69%; text-align:left;"|description of stage or data (optional)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left; "|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''fourth stage or processed data'''
|style="width:1%;font-size:200%; " |→
|style="width:69%; background:#e0e0d0; "|additional output (optional, 1st style)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left; "|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''final stage or output data'''
|style="width:1%; font-size:200%;" |→
|style="width:69%; text-align:left; "|additional output (optional, 2nd style)
|}
獲得：
| 第一階段或輸入資料 | ← | 附加輸入（可選，第一種樣式） | ||
| ↓ | 通訊資料或操作 | |||
| 第二階段或處理資料 | ← | 附加輸入（可選，第二種樣式） | ||
| ↓ | 通訊資料或操作 | |||
| 第三階段或處理資料 | 階段或資料描述（可選） | |||
| ↓ | 通訊資料或操作 | |||
| 第四階段或處理資料 | → | 附加輸出（可選，第一種樣式） | ||
| ↓ | 通訊資料或操作 | |||
| 最終階段或輸出資料 | → | 附加輸出（可選，第二種樣式） | ||