推出 pngine：將 WebGPU 程式碼封裝於 PNG 檔案的宣告式格式

在過去兩年半的研發之後，開發者 pngine 正式亮相。它是一套 宣告式（declarative） 格式與執行時（runtime），專門用來描述與執行 WebGPU（Web 圖形處理單元）的管線、緩衝區、通道等組件。最特別的地方在於，pngine 會把以 S‑expression（類似 Lisp 的符號表達式）撰寫的 WebGPU 配置編譯成二進位資料，然後將這段二進位「塞」進 PNG 檔案的自訂 chunk 中，讓 PNG 本身仍保留原本的預覽影像功能。換句話說，一張 PNG 同時是程式碼的載體與視覺預覽。

背景與核心功能

S‑expression 與 WebGPU 規格 1:1 對應

pngine 使用 S‑expression 來描述 WebGPU 的所有設定，語法與官方規格完全對應，開發者不必再手寫繁瑣的 API 呼叫。舉例而言，本文最上方的「紅色三角形」示範，只需要幾行 S‑expression 即可完成。
二進位化與 PNG Chunk

編譯階段會把 S‑expression 轉成緊湊的二進位表示，然後嵌入 PNG 的額外 chunk。這個「tiny runtime」在載入 PNG 時會自動解譯，執行對應的 WebGPU 程式碼。如此一來，開發者只需傳遞單一 PNG 檔，即可同時提供圖形預覽與完整的 GPU 配置。
開源與授權

pngine 的程式碼採 CC0（公有領域）授權，全部放在 GitHub 上供社群提出 Issue、討論或自行編譯發行版。

為何需要 pngine？

在 WebGPU 生態系中，「自訂 wiring」（即管線、緩衝區、通道等的組合方式）一直缺乏統一的封裝機制。傳統上只能透過一般程式語言（TypeScript、JavaScript、Rust 等）撰寫完整程式，並依賴各自的語法與約定來傳遞資源句柄（handle）。這導致：

跨專案、跨平台的共享成本高：每次交換管線都必須先協商使用的語言、資源編碼方式與執行環境。
缺乏可驗證的結構：程式碼本身不易自動驗證、重播或最小化（minify），也不方便機器產生或分析。

pngine 透過 「程式即資料」 的設計，將 WebGPU 的 wiring 轉換為普通結構化資料。這樣的資料天生具備：

驗證（validation）：可在編譯前檢查語法與型別正確性。
重播（replay）：同一份 PNG 可在不同環境下重現相同的 GPU 行為。
檢查與最小化：開發者能直接檢視、裁剪不必要的設定，降低傳輸大小。
序列化與機器生成：自動化工具可直接產生或改寫 PNG 內的二進位 payload。

影響與未來展望

pngine 並未試圖取代現有的程式語言，而是 降低語言層面的摩擦，讓不同專案能以相同的方式打包與分享 WebGPU 配置。對於以下情境特別有價值：

教學與示範：教師只需提供一張 PNG，即可讓學生在瀏覽器中即時看到圖形預覽與完整程式碼執行。
資產庫與市場：設計師可將特效或小型動畫以 PNG 形式上架，使用者直接下載即得可視化預覽與即插即用的 GPU 程式。
自動化測試：CI 系統可把 PNG 作為測試向量，驗證不同瀏覽器的 WebGPU 實作是否一致。

WebGPU 本身已將許多隱晦的圖形狀態抽象化，提供一致且優雅的 API。pngine 的出現，正好在此基礎上再度提升 「可攜性」 與 「可檢視性」。未來若社群持續貢獻 S‑expression 的擴充、PNG chunk 的壓縮技巧，或結合其他 DSL（領域專屬語言）如 SJON，pngine 有望成為 WebGPU 生態的事實上「標準封裝格式」。

讀者啟示：如果你正為如何在不同專案間共享 WebGPU 設定而頭疼，不妨先試試 pngine。只要把你的管線、緩衝區與 WGSL（WebGPU Shading Language）著色器程式碼寫成 S‑expression，編譯成 PNG，即可得到一個既能預覽又能執行的完整單檔。這種「程式碼即圖像」的概念，或許會改寫未來 Web 圖形資產的流通方式。