整合three.js、A

2019-11-02 19:24:48 映維網 分享

查看引用/信息源請點擊:映維網

實驗性Entity Component System框架

映維網 2019年10月28日)Mozilla日前為Javascript發布了一個全新的實驗性Entity Component System框架。

這家公司在過去數年間開展了一系列用于Web的交互式圖形項目,并開始整合總結常見的問題。

根據研究,Mozilla發現理想的框架是:

基于Component:可將代碼重用于多個項目。

可預測:避免隨機事件或回調中斷主流程,這會令調試或跟蹤應用程序中發生的事情變得困難。

優秀的性能:大多數Web圖形應用程序受CPU限制,所以應該更加關注性能。

簡單的API:核心API應該簡單,令框架更易于理解和優化;但同時可以根據需要構建更復雜的層。

支持多圖形引擎:不應該綁定至特定的圖形引擎或框架。

這屬于Hige-Level功能,諸如three.js或babylon.js之類的圖形引擎通常無法提供。另一方面,A-Frame提供了一個基于Component的優秀架構,而這在開發較大型項目時十分方便,但缺少前面提到的其他功能。例如:

性能:處理DOM意味著負載。例如,直接訪問Component的值而非使用setAttribute/getAttribute。這可能會導致一定的副作用,如Component之間的不兼容和缺乏反應行為。

可預測:由于DOM生命周期或事件在修改屬性時的事件回調而導致的異步處理,這使得代碼難以調試和跟蹤。

跨圖形引擎支持:目前,A-Frame及其Component與Three.js緊密綁定,無法將其用于任何其他引擎。

Mozilla分析了所述要點,整合了對three.js和A-Frame的經驗,并研究了Unity等游戲引擎的最新技術,然后決定用純Entity Component System(ETS)架構來構建新框架。Unity的MonoBehaviour或A-Frame的Components等更為面向對象方法相比,純ECS(如Unity DOTS,entt或Entitas)區別在于,前者的Component和系統都具有邏輯和數據,而后者僅有數據(無邏輯),并且邏輯位于系統之中。

通過專注于為這個新框架構建一個簡單的內核,Mozilla在開發新應用程序時能夠更快地進行迭代,并允許他們根據需要實現新功能。它同時允許團隊將其與Three.js,Babylon.js,Phaser,PixiJS等現有庫一起使用,直接與DOM,Canvas或WebGL API進行交互,或者圍繞新API進行原型開發,比方說WebGPU,WebAssembly或WebWorkers。

1. 架構

Mozilla決定采用面向數據的架構,因為他們注意到將數據和邏輯分離可以幫助他們更好地構思應用程序的結構。這同時允許他們優化內部,比方說如何存儲和訪問數據,或如何獲得邏輯的并行性優勢。

為了應用所述框架,你需要明確下面的術語與任何ECS基本相同:

Entities:具有唯一ID且可以附加多個Component的空對象。

Components:實體的不同方面,如幾何和物理。Components僅存儲數據。

System:邏輯所在。它們主要通過處理Entities并修改Components來完成實際的工作。它們基本屬于數據處理器。

Queries:System根據Entities擁有的Components來確定它們對哪個Entities感興趣。

World:用于Entities,Components,Systems和Queriess的容器。

到目前為止,所有信息都非常抽象,所以我們來深入研究一個簡單的示例。這個示例將由在屏幕移動的方框和圓圈組成,盡管十分簡單,但足以幫助你理解API的工作原理。

2. 示例

我們將從定義附加到Entities的Components開始:

Position:Entity在屏幕上的位置。

Velocity:Entity移動的速度和方向。

Shape:Entity具有的形狀類型:圓形或方形。

下面我們定義將邏輯保留在應用程序中的System:

MovableSystem:它將查找具有速度和位置的Entity,并更新其Position Component。

RendererSystem:它將在當前位置繪制形狀。

(完整源代碼請查看Github或Glitch)

3. 功能

框架當前具有的主要功能是:

支持多引擎/框架:你可以直接結合ECSY和已經習慣的2D或3D引擎。Mozilla提供了有關Babylon.js,Three.js和2D canvas的簡單示例。為了實現簡化,Mozilla計劃從Three.js開始為最常用的引擎發布一組bindings和helper component。

聲明:本站部分資源來源于網絡,版權歸原作者或者來源機構所有,如作者或來源機構不同意本站轉載采用,請通知我們,我們將第一時間刪除內容。本站刊載文章出于傳遞更多信息之目的,所刊文章觀點僅代表作者本人觀點,并不意味著本站贊同作者觀點或證實其描述,其原創性及對文章內容的真實性、完整性、及時性本站亦不作任何保證或承諾,請讀者僅作參考。
編輯:牛牛
快乐十分胆拖中奖图