# 策展 · X (Twitter) 🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：shaders (@npm_i_shaders) · 平台：X (Twitter) · 日期：2026-07-15

> 原始來源：https://x.com/npm_i_shaders/status/2077012515402264761

## 中文摘要

Shaders v3 發布全新編輯器支援 WebGPU 特效。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1784077395968-7xxpqwg0.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/7c34fd7baf06a9dc.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Shaders v3 平台展示其全新的設計編輯器與 Web GPU 渲染引擎功能。

Shaders v3 是該平台歷來規模最大的更新，將過去單純的 GPU 元件庫轉型為完整的設計平台。創辦人 Simon 強調，本次改版核心在於讓設計工程師能擺脫繁瑣的 Shader 程式撰寫，透過視覺化介面直接產出可部署的生產環境組件。

**核心功能與編輯體驗**
- **無限畫布（Infinite Canvas）**：編輯器全面重構，支援在單一 workspace 中並排設計多個 Shader，方便使用者同時管理整個網站的視覺效果、比較不同變體並進行迭代，無需頻繁切換視窗。
- **直覺化圖層控制**：引入類似傳統設計軟體的變形控制（Transform Controls），使用者可直接在畫布上拖曳、旋轉、縮放元素，並透過屬性面板進行像素級微調。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/2d3ca713163a9d51.jpg)
> 這是一張展示設計軟體介面操作的截圖，畫面中呈現了包含文字與漸層光暈效果的設計預覽，右側面板則顯示了調整形狀屬性與色彩停駐點的設定選項。

- **創意組件庫擴充**：新增 3D 形狀特效（Raymarched geometry），支援球體、盒狀、圓角與 SVG 擠出（Extruded SVG）物件，並可疊加光影、扭曲與後處理效果。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/492799307471a31e.jpg)
> 這是一個數位設計軟體介面，展示了多種 3D 立方體材質與視覺特效的選單。

**效能與技術架構**
- **TypeGPU 渲染引擎**：採用全新的專有渲染架構，針對現代 WebGPU 進行毫秒級優化。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/d155571e72deeb4b.jpg)
> 畫面中央顯示帶有故障藝術（Glitch art）視覺效果的「TypeGPU」文字標題與抽象圖形。

- **效能數據**：Shader 編譯速度提升最高達 25 倍，生產環境的程式碼包（Bundle）體積縮小至原來約三分之一，大幅提升網頁載入與執行效能。

**工作流程整合**
根據平台展示的內容，Shaders v3 已深度整合現代開發工作流程，支援 React、Vue、Svelte、Solid 與原生 JavaScript 等主流技術堆疊。此外，該平台亦展示了與「Claude Code」的整合能力，使用者可透過終端機指令直接生成 WebGPU 渲染效果，進一步縮短從設計到程式碼實作的距離。

**開發者資源與社群**
Shaders v3 目前已累積超過 10,000 名設計工程師使用者，並在本次更新中提供了超過一小時的訓練影片，協助使用者快速上手。官方已同步於 [Product Hunt](https://www.producthunt.com/products/shaders?launch=shaders) 上線，並持續透過 MCP（Model Context Protocol）改善開發體驗。詳細更新資訊可參考 [官方公告頁面](https://shaders.com/updates/introducing-shaders-v3)。

## 媒體內容

**Shaders v3 平台展示其全新的設計編輯器與 WebGPU 渲染引擎功能。**

**影片中的 Prompt 與操作**

Prompt（00:17）：

```
為此英雄區塊加入流動漸層著色器
```

原文：Add a flowing gradient shader to this hero sectio

操作步驟：

1. （00:10）點擊編輯器介面調整圖層屬性
2. （00:13）在屬性面板修改顏色與旋轉參數
3. （00:15）在選單中選擇「Duplicate」複製圖層
4. （00:17）在終端機輸入指令生成著色器效果
5. （00:29）在組件庫中選取「Holographic」與「Glass」效果

## 標籤

新產品, 功能更新, Web, Shaders