第6章 數位內容創作與發布平台

# 第6章 數位內容創作與發布平台 在完成角色、語音與動作的基礎建置後，最關鍵的一步是將虛擬偶像的內容轉化為可供觀眾即時觀賞與互動的數位產品。本章聚焦於 **Unity** 與 **Unreal Engine** 兩大實時渲染引擎的製作流程、跨平台發布策略與直播技術細節，並提供實務操作範例與效能優化建議，協助讀者快速將虛擬偶像上線至 YouTube、Twitch、VRChat 等主流平台。 --- ## 6.1 Unity 基礎與工作流程 ### 6.1.1 專案結構 | 資料夾 | 用途 | |---|---| | `Assets/Model` | 3D 角色模型、Rig、BlendShape 資源 | | `Assets/Animation` | 動作 Clip、Animator Controller | | `Assets/Audio` | TTS 音檔、背景音樂 | | `Assets/Scripts` | 角色控制、直播串流腳本 | | `Assets/Plugins` | 第三方插件（如 `LiveLink`, `Agora SDK`） | | `Assets/Resources` | 需要在執行時動態載入的資源 | ### 6.1.2 常用套件 - **Cinemachine**：相機切換與自動跟隨。 - **Timeline**：時間軸排程，可同步動畫、音訊與特效。 - **Unity Render Pipeline (URP / HDRP)**：根據目標平台選擇適合的渲染管線。 - **Live Link / Virtual Camera**：與外部動作捕捉系統的即時資料橋接。 ### 6.1.3 範例：將 FastSpeech‑2 的 Viseme 直接驅動 BlendShape ```csharp using UnityEngine; public class VisemeDriver : MonoBehaviour { public SkinnedMeshRenderer faceRenderer; public string[] blendShapeNames; // 依序對應 viseme private Queue<float[]> visemeQueue = new Queue<float[]>(); private const int latencyFrames = 2; // FIFO 緩衝深度 void Update() { // 取出已緩衝的 Viseme 數值 if (visemeQueue.Count > latencyFrames) { var values = visemeQueue.Dequeue(); for (int i = 0; i < blendShapeNames.Length; i++) { int idx = faceRenderer.sharedMesh.GetBlendShapeIndex(blendShapeNames[i]); faceRenderer.SetBlendShapeWeight(idx, values[i] * 100f); } } } // 外部語音合成模組呼叫此方法傳入當前幀的 Viseme 強度 public void PushViseme(float[] frameValues) { visemeQueue.Enqueue(frameValues); } } ``` > **說明**：此腳本採用 FIFO 緩衝避免因語音合成延遲造成嘴形不同步。`latencyFrames` 可依實測延遲調整。 --- ## 6.2 Unreal Engine 基礎與工作流程 ### 6.2.1 專案設定 1. **建立 New Project → Games → Blank → With Starter Content**。 2. 在 **Project Settings → Engine → Rendering** 中啟用 **Forward Shading**（適合低延遲直播）。 3. 設定 **Pixel Format → RHI** 為 **DirectX 12**（Windows）或 **Vulkan**（Linux/macOS）。 ### 6.2.2 主要工具 - **MetaHuman Creator**：快速產出高品質人物模型與表情資源。 - **Control Rig**：在 Unreal 內完成即時骨骼驅動，適合 LiveLink 直接輸入。 - **Sequencer**：等同 Unity Timeline，可編排動畫、音訊與鏡頭。 - **Pixel Streaming**：將 UE 渲染結果以 WebRTC 直接串流至瀏覽器，避免 OBS 轉碼延遲。 ### 6.2.3 範例 Blueprint：將音訊波形驅動臉部表情 ```text Event Tick → Get Audio Amplitude (Audio Capture Component) → Map Range Clamped (0~1 → 0~100) → Set Morph Target (MouthOpen) ``` > **備註**：此 Blueprint 可直接放在角色藍圖中，無需額外程式碼。 --- ## 6.3 資源管理與效能優化 | 項目 | Unity 解法 | Unreal 解法 | |---|---|---| | **材質合併** | 使用 `MaterialVariantCollection` 減少 Draw Call。 | 使用 **Material Instance** 與 **Instanced Static Mesh**。 | | **LOD** | 設定 `Mesh LOD Group`，自動根據相機距離切換。 | 在 **Mesh Settings** 中建立 LOD，並啟用 **Screen Size** 控制。 | | **粒子系統** | 減少 `Max Particles`、啟用 **GPU Instancing**。 | 使用 **Niagara**，將粒子算繹於 GPU，並設定 **Cull Distance**。 | | **影像編碼** | 使用 **NVENC**（Windows）或 **AMD VCE**（Linux）作硬體編碼。 | 內建 **Pixel Streaming** 使用硬體 H.264/HEVC 編碼。 | | **記憶體** | 透過 `Addressable Assets` 動態載入/釋放。 | 使用 **World Partition** 動態加載區塊。 | ### 6.3.1 常見的效能瓶頸與排查步驟 1. **CPU 峰值 > 80%** → 檢查腳本每幀呼叫次數、GC Allocations。 2. **GPU 佔用率過高** → 確認 shader 複雜度、是否有過度透明渲染。 3. **網路延遲** → 使用 **WebRTC Stats**（Pixel Streaming）或 **RTMP 推流統計** 觀測 RTT、Packet Loss。 --- ## 6.4 跨平台發布策略 ### 6.4.1 目標平台概覽 | 平台 | 主要觀眾 | 技術需求 | 推薦渲染管線 | |---|---|---|---| | YouTube Live | 大眾觀眾 | RTMP 推流、1080p60 建議 | URP / HDRP（Unity）或 Forward（UE） | | Twitch | 遊戲與 Vtuber 社群 | 低延遲（< 2 s） | 同上，配合 **NVENC** 硬體編碼 | | VRChat | VR/AR 互動玩家 | Unity 2019.4 LTS、SDK2 | URP + VRChat 渲染優化指引 | | Meta Quest/SteamVR | VR 使用者 | OpenXR、單眼 90 Hz | HDRP（Unity）或 Forward（UE） | ### 6.4.2 YouTube / Twitch 直播流程 1. **渲染**：在 Unity/UE 中啟動 **Game View**，使用 **Render Texture** 輸出至 **OBS** 或直接透過 **Unity Recorder** → **Live Streaming** 插件。 2. **編碼**：在 OBS 中選擇 **NVENC**（H.264）或 **AMD AV1**，設定 **Bitrate 6000‑9000 kbps**（1080p60），Profile 設為 **High**。 3. **推流**：把 **RTMP URL** 與 **Stream Key** 填入 OBS → **設定 → 串流**。 4. **監控**：使用 OBS 的 **Stats** 視窗或 **YouTube Studio** 的 **Realtime stats** 追蹤 **FPS、Dropped frames、Bitrate**。 #### OBS 參數範例（JSON 形式） ```json { "encoder": "NVENC", "resolution": "1920x1080", "fps": 60, "bitrate": 8000, "keyint": 2, "profile": "high", "preset": "low-latency" } ``` ### 6.4.3 VRChat 上線步驟 1. **模型限制**：三角形數量 < 70k，材質貼圖 ≤ 2048×2048，BlendShape ≤ 30。 2. **使用 Unity SDK**：導入 **VRCSDK3‑Worlds**，在 `VRC_Station` 中設定「Avatar」與「Spawn」位置。 3. **發布**：在 Unity → `VRChat Builder` → `Build & Publish`，填寫名稱、描述與授權設定。 4. **測試**：在 VRChat 客戶端以 **Test Mode** 進入測試世界，確認表情、語音與動畫同步。 --- ## 6.5 直播架構與串流設定 ### 6.5.1 常見架構圖 ```text [Motion Capture / Audio Input] → (LiveLink / Audio Capture) → Unity/Unreal Engine ↓ ↓ Real‑time Render → Render Texture → OBS (NVENC) → RTMP (YouTube/Twitch) ↓ WebRTC (Pixel Streaming) → Browser / VRChat ``` ### 6.5.2 低延遲技巧 - **硬體編碼**：避免軟體編碼的 CPU 負載。 - **Keyframe Interval**（GOP）設定為 **2 秒**（即 **fps/2**），減少畫面卡頓。 - **UDP** 為底層協議（RTMP 基於 TCP，若對延遲要求極高，可考慮 **SRT** 或 **WebRTC**）。 - **音訊緩衝**：在 OBS 中將 **Audio Sync Offset** 調整為 **-20 ms**，抵消視訊延遲。 ### 6.5.3 觀眾互動層 - **Chat Bot**：使用 **Discord Bot** 或 **YouTube Live Chat API**，將文字訊息轉成 LLM 輸出，回傳給角色的對話系統。 - **Super Chat / Donations**：在 OBS 中加入 **Streamlabs** 或 **欠缺插件** 的 `Browser Source`，即時顯示捐贈金額。 - **投票系統**：利用 **StreamElements** 的投票小工具，透過 WebSocket 傳遞給 Unity/UE，觸發角色表情或舞蹈變換。 --- ## 6.6 互動功能與觀眾參與 | 功能 | 實作方式 | 範例腳本 (C#) | |---|---|---| | 觀眾點擊觸發舞蹈 | OBS Browser Source → HTTP POST → Unity Web Server | `HttpListener` 監聽 `/dance`，呼叫 Animator.Play("Dance") | | 文字聊天轉語音 | YouTube LiveChat API → Azure TTS → AudioSource | `await AzureTTS.SynthesizeAsync(message)` | | 抽獎隨機角色變身 | Server 端 Python Flask 產生隨機 ID → Unity 下載新 Material | `Renderer.material = Resources.Load<Material>("Costume"+id)` | ### 6.6.1 範例：使用 UnityWebRequest 接收觀眾指令 ```csharp using UnityEngine; using UnityEngine.Networking; public class AudienceCommand : MonoBehaviour { void Start() => InvokeRepeating("PollServer", 0f, 2f); void PollServer() { UnityWebRequest.Get("http://myserver.com/command").SendWebRequest().completed += op => { var text = ((UnityWebRequest)op.webRequest).downloadHandler.text; if (text == "dance") GetComponent<Animator>().Play("Dance"); }; } } ``` > **說明**：此方式不需額外插件，只要有 HTTP 服務即可實作即時互動。 --- ## 6.7 常見問題與故障排除 | 問題 | 可能原因 | 解決方案 | |---|---|---| | 直播畫面卡頓但本機 FPS 正常 | OBS 編碼設定過低或 CPU 過載 | 開啟硬體編碼、提升 Bitrate、減少同時錄製檔案 | | 觀眾聽不到角色語音 | Audio Capture 未正確路由至 OBS | 在 Unity/UE 中使用 **Audio Mixer**，將角色 AudioSource 輸出至 **Stereo Mix** 或 **Virtual Audio Cable** | | BlendShape 延遲 > 70 ms | Viseme FIFO 緩衝太長或網路 jitter | 減少 `latencyFrames`、使用 **RTP** 低延遲傳輸 | | VRChat 上載模型被拒絕 | 超過三角形/貼圖限制 | 使用 **Mesh Simplify**、縮小貼圖至 1024×1024，或分割模型為多個子 Mesh | | 觀眾投票訊息未即時顯示 | WebSocket 斷線或訊息序列化錯誤 | 檢查 **Ping**、使用 **JSON** 明確字段名稱，並在客戶端加入重連機制 | --- ## 6.8 小結 本章從 **Unity**、**Unreal Engine** 的基礎建置說明，到 **資源管理、效能優化**，再到 **跨平台發布** 與 **直播技術細節**，提供了一條完整的「內容 → 串流 → 觀眾」鏈路。掌握這些流程後，創作者可以在不同平台上保持畫質與低延遲的平衡，並加入多樣的觀眾互動機制，為虛擬偶像打造出具備即時表演與社群參與的全方位生態系。未來的章節將在此基礎上，探討商業模式與粉絲經營的策略，讓技術與營運相得益彰。