WebToe
EN中文
GitHub 開啟編輯器
文件目錄 · 開始使用 文件

WebToe 文件 開始

開始使用

在瀏覽器打開編輯器、用 npx webtoe 在本機執行，或建立 monorepo 開發環境。

在瀏覽器裡試用

打開編輯器。需要支援 WebGL2 的瀏覽器（目前版本的 Chrome、Edge、Firefox、Safari 都可以）。不用安裝，也不會上傳任何東西：專案在頁面裡載入、執行。

  • 範例。 工具列的 examples… 選單可載入十個內建專案，從四個節點的 noise patch 到 3D 場景。見範例。
  • 你的檔案。 load 開啟 .webtoe.json；save 把目前的網路下載成 .webtoe.json。也可以把檔案拖到頁面任何位置：.webtoe.json、TouchDesigner 的 .toe / .tox，或 toeexpand 產生的 .toe.dir 資料夾。見匯入 TouchDesigner 專案。
  • 連結。 /app/?project=<網址> 會從網址載入專案（對方伺服器需以 CORS 允許）。相對路徑以 /app/ 為基準，所以 /app/?project=examples/01-hello-noise.webtoe.json 會打開第一個範例。

在網路裡操作

動作方式
新增運算子Tab 或在網路上雙擊：每個家族一個分頁，搜尋跨所有家族
接線從輸出點拖到輸入點
選取點擊節點；參數面板與檢視器會跟著選取
參數改用表達式參數旁的 ƒ 按鈕
進入 COMP／回上一層i / u
顯示旗標（檢視器顯示誰）Shift + D
在網路背後顯示輸出d
刪除Backspace 或 Delete

網址參數

參數作用
?project=<網址>啟動時載入一個 .webtoe.json
?backend=webgpu改用 WebGPU 後端（啟動失敗時退回 WebGL2）
?bridge=<網址>使用這個位址的匯入橋接程式，而不是 http://127.0.0.1:9881
?bridgeToken=<token>共用橋接程式的 bearer token；第一次造訪後瀏覽器會記住

在你的電腦上執行

bash
npx webtoe

這會在 127.0.0.1:9881 啟動 WebToe 橋接程式，於 http://127.0.0.1:9881/app/ 提供編輯器並自動開啟。有了橋接程式，頁面才能使用你自己的 TouchDesigner 的 toeexpand（見匯入）。需要 Node 20 以上，沒有任何相依套件。

旗標預設意義
--port <n>9881監聽的連接埠
--no-open不開瀏覽器（只跑橋接程式，給線上版編輯器用）
--host <位址>127.0.0.1綁定位址；超出本機迴路時應搭配 --token
--token <密語>/expand 需附 Authorization: Bearer <密語>
--toeexpand <路徑>自動尋找toeexpand 不在標準安裝位置時指定路徑
--app <資料夾>建置好的網站改用另一份網站建置

修改原始碼

WebToe 是以 TypeScript 撰寫的 npm workspaces monorepo。發佈出去的 app 沒有執行期相依套件；開發時使用 Vite、Vitest、TypeScript 與 playwright-core。

bash
git clone https://github.com/frank890417/WebToe.git
cd WebToe
npm install
npm run dev          # 編輯器在 http://localhost:8643/app/
npm run check        # 型別檢查 + 測試
npm run build        # apps/web/dist：網站在 /，編輯器在 /app/
指令作用
npm run dev編輯器（apps/web）的 Vite 開發伺服器
npm run checktsc --noEmit，再跑 tests/ 下所有 Vitest 測試
npm run build把編輯器建置到 apps/web/dist/app/，再在外圍產生這個網站
npm run site:check在記憶體中建置網站，任何失效連結或缺少的翻譯都會讓它失敗
npm run bridge從原始碼執行本機橋接程式（建置後會提供 apps/web/dist）

改動引擎之前，先讀架構：套件相依規則和 GPU pass 約定，是其他一切的基礎。

在 GitHub 上編輯這一頁