什麼是WebGL著色器演練場？

編寫 GLSL 頂點著色器與片段著色器，透過 WebGL 即時查看渲染結果。無需任何本機設定。用來學習著色器程式設計、快速原型化視覺特效或嘗試 GPU 加速圖形。

內建的 uniform 包含動畫用的 `u_time`、畫布尺寸 `u_resolution`、滑鼠位置 `u_mouse`、已算繪影格數 `u_frame`,以及一張現成的可平鋪雜訊紋理 `sampler2D u_noise`。上傳任意圖片就能綁定到 `sampler2D u_texture`,片元著色器可直接取樣。十個預設(漸層波、電漿、Circle SDF、雜訊隧道、Mandelbrot、Ray March 球體、變形球、Voronoi、星空、Worley 細胞),搭配動畫速度滑桿、即時 FPS 顯示、自動編譯開關、可凍結時間軸的暫停按鈕、能完整還原原始碼的分享連結,以及把當前畫面匯出為 PNG 的功能,構成整套工具。

使用方法

1. 將您的 GLSL 片段著色器程式碼寫入或貼上至編輯器。預設著色器已經載入完畢。
2. 即時預覽會隨著您的輸入自動更新。內建 uniform 變數包括時間、解析度與滑鼠位置。
3. 將著色器匯出為 PNG 截圖，或複製程式碼用於自己的 WebGL 專案。

何時使用

• 想學 GLSL 語法,又不想在本地架 C++ 或 Three.js 開發環境。
• 把片段著色器的效果先在網頁裡試出來,再移植到遊戲引擎或網站。
• 為作品集、簡報或社群貼文產生動態背景的靜態截圖。

結果

一位遊戲開發者在製作水波紋特效原型時，利用正弦波和時間 uniform 編寫片段著色器。預覽面板會即時顯示動畫效果。

常見問題

要懂 C 語言或繪圖學才能用嗎?

GLSL 是一種類 C 的小語言,迴圈、條件、浮點運算對寫過 C、Java 或 JavaScript 的人都不陌生。預設著色器都附註解,多半照著調參數就能入門,不需要先學 GPU 程式設計。

著色器編譯通過,但預覽全黑,問題在哪?

常見原因是:在 main 函式之外寫 `gl_FragColor`、回傳 `vec3` 而不是 `vec4`、或在 noise 函式裡出現除以零。打開瀏覽器主控台,WebGL 即使編譯成功也會印出實用的警告。

可以取樣紋理或上傳自己的圖片嗎?

可以。點預覽列的「上傳圖片」按鈕,任何 PNG 或 JPG 都能被綁定為 `sampler2D u_texture`。同時 `u_hasTexture` 這個 float 會在貼圖就緒時變成 1.0,著色器據此判斷是否有貼圖可用,跟 Shadertoy 的頻道輸入做法一致。

用的是哪個版本的 WebGL?

WebGL 1 搭配 GLSL ES 1.0。等於要用 `varying` 而不是 `in/out`、寫 `gl_FragColor` 而不是具名輸出、也沒有整數紋理。為 WebGL 2 或桌面 OpenGL 3+ 寫的著色器要稍微改語法才能跑。

原始碼會上傳到伺服器嗎?

不會。編譯和繪製都在本地 GPU、瀏覽器內完成。原始碼從不離開頁面,關掉分頁又沒複製的話,程式碼就消失了。

相關工具