Firefox OS 適用的 WebGL 與 CreateJS (上)
本篇為 gskinner 公司開發者的友情贊助文。Mozilla 已與該公司的 CreateJS.com 團隊合作，除了協助開發開放源碼函式庫的新功能之外，也確保該函式庫能於 Firefox OS 上妥善運行。
我們 gskinner 的公司哲學，就是要將解決方案貢獻給開發社群所用。最近四年來，我們都專注於 HTML 與 Javascript 的 Web 標準。我們的 CreateJS 函式庫現已提供模組化、簡易不生硬、可跨平台與瀏覽器的 API，並能於開放的 Web 上建構豐富的互動經驗。實在太好玩了。
舉例來說，CreateJS CDN 每個月都能收到許多意見與心得。而 Adobe 也已選用 CreateJS 作為其官方的正式框架，可於 Flash Professional CC 中建立 HTML5 文件。
Firefox OS 則是能完美搭配 CreateJS 的內容。我們只花了些許功夫，就讓最新函式庫不僅能支援 Firefox OS，也成為該平台 App 與遊戲的有力撰寫工具。
我們很高興能有 Mozilla 全力支援 CreateJS，並對外發表絕妙的函式庫！
WebGL
隨著有越來越多瀏覽器支援 WebGL，在與 Mozilla 密切合作之後，我們也很高興能大聲宣佈：適用於 EaselJS 的全新 WebGL 繪圖器 (Renderer) 現已進入早期測試階段了！接下來的研究、最佳化、內部討論等活動重點，將努力建構出繪圖器以描繪 2D 內容，並達到目前 Canvas 2D 的 6 ~ 50 倍速度，且將完整支援瀏覽器與 Firefox OS 的 In-app 內容。
我們之前就盤算著要讓 WebGL 繪圖器能達到哪些效能，目前先濃縮出三大主要目標：
- 繪製 sprites 與點陣圖 (bitmap) 的超高效能
- 以現有的 EaselJS API 為基礎，保持其一致性
- 若無法使用 WebGL，亦可退回使用 Context2D
下列是我們想到的重點：
SpriteStage 與 SpriteContainer
SpriteStage 與 SpriteContainer 此二項新類別，可於顯示清單上強加限制，主動最佳化點陣圖的描繪作業。描繪作業包含圖像、sprite 動畫、點陣圖文字等。SpriteStage 則是能自動對各組幀像產生額外的繪圖呼叫 (Draw call)、讓單一繪圖呼叫內的最多元素數量不受限，達到更靈活的作業。
此二種新類別均為現有 EaselJS 類別 (即 Stage 與 Container) 的延伸，因此只要開發者熟悉 EaselJS，就能輕鬆建構出 WebGL 內容。且若是使用 EaselJS 繪出現有內容，也只要幾個步驟就能改用 WebGL。
圖層繪圖器 (Layering Renderer)
此方式可讓 WebGL 與 Context2D 的內容層疊於畫面之上，而且滑鼠/觸控的操作仍可在圖層之間運作。舉例來說，若有高速的遊戲引擎使用 WebGL 繪圖技術，即可在 UI 圖層之下顯示，且此圖層又可利用 Context2D 繪圖器最常見的功能。你甚至可在 WebGL 與 Context2D 之間切換繪圖資源。
最後，WebGL 內容可完全相容於現有的 Context2D 繪圖器。若裝置或瀏覽器並不支援 WebGL，則亦將由 canvas 2D 自動描繪其內容。
雖然必須耗上點功夫，才能從新的繪圖器中榨出一丁點的效能，我們還是很高興能擁有此新的方式。開發者除了能讓更多裝置達到更高效能之外，也能利用 CreateJS 周遭極為豐富的現成 API 與工具。接著你可透過下方展示與遊戲的連結，了解我們所說的絕佳效能。
說到這裡，你是否已經初步了解 Firefox OS 適用的 WebGL 與 CreateJS？可別錯過《Firefox OS 適用的 WebGL 與 CreateJS (下)》所提到的繪圖效能展示與小遊戲喔！
原文連結：WebGL & CreateJS for Firefox OS
