作者 | 米哈遊平台前端團隊技術背景今天有幸給大傢分享一些米哈遊前端在 WebGL 動畫工業化上的探索和實踐 內容的主角是名為 Fast Scene 的自研編輯器。它是一套易用且高效的用於開發前端富交 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、運營中台以及遊戲研發協同工具等多種類型的項目。

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