WebGL 動畫工業化探索與實踐

技術背景

今天有幸給大家分享一些米哈遊前端在 WebGL 動畫工業化上的探索和實踐，內容的主角是名為 Fast Scene 的自研編輯器。它是一套易用且高效的用於開發前端富互動動畫專案的解決方案。含 3D 場景、動畫、Shader 藍圖、粒子的編輯器，市場，豐富的 API 與執行時元件，這三大模組可以幫助前端開發者們高效地製作出複雜動畫表現形式的前端營銷活動和小遊戲，並降低 WebGL 入門的學習成本。

案例演示

Fast Scene 與市面上主流遊戲引擎的主要區別在於：

• Fast Scene 專為製作精品化遊戲化營銷頁面打造，支援高自由度的渲染特效和豐富的動畫形式；

• Fast Scene 使用 ThreeJS 作為底層渲染引擎，並針對移動端裝置進行諸多優化、相容性強；

• Fast Scene 動畫專案可與 Vue、React 等前端框架完美結合，契合目前主流的前端開發工作流。

本文會介紹基於 Fast Scene 的動畫工作流程，以及目前版本編輯器的一些特性。希望能給大家帶來一些思考和啟發。

工作流程

米哈遊的常規活動專案在前端領域內可以拆解成純動畫、動畫邏輯、業務邏輯三部分。動畫部分和業務邏輯並行開發，保證在短時間內完成上線。

頁面純動畫製作包含場景及 UI 的建模、3D 動畫、元素細節、立繪 Spine 動畫、Shader 特效和自定義材質；動畫邏輯包含 3D 場景的整合、渲染管線的開發、特效與動畫的控制、遊戲邏輯；業務邏輯包含專案的架構、動畫、後端介面各模組的整合。

在動畫製作階段，動畫師可以使用 Fast Scene 匯入、預覽整合後的 3D 場景與細節動畫；開發者可以通過編輯器協同完成場景特效和自定義材質的製作。

在動畫邏輯開發階段，Fast Scene 提供的腳手架可以幫助開發者快速建立動畫專案，通過視覺化場景編輯器，完成場景的邏輯配置，比如自適應方案、物體的點選互動、自定義的渲染管線，還可以通過時間軸工具完成動畫的剪輯分組、關鍵幀事件的配置等，最後可以使用一系列的效能外掛與工具，完成場景的測試和優化。

最終由 Fast Scene 匯出場景和動畫對應的邏輯模型和邏輯動畫資料。場景引用的資源會自動生成對應的檔案引用配置，由執行時提供的資源載入元件控制並支援分段載入。

編輯器工作流程圖：

Fast Scene 提供的執行時主要包含資源載入、場景構建、動畫播放三部分。場景構建模組提供以下幾種型別：

在文字渲染方面，Fast Scene 除了支援 Canvas2D 繪製之外，其自帶的文字型別還包含 MSDF 文字渲染。MSDF 文字可以實現高效能的文字特效動畫。

Plugin 構造器拓展了編輯器構造物體的能力。使用外掛可以自定義建立程式化 3D 物體，比如程式化拖尾。

示例 1: FBX 與 Spine 的轉換

示例 2: FBX 動畫與 Spine 動畫的結合

包含動畫的模型在匯入進編輯器之後，我們可以對其動畫做一些邏輯上的編輯，包括裁剪、單軌刪除、複製黏貼、動畫編組。經過邏輯編輯後的動畫剪輯，在專案中可以非常方便地播放和控制。

示例 3: 動畫的裁剪與分組

除了匯入動畫資源，編輯器也具備動畫編輯功能。我們參考了 Blender 和 After Effect，打造了 Fast Scene 自己的時間軸工具。任何數值類的過渡動畫都可以方便地在編輯器上完成配置，比如座標、縮放、旋轉、可見性。另外，材質的 uniform 引數也可以像座標一樣設定關鍵幀動畫，這個功能可以讓開發者快速配合動畫師製作出酷炫的 Shader 動畫。

示例 4: Shader 的關鍵幀動畫

整合了所有型別動畫的時間軸工具，使我們可以方便快速地去編輯和預覽每個動畫剪輯最終呈現在頁面上的效果。如果用常規編寫程式碼控制，在專案中除錯這些動畫的播放邏輯可能是一件很費時的工作，Fast Scene 視覺化的時間軸工具，可以讓這個動畫的整合變的非常的輕鬆，大大提升了專案中動畫的開發效率。

此外，Fast Scene 動畫執行時具有以下幾個特性：

• 不同型別動畫的同步播放：所有型別的動畫都可以基於一個時間進行同步。

• 動畫播放的無縫銜接：除了模型和 Spine 動畫的平滑過渡，還支援 Spine 程式解算類動畫的無縫銜接。

• 豐富的動畫播放參數以及關鍵幀事件：支援擷取播放、倒序播放、播放速度、混合時長設定；可以方便地監聽動畫的各種狀態；可以配置關鍵幀事件。

• 自動化 Spine 骨骼動畫的編輯與解算：支援 Sine、Wiggle 以及物理模式動畫的解算。

• 基於 Stencil 的遮罩動畫：使用 Mesh 作為遮罩，支援正向遮罩與反向遮罩，使用簡單靈活。

材質藍圖系統

Fast Scene 的材質藍圖系統學習並借鑑 Unreal 引擎。在編輯器中可以使用圖形化節點連線的方式編輯頂點和片元著色器，並在編輯器中實時預覽最終的效果。節點編輯器不僅集成了常規 WebGL 函式，還包含了豐富的快捷運算模組，以及抽象化的功能效果函式模組和成品效果模版。節點編輯器還支援自定義函式以及函式模組的巢狀。動畫師也可以通過 Fast Scene 實現材質特效。

示例 5: 下雨效果編輯

粒子系統

Fast Scene 中，粒子是一種可配置的通用外掛型別。建立粒子時，編輯器會自動在專案裡生成粒子模版材質和用於建立粒子物件的 JS 指令碼。

當前版本的粒子動畫軌跡，是基於可配置曲線函式實現的，相比物理速度模式，在低版本瀏覽器上有更好的相容性以及更好的效能。

Fast Scene 自帶粒子效果可以實現雪花、爆炸、火焰、螢火蟲、噴泉等大部分的動畫需求。通過修改生成的材質 Shader 指令碼，可以高自由度的定製粒子，完成驚豔的演出。

預設建立的粒子是使用 THREE.InstanceBufferGeometry 的 Mesh，相比 Point 型別可以實現更多動畫效果。同時，預設建立的粒子支援基礎形態網格的配置；並支援運動軌跡跟隨，可實現速度線型粒子效果。

示例 6: 粒子效果

市場

編輯器中的市場是我們存放模板和常用動畫素材的地方，目前包含 2 種類型市場，通用市場和藍圖材質市場。市場功能可以方便使用者查詢和複用效果素材，以極低門檻或 0 程式碼量去使用一些已開發完畢的外掛，來完成視覺特效。從市場應用的素材、指令碼、動畫資料會無縫地新增到當前專案中。在通用市場裡可以下載並應用一個場景級別的素材包，包含套裝的視覺元素或貼圖、材質 Shader、外掛指令碼、動畫資料。藍圖材質市場主要服務於視覺特效演算法的抽象分享和複用，有點類似於藍圖版的 shadertoy。市場將效果、演算法、功能進行抽象化、模組化，通過積累，可以逐步體現出工業化動畫製作的效率優勢。

目前 Fast Scene 編輯器還在起步階段，還需時日去沉澱。未來的方向是降低動畫專案製作門檻，提升開發者和動畫師的協同效率，幫助使用者聚焦創意本身。在編輯器、工具鏈的打磨過程中，探索適用於 WebGL 動畫的工業化與自動化流水線，支撐次世代渲染下更具挑戰的動畫表現效果。

加入我們

我們米哈遊平臺前端團隊是一群熱愛遊戲的技術宅，我們為米哈遊的遊戲專案（如原神、崩壞 3 等）的研發及運營提供一站式的平臺服務體系，在追求極致中獲得成長、認可和對等的回報，期待你的加入，在這裡，你可以參與支付、社群、IM、WEB 小遊戲、LowCode 平臺、BI、運營中臺以及遊戲研發協同工具等多種型別的專案。

歡迎關注公眾號“米哈遊招聘”查詢招聘資訊。