🔧 阿川の電商水電行
WebGPU是目前的熱門話題。這是一個全新的Web API，很可能很快就會取代WebGL（兄弟，我不會想念你的👋）。
它已經得到了所有主流瀏覽器的支持，說實話……我怎麼能不試一試呢？
於是，我做了任何一個好奇的、以前端為中心的軟體開發人員都會做的事：我建立了一個小型互動式演示，並學到了比我最初預期的要多得多的東西。
首先，為什麼要選擇GPU？
對你們中的許多人來說，這聽起來可能很明顯，但對於這個領域的新手來說，我們還是做一個簡單的介紹。
CPU非常擅長連續執行幾個複雜的任務。
GPU非常擅長大規模並行地執行簡單的任務。
這就是GPU的優勢：
-
圖形和圖像處理
-
模擬
-
矩陣密集型工作負載
-
是的——像是LLMs學位之類的東西
無論是渲染像素、模糊紋理或進行大型矩陣運算，GPU 都天生適合這類工作。 WebGPU 最終讓我們能夠在瀏覽器中直接使用這種強大的運算能力。
那麼……它與WebGL有何不同？
WebGL 是基於OpenGL ，而 OpenGL……嗯……已經很老了。以 GPU 的發展速度來看，它非常老舊。
使用 WebGL：
-
當時並沒有真正的計算著色器。
-
一切都必須以「渲染問題」的形式來表達。
-
很多技巧、訣竅和變通方法
-
很多隱藏的全域狀態
如果你曾經在 WebGL 中實作過 GPGPU，你可能還記得把資料編碼到紋理中，然後假裝三角形是完全不同的東西🙃
WebGPU 可以正確解決這個問題：
-
顯式計算過程
-
顯式管道和綁定組
-
沒有神奇的全局狀態
-
可直接對應到現代 GPU 架構（Metal、Vulkan、DirectX 12）的 API
簡而言之： WebGPU 就是 GPU 現今的實際運作方式。
WebGPU是否已準備好投入生產使用？
實話實說：這要看情況。
如果可以的話：
-
需要使用現代瀏覽器。
-
目標瀏覽器：最新版本的 Chrome、Edge、Firefox、Safari
→ 那麼是的，WebGPU 目前完全可以使用。
但是，如果：
-
你的受眾群體非常廣泛。
-
居然還有人在使用老舊的Safari瀏覽器。
-
或（請不要）IE 11
→ 那你要嘛投資 WebGL 作為備用方案，要嘛暫時放棄 WebGPU。
用於實驗、演示、內部工具和前瞻性產品？
這已經是一個非常穩健的選擇。
WGSL——那些「奇怪」的新著色器文件
WebGPU 引進了WGSL（WebGPU 著色語言） 。
乍一看，它看起來很奇怪——但如果你曾經見過以下類型的著色器：
-
金屬
-
Vulkan
-
或現代 DirectX
……感覺其實挺熟悉的。
WGSL是：
-
強類型
-
顯式
-
旨在避免一類GPU錯誤
在這個專案中，我將著色器放在單獨的.wgsl檔案中，但你也可以根據需要將它們作為字串內聯到 TypeScript 中。 VS Code 已經為 WGSL 提供了語法高亮，這非常有幫助。
現在，來說說我的示範。
我不會撒謊——這個演示程序比我其他很多實驗程序都難寫。
或許是因為 WebGPU 技術還比較新。
或許是因為我一直對電腦圖形學不太感興趣……而這個示範程式對圖形的要求很高。
但最終結果如何呢？我對這個結果非常滿意。
從視覺上看，它就像發光的墨水或煙霧，當你在畫布上移動遊標時就會出現。
從技術上講，這是一個基於GPU的模擬，其中：
-
指針輸入將顏色注入浮點紋理
-
計算著色器模糊並隨時間傳輸資料
-
價值逐漸消失，留下痕跡
-
渲染過程顯示結果
它在物理上準確嗎？絕對不準確😄
看起來很酷嗎？當然！
軌跡長度、筆刷大小、漩渦強度和顏色等即時參數都可以透過控制面板進行調整——無需重新編譯著色器。
React……用於 WebGPU 演示？
大多數WebGPU演示程式都是用純HTML+JS編寫的。我也能做到這一點。
但我決定使用React + TypeScript作為一個簡單的封裝：
-
簡潔的使用者介面
-
滑桿的簡易狀態管理
-
零手動DOM接線
效果很好——但有一個重要的注意事項。
為了使這個演示可用，我不得不禁用 React 嚴格模式。
為什麼？因為嚴格模式會在開發過程中故意執行兩次特效來偵測副作用。這通常很棒……但當你建立 GPU 設備、管線、紋理和緩衝區時就不太好了。重複初始化很容易導致問題。
底層 GPU 程式碼是極少數嚴格模式會造成乾擾的情況之一。
TypeScript 的一個陷阱
還有一件小事：
TypeScript 目前尚未完全啟用 WebGPU 類型。
您需要在 TypeScript 配置中明確啟用 WebGPU 類型定義，否則所有 GPU 類型都將不存在。這是一次性設置，但如果您是第一次嘗試，則值得一提。
連結
- 儲存庫：
https://github.com/sylwia-lask/webgpu-neon-demo
- 線上演示：
https://sylwia-lask.github.io/webgpu-neon-demo/
最後想說的
WebGPU感覺像是Web技術的一大進步。
不僅僅是“略微改進的圖形”，而是我們可以在瀏覽器中實際建立的一整類全新事物。
這個演示只是一個視覺實驗——但它已經展示了 GPU 驅動的 Web 應用程式可以多麼強大、富有表現力和趣味性。
如果你一直對 WebGPU 感興趣…這就是你嘗試它的訊號🚀
原文出處：https://dev.to/sylwia-lask/why-webgpu-feels-like-the-future-of-the-web-live-demo--2bjh
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
