[Holo] 表現力提升！Hololive應用程式的配件功能

看板C_Chat (希洽)作者arrenwu (最是清楚哇她咩)時間7小時前 (2026/01/22 16:42)推噓10(10推 0噓 1→)

留言11則, 11人參與討論串1/1

https://coveredge.cover-corp.com/list/3907 這個是Cover技術部落格的一篇文章，講的是關於Holomem直播所使用的應用程式中配件機能的部分。以下使用Gemini進行翻譯： ------------------- 翻譯開始 ------------------- 空幫抖抖抖~！我是 Cover 株式會社創意製作本部技術開發部的 K。在本篇文章中，我將介紹藝人們在平時直播中使用的 Hololive 應用程式（Hololive App）中的「配件功能」。整篇文章可以分成五點 1. 什麼是配件功能 2. 基本功能 3. 追隨功能(親子關係) 4. 渲染處理 5. 總結 1.什麼是配件功能在 Hololive 應用程式中，存在著可以與藝人的服裝分開、以零件為單位切換演出或顯示的「配件功能」。雖然程式中實作了多種配件，例如專為特定服裝製作的配件，或是任何人都能使用的通用配件，但這次我想針對其中「藝人可以自由添加素材並作為配件使用」的圖像配件功能進行解說。 https://i.imgur.com/KdJA2Q6.png

事實上，這項功能本身在幾年前就已經存在，相信很多人在之前的直播中也曾看過它被使用。本文將介紹實現這項圖像配件功能的技術細節。 2.基本功能 Hololive 應用程式在單一程式內即可處理 Live2D 模型與 3D 模型。圖像配件功能同時支援 Live2D 與 3D 模型。支援檔案類型： PNG 檔案（靜態圖） GIF 檔案（動畫）除了單純的透明圖檔外，也支援 GIF 動畫。貼附至模型數據透過選擇本機硬碟中的圖檔並將其拖放到模型數據上，即可將圖像作為配件貼附在模型上。 Live2D：在臉部的左上方位置貼附了三角形圖像 https://i.imgur.com/86dvHeO.png

3D：在 3D 中也同樣貼附了三角形圖像。 https://i.imgur.com/g6ZvNh8.png

我們花了一些心思調整角度，使其能融入 3D 環境。變換處理（Transform） Live2D：可以透過滑鼠移動，或使用滑桿 UI 進行縮放。 https://i.imgur.com/CdQvS30.png

3D：使用被稱為「Gizmo」的輔助 UI，可以直觀地進行移動、旋轉與縮放。 https://i.imgur.com/SWov8Zk.png

為了不讓它看起來太像平面，我們微調了角度。 3.追蹤功能（親子關係） Live2D 可以將圖像貼附在任意位置並使其跟隨。這是以拖放圖像時，滑鼠游標位置重疊的 Live2D 部位作為基準來處理的。藉此可以實現讓配件跟隨臉部、放在頭髮上、或是掛在胸前等表現。由於 Live2D 和圖像都是平面，微調難度不高，因此我們設定成可以進行細部調整。 https://i.imgur.com/spm5uYm.png

我們嘗試設定讓三角形圖像跟隨在角的部分。高亮顯示讓使用者能直觀地了解圖像是跟隨在哪個位置。對 Live2D 模型的優化這裡我們深入探討一些技術內容。 Live2D 模型為了實現更具魅力的表現，會將「網格（Artmesh）」進行細分管理。由於有大量的網格重疊在一起，如果單純以滑鼠游標的位置來決定要跟隨的網格，經常會發生配件跟隨到非預期部位的問題。為了在日本 Hololive 應用程式中解決此問題，我們自行製作了對 Live2D 網格進行「射線檢測（Raycast）」的處理，以便能跟隨到意圖中的網格。註：射線檢測（Raycast）是指從某一點發射隱形光線，並檢測光線碰撞到的物件的碰撞判定技術官方手冊中有關於射線檢測處理的解說，感興趣的人可以參考： Raycasting https://docs.live2d.com/cubism-sdk-manual/raycasting-unity/ CubismRaycaster.cs https://github.com/Live2D/CubismUnityComponents/blob/develop/Assets/Live2D/Cubism/Framework/Raycasting/CubismRaycaster.cs 我們自製的射線檢測處理在官方處理的基礎上，額外實作了以下內容： (1) 進一步計算點擊了命中網格的哪個座標，藉此可以讓配件直接以滑鼠點擊的位置為基準進行跟隨。 (2) 當重疊的網格被命中時，保持當前選擇的索引（Index），讓使用者能切換選擇哪個網格。在官方處理中，若命中多個網格會直接回傳所有資訊。我們額外保存了索引資訊，讓使用者可以切換現在要選中哪一個。透過這些優化，即使是複雜的 Live2D 模型，也能盡可能讓配件跟隨在使用者預想的網格上。 3D 可以從預先設定好的部位（頭、左手、右手、胸部、地面）中選擇，並以該位置為基準貼附跟隨。 https://i.imgur.com/EDadi7w.png

我們嘗試在左右手掌新增了三角形圖像，讓角色像是拿著它。對 3D 模型的優化在3D空間中，如果像 Live2D 那樣使用嚴密的射線檢測來決定跟隨部位，在3D空間上選擇部位會變得非常困難。因此，我們刻意設定為只能選擇常用部位（頭、左手、右手、胸部、地面）。如此一來，即使是不習慣 3D 空間操作的人，也能直接從固定部位進行微調。 4. 渲染處理 Live2D 因為具有圖層概念，可以配置在 Live2D 模型的前方或後方。 https://i.imgur.com/B6jjXb9.png

此外，由於跟隨的網格也是分別設定的，因此當臉部傾斜時，各個配件會以不同的動作跟隨。 3D 在 3D 模型中，由於可以在深度方向（Z軸）移動，因此可以將其配置在後方。 https://i.imgur.com/XM8cx7B.png

雖然像 Live2D 一樣在背景放了綠色三角形，但因為是從斜角拍攝，所以帶有一點角度。 5. 總結以上就是關於圖像配件功能的介紹！ 2D 與 3D 不僅在外觀上不同，為了創造各自具備魅力的視覺效果，設定方法與調整難度也會有所差異。在 Hololive 應用程式中，我們致力於盡可能吸收這些差異，每天進行更新，讓藝人們無需在意這些區別，也能直觀地實現自己想要的表現！未來我們也會持續改進，以實現更多具魅力的表現，還請多多指教！ Cover 株式會社正在招募支持藝人直播的夥伴。如果您在閱讀本文後產生興趣，歡迎點擊下方連結應徵。 https://cover-corp.com/recruit ------------------- 翻譯結束 ------------------- 這篇技術文章搭配角卷綿芽的圖例、圖文並茂、很清楚呢！原來WTM平常開台用的配件是這樣設定的呀 :D -- 角卷綿芽六周年紀念組～咩偵探綿芽～ https://i.imgur.com/u87KFHA.png

https://i.imgur.com/xEJJibd.jpg

預購時間：2026/02/02 17:00 止官網連結：https://bit.ly/3YCT6Vn -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 98.45.195.96 (美國) ※ 文章網址: https://www.ptt.cc/bbs/C_Chat/M.1769071320.A.320.html

推

s6031417

01/22 16:43, 7小時前 , 1^F

01/22 16:43, 1^F

推

Luciferspear

01/22 16:48, 7小時前 , 2^F

01/22 16:48, 2^F

技術人員開場羊轉！

推

Pegasus99

01/22 16:50, 7小時前 , 3^F