![](https://e-s.tw/wp-content/uploads/2023/12/北藝封面.jpg)
專案背景
此專案旨在開發一個內部太陽能能源及電控系統的操作與監控平台。客戶最初的需求是希望能夠呈現 2D 視覺效果,以顯示能源電流的流動方向。然而,在初步需求接洽和討論之後,我們發現可以利用我們在 3D 視覺化方面的專長,為客戶提供更豐富且直觀的視覺體驗。因此,我們決定採用 3D 視覺動畫特效作為主要展示手法,這不僅能夠更生動地呈現能源電流的動態變化,還能提供更高的互動性和沉浸感,讓用戶能更清晰地了解和操作整個系統。此決定不僅滿足了客戶的需求,也展現了我們團隊在 3D 視覺化和動畫特效方面的卓越能力。
![](https://e-s.tw/wp-content/uploads/2024/06/百樂千翔網站設計-2-2.jpg)
設計製作
在設計過程的初期階段,我們製作了一個脈絡設計的 Mood board 提案,提出了三種風格方向:深色科技、清新科技和居家舒適。這些提案皆採用了抽象式的 3D 物件設計,以營造獨特的視覺效果。經過與客戶的深入討論與交流,我們最終決定採用居家舒適的風格,因為這款產品的目標是成為一個與人們日常生活密切相關的介面,客戶希望它能夠更生活化、更貼近用戶的日常使用習慣。
為了達到這一目標,我們在設計中大量運用了毛玻璃的設計元素,這不僅增加了介面的現代感,還帶來了溫暖且柔和的視覺效果。此外,我們也採用了柔光陰影,營造出舒適且友好的使用氛圍,使整體介面看起來更具親和力。這種設計風格不僅符合產品的用途,也極大提升了用戶的使用體驗。
![](https://e-s.tw/wp-content/uploads/2024/06/百樂千翔網站設計-3.jpg)
程式開發
此專案中,最具動態性的部分並非 UI 互動,而是根據系統狀況實時變化的 3D 視覺效果。我們設計的每一個電流管的電流方向、物件的顯示狀態、是否處於充電模式,都需要根據實際系統狀況進行變化。此外,電池的視覺效果也會依據電量多寡動態更新,呈現不同的圓餅圖。
其中,最具挑戰性的部分是電流管的特效。這次專案是我們初次嘗試自行開發 GLSL 高階著色語法,以使電流效果更加生動和逼真。我們投入了大量的時間和精力,研究和實驗這些著色技術,最終成功地實現了電流在管內流動的逼真視覺效果。這些細節不僅提升了整個系統的視覺吸引力,也顯示了我們團隊在 3D 視覺效果和技術開發方面的創新能力和專業水準。
![](https://e-s.tw/wp-content/uploads/2024/06/百樂千翔網站封面.jpg)