版本更新閱讀時間 6 分鐘

Mografy 大更新:動態簡報、Three.js 3D 與 AI 配樂

任何專案都能逐頁現場簡報,場景裡可以加入真正的 WebGL 3D,agent 也能依影片的節奏替它配樂。另外還有播放器熱更新、會自動保持最新的 Skill,以及更安全、更省記憶體的編輯體驗。

動態簡報Three.js 3DAI 配樂

一分鐘看完這次更新,影片由 Mografy 製作。

這次更新了什麼

這是 Mografy 到目前為止最大的一次更新。做成影片的場景,現在可以一頁一頁現場簡報;場景能在 2D 畫面中混入真正的 3D;agent 也能寫出一段配樂,準確對上畫面中每個事件發生的秒數。

在看不到的地方,播放器改程式後會立刻熱更新,共用 Skill 會自動保持最新,長時間編輯也大幅減少記憶體用量。

  • 動態簡報:Video / Present 一鍵切換、講者視窗,還能匯出可離線播放的單一 HTML 檔。
  • Three.js 3D 圖層(選用 extra),在播放器與所有匯出格式中結果都一致。
  • 情境配樂:agent 寫出 music.json,再由 score.py 合成配樂。
  • 播放器熱更新、Skill 自動同步,既有專案也會自動產生投影片。
  • 安全性強化、更省記憶體的編輯,以及更流暢的介面轉場。

動態簡報:一個開關,影片變簡報

全螢幕播放的 Mografy 簡報,畫面是一頁長條圖與投影片進度

投影片直接來自場景的鏡頭,不用另外設定。場景在 meta.shots 列出鏡頭,每個鏡頭就是一頁,停在穩定的畫面上。編輯器頂部新增 Video / Present 切換,切到 Present 就是同一個場景的投影片檢視:左邊是縮圖,中間是舞台。

按 Start 開啟簡報頁:播到下一個停點就停下來等你,配樂會在停點淡出、下一段轉場時再淡入。滑鼠不動時,上下方的操作列會自動淡出。

  • →、空白鍵或點擊前進,← 返回,輸入數字再按 Enter 直接跳頁。
  • P 開啟講者視窗,顯示備註、下一頁與計時。
  • M 靜音、F 全螢幕、B 黑屏,Esc 一鍵回到編輯器。
  • 排練時畫面會跟著即時修改更新,正式簡報時按 K 鎖定目前版本。

簡報匯出成單一 HTML 檔

匯出的 launch-film.html 簡報檔

Export HTML 會輸出一個檔案,場景、字型、圖片和配樂都包在裡面。用任何瀏覽器打開就能用同樣的方式簡報,離線也能播放。終端機可以用 mografy export --format html。

匯出影片會忽略鏡頭與投影片設定,所以 MP4 和 WebM 完全不受影響。

沒標鏡頭的專案也有投影片

pnpm install 和 mografy update 現在會替還沒有鏡頭的專案寫入投影片。Mografy 會依分鏡表的鏡頭表判斷,或依畫面變化切分,並停在每個鏡頭結束前最穩定的畫面。

自動判斷的投影片會清楚標示,Claude 或 Codex 標好的鏡頭永遠優先。既有專案不需要手動修改。

用 Three.js 做真正的 WebGL 3D

由時間軸逐格驅動的青綠色 3D 方塊

新的 three 元件把 Three.js 場景當成畫格中的一個圖層:2D 背景畫在它之前,文字畫在它之後。在 setup 裡一次建好網格、燈光、材質與 glTF 模型,再於 renderFrame 中依時間擺好姿勢。

因為每一格都由時間驅動,拖曳、預覽、匯出的畫面完全一致。Three.js 套件只有在專案需要 3D 時才會複製進去,安裝內容與既有專案都不受影響。

AI 配樂:依你的影片作曲

agent 正在撰寫含段落、情緒與 hit 的 music.json,下方是配樂時間線

不必再找一首現成的歌,再把動畫剪成配合它。agent 讀懂影片後,會在分鏡之後寫出 music.json:每個段落有情緒與能量,並在畫面發生事件的確切秒數標上 hit,例如爆開、撞擊、光掃過或結尾和弦。

接著 score.py 用 Python 合成對應的配樂,結果可重現,並輸出一張時間線圖,讓你確認漸強與撞擊都對到畫面。動畫時間改了,就改標註再生成一次。

更快的工作流程:熱更新與自動同步的 Skill

修改場景參數,預覽立刻更新

在原始碼 checkout 中,mografy dev 會透過 Vite 提供播放器:一存檔,開著的瀏覽器就立刻更新,而且保留狀態。

共用 Skill 現在會自動保持最新。每次安裝、更新與 build 都會重新產生它,mografy dev 啟動時也會檢查來源是否變動(例如 git pull 之後),不需要手動執行任何指令。

專案也可以把設計與動態上的決定寫在 style.md,Claude 與 Codex 在規劃或修改前都會先讀它。

更安全、更輕巧

播放器現在把每個場景版本放在各自的 iframe 中,新版本就緒後就移除舊的,長時間編輯不再把每一版的程式碼、圖片和字型都留在記憶體裡。簡報檔也只嵌入場景實際載入的素材。

mografy 指令只會使用在這台電腦上安裝過的 checkout,匯出用的場景伺服器會拒絕其他網站的請求,熱更新也只接受同源的播放器。專案打開時會停在 0 秒並保持暫停,側邊面板與 Video / Present 切換也加上了流暢的轉場動畫。

如何更新

在你的 Mografy 安裝目錄執行下面兩個指令。更新程式會自動安裝、建置、同步 Skill,並在原本開著的專案上重新啟動播放器。

mografy update --check
mografy update

第一次使用 Mografy?在本機安裝後,就能用自己的場景試試動態簡報。

安裝 Mografy