分類: 網際網路, 藝術

虛擬舞動骨架

設計理念

裝置設計概念以《TRON: Legacy》為美學起點,試圖重新思考「肢體如何成為數位場域中的發光筆觸」。整體設計不僅嘗試呈現沉浸式的數位美學,也探索在極簡的結構中如何讓使用者透過身體動作與虛擬空間產生即時且強烈的連結。在純黑的背景下,一切視覺皆由青色與白色的光束構成,彷彿數位世界裡唯一被允許存在的能量符號,也使每一個動作都在空間中留下光的痕跡。

畫面經營採高對比度視覺美學,以純黑作為虛擬空間的母體,讓所有光線元素得以從中「浮現」。青色與白色的能量線條建立科技象徵,並呼應 TRON 世界的霓虹邏輯。於此虛擬場景中,「網格」成為核心的空間隱喻:其無限延伸的直線結構與深邃的透視感,讓使用者彷彿站在高速運算的數位機房之中,被運算流、光脈衝與演算法語言所環繞。同時,光流殘影(Light Trails)讓每個肢體動作在空間中留下柔順又富速度感的痕跡,使舞動近乎成為光的雕塑,並強化人與場景之間的沉浸關係。

互動邏輯採取直覺式的「鏡像模式」,讓使用者在螢幕中看見與自己方向一致的骨架動態,減少左右翻轉所造成的認知負擔。整個互動完全不需要任何額外的穿戴裝置,而是依賴一般 WebCam 即可運作,落實「人體即控制器」的設計理念。使用者能立即參與,不需要流程、不需要校正,也不需要任何技術背景,即可在數位世界裡留下屬於自己的光軌。

技術架構及演算法

系統以輕量化的單頁應用程式架構實作,所有核心運算皆在前端完成。

技術的核心在於 3D 場景建構與即時的人體姿態辨識。Three.js 負責空間的搭建、光照運算與攝影機控制;而姿態偵測則由 Google MediaPipe Pose 即時擷取人體 33 個關鍵點座標,建立骨架的基本資料。

整體運作過程由攝影機影像開始,MediaPipe 會持續針對輸入畫面進行推論,並輸出關鍵點位置。這些座標經過轉換後被引入 Three.js 的空間系統中,再透過平滑演算法修正抖動,最後以渲染迴圈持續更新場景,使骨架、光軌與隧道背景在每一幀中保持一致且流暢的視覺。

由於影像辨識不可避免地伴隨雜訊,骨架座標在原始狀態下常會出現抖動。為了維持動作的優雅與流暢,系統採用線性插值(Lerp)逐幀調整座標,使骨架以「類液態」的方式移動。

光軌效果透過自行定義的歷史緩衝區實作:系統會保留過去數幀的骨架線段資料,並以逐漸遞減的不透明度與色調呈現,使殘影看起來像能量逐步消散的痕跡。尾端的殘影會被輕微推向 Z 軸深處,藉此避免 Z-fighting 並營造出速度的視覺錯覺。整體光軌既乾淨又具有 TRON 風格的數位能量感。

為了讓場景保持動態而不需生成大量幾何體,背景網格會持續沿 Z 軸移動,並透過模數運算在超出單位距離後自動回到初始位置。此方法產生了「永無止境」的隧道效果,使背景保持高速運行般的視覺節奏,同時維持效能極低的運算成本。