shader-programming-glsl
使用 GLSL 撰寫 GPU 著色器
運用 GPU 著色器建立令人驚豔的視覺效果並最佳化圖形渲染。本指南教授 GLSL 語法、頂點與片段著色器，以及即時圖形的著色器數學。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「shader-programming-glsl」。 建立一個以畫面為中心的脈動發光效果的著色器
預期結果:
使用 smoothstep 與基於時間的 sin 函數建立徑向漸層動畫的片段著色器，並從中心到邊緣進行色彩插值
正在使用「shader-programming-glsl」。 我如何最佳化這個執行 100 次迭代的著色器迴圈？
預期結果:
建議減少迭代次數、使用提前終止、在 CPU 上預先計算常數，以及用 step/mix 函數取代分支以獲得更好的 GPU 效能
安全審計
安全All 33 static analysis findings are false positives. The SKILL.md file is educational documentation about GLSL shader programming. Backtick-quoted text represents GLSL code examples in markdown format, not shell command execution. C2 keywords and system reconnaissance patterns are GLSL built-in variables (gl_Position, gl_FragColor, varying) and shader language syntax. No actual security risks detected.
品質評分
你能建構什麼
建立互��視覺效果的前端開發者
為 Three.js 專案建構自訂著色器，包括動畫背景、粒子系統以及網站的後處理效果。
實作自���效果的遊戲開發者
為 Unity 或 Unreal Engine 撰寫著色器，以建立獨特的視覺風格、地形生成及即時光照效果。
探索生成藝術的創意程式設計師
使用 SDF、光線行進及片段著色器技術實驗程序化生成，用於數位藝術裝置。
試試這些提示
協助我撰寫一個基本的 GLSL 片段著色器，它根據 UV 座標建立色彩漸層，用於 Three.js。
產生一個頂點著色器，使用時間 uniform 以及 sin/cos 函數對網格套用波浪變形。
建立一個光線行進片段著色器，使用平滑聯集操作結合多個 SDF 形狀（球體與盒子）。
撰寫一個泛光後處理著色器，提取明亮像素、套用高斯模糊，並與原始影像合成。
最佳實務
- 使用 mix() 進行插值，使用 step()/smoothstep() 處理閾值，而非 if-else 分支
- ��� CPU 上預先計算常數值並作為 uniforms 傳遞，而非在著色器中計算
- 將相關資料打包到 vec4 中以最小化記憶體頻寬並充分利用 GPU 向量單元
避免
- 迴圈內的冗長條件分支會降低 GPU 平行性並導致執行緒分歧
- 每個片段計算靜態值，而非從 CPU 傳遞預先計算的 uniforms
- 不必要的精度（mediump 已足夠時使用 highp）會在行動裝置上浪費頻寬與電力