HTML 腳本標籤中的着色器
在當今世界一可以讓瀏覽器無需插件即可調用 GPU 做 3D 渲染。我們先學習一下相關的語言。
標準 GLSL 是桌面 GPU 着色器語言的 “母體” → 簡化出 GLSL ES 適配移動 / 瀏覽器場景 → WebGL 作為瀏覽器 3D API
GLSL 的全稱是 OpenGL Shading Language（OpenGL 着色語言 ），它是專門為配合 OpenGL（Open Graphics Library，開放圖形庫 ）這種跨語言、跨平台的 2D/3D 圖形渲染 API 而設計的編程語言，用於編寫運行在 GPU 上的着色器程序（如頂點着色器、片元着色器等 ），讓開發者能精細控制圖形渲染過程，像定義頂點如何變換、像素最終呈現什麼顏色等。
GLSL ES 的全稱是 OpenGL ES Shading Language（OpenGL ES 着色語言 ） 。其中，OpenGL ES（OpenGL for Embedded Systems ）是 OpenGL 的子集，主打嵌入式系統、移動設備等資源相對受限的場景（像手機、平板等 ）。
GLSL ES（OpenGL Shading Language for Embedded Systems）
WebGL 不是編程語言，而是 JavaScript API（應用程序編程接口 ），用於在 Web 瀏覽器中渲染實時的 2D 和 3D 圖形 。WebGL 是 為瀏覽器圖形渲染場景設計的接口規範主要是給 JavaScript 提供操作 GPU 、繪製圖形的能力，需結合 JavaScript 等語言（還會搭配 GLSL ES 着色器語言寫 GPU 執行的渲染邏輯 ）才能發揮作用 。
WebGL 與 GLSL 的關係
-
- WebGL 1.0 默認使用 GLSL ES 1.00（基於 OpenGL ES 2.0）。
- WebGL 2.0 支持 GLSL ES 3.00（基於 OpenGL ES 3.0），功能更強大（如接口塊、原子操作）。
在 WebGL 中，GLSL 以 GLSL ES（OpenGL ES Shading Language） 的形式存在，必須配合 JavaScript 使用：
-
JavaScript 負責：
- 創建 WebGL 上下文、緩衝區、紋理等資源；
- 編譯 GLSL 着色器代碼；
- 向着色器傳遞數據（如頂點座標、顏色）；
- 控制渲染流程。
-
GLSL ES 負責：
- 在 GPU 上執行具體的圖形計算（頂點變換、像素着色）。
着色器（Shaders）
GLSL（OpenGL Shading Language）專門用於編寫運行在 GPU 上的小程序，這些小程序被稱為 “着色器（Shaders）”，負責控制圖形渲染管線中的特定階段。
GLSL 編寫的着色器主要分為兩類：
頂點着色器（Vertex Shader）
處理每個頂點的位置變換（如平移、旋轉、投影），輸出最終的頂點位置（gl_Position）
片元着色器（Fragment Shader）
計算每個像素的最終顏色（gl_FragColor），可處理紋理採樣、光照計算等。
