2010-04-02

GwtQuake:將 Web 提昇到下一個境界

原文:http://timepedia.blogspot.com/2010/04/gwtquake-taking-web-to-next-level.html

技術校正、審閱:tkcn

早在 2009 年 11 月的 GWT 高層腦會議上,我和 Joel Webber 就專注於改善 Web 和 UI latency 議題。有人在介紹 WebGL 時,我發現坐在後頭 Joel 看起來完全沒在聽。當我走近他時,他說:「看過這玩意了嗎?」他晃了晃 notebook 展示 Jake2——將 Quake2 用 Java 移植成 Java Web Start application。幾年前我就看過這個 project 了,只是不知道已經進展到這種地步。

就在那時,我不用問也知道他想幹麼——他提議我們用 GWT 改寫 Jake2!


Web 化的方式
「將 Jake2 這類的東西,用 GWT 來 compile 成 JavaScript」的想法,看起來好像很簡單。因為 GWT 本來就是把 Java compile 成 JavaScript。不過要能 compile 仍需要對程式碼作一堆調整、以及將 I/O 對應到合適的 Web API。

你可能已經知道,GWT 其實只有實做 JRE 的一部份,而 Jake2 使用了很多 GWT 當中沒有的 Java class:

  • 3D 的 LWJGL library
  • java.nio.Buffer
  • 網路對戰需要用的 java.net.*
  • AWT 中關於鍵盤的內容
  • 載入資料要用到的檔案系統 API
  • 影音要用的 OpenAL

更重要的是,它是用 synchronous API 作 I/O,但是 JavaScript 是使用 event driven 的 I/O 方式。

I/O 對應
Joel 將 Jake2 的 I/O 系統重新改寫成用 event driven pump 來載入檔案。我們做的第一件事就是處理關卡與 model 的檔案載入,使用 2D <canvas> wireframe renderer 來處理 rendering(沒有用 WebGL)。接著 Stefan Haustein 貢獻了使用 WebGL 的 javascript array 來實做 Java NIO Buffer 的 JRE class,以及用 WebGL 為基礎的 GL renderer。

Joel 很神奇的用 WebSocket 加上了多人對戰的功能,即使測試的人分散在 Atlanta、Mountain View、甚至是 Sydney(雪梨),我們還是廝殺的很爽。

我繼續轉換所有的聲音成 MP3 格式,並且實做了只用 DOM Audio element 的初步 sound renderer。後來,我把 OpenAL 程式碼重構成一個(譯註:GWT 的)base class,並且提供了 OpenAL Inverse Distance Clamped 聲音 model 的實做,用來調整 3D 位置中的音量變化。除了 audio.volumn 之外,沒有用其他東西。

Stefan 使用 LocalStorage 來實做 RandomAccessFile 供遊戲存檔用,以及用 <video> tag 來實做 video 播放。

大部分的工作在今年一月用 part time 的方式完成,但在那之後進度就卡住了。例如 Stefan 就專注在移植整個單人遊戲(無須 server)成靜態的內容。

我會在 Google I/O 上頭作更詳細的解剖報告,請務必參加!

執行速度呢?
我覺得執行速度可能不快,不過說實話,我從來沒想過我們會做到這種程度;但事實證明,正常播放的 framerate 是有達成的。在 MacBook 上的 WebKit/Chrome 有 20~25fps、在 Mac Pro 桌機則有 45fps。Joel 則說在 Linux(notebook)可以到 60fps。

這對 web 的意義是什麼?
多年來,人們總覺得 browser 對這類事情而言,是一個貧乏的平台,所以需要 Flash、Silverlight、JavaFX 或 native 程式碼。儘管你不應該期望在瀏覽器上頭看到像《Far Cry》或《Call of Duty》這種頂級的作品,但這不能解釋為甚麼一堆 casual game 是用 Flash、或是用 Objective-C(在 iPhone/iPad 上)寫的,而我們使用的類似技術卻作不到。

此外,因為是網頁,你要邀請某人進入你的遊戲或分享遊戲,只要傳一個網址就可以了。你可以只接 tweet 你的遊戲網址、點下去就可以加入遊戲當中。而不需要安裝。雖然 Flash 也可以做到,但直接在 browser 當中會覺得比較「自然」。

我希望這個移植可以鼓勵某些人變得更大膽、更瘋狂地嘗試建立各種 Web App,因為如果 Quake2 用 JavaScript 跟 browser API 都辦得到,更令人驚艷的 application 正等你開發出來。所以,開始動手吧!

移植版的 source code 在:http://code.google.com/p/quake2-gwt-port

----
譯註:關於 quake2 的 GWT 移植版,在 GWT 官方 Blog 也有提到,不過該篇文章沒有這篇仔細,所以選擇翻譯這篇。雖然這個時間點實在令人遐想,不過在 Google Code 上頭的確有「非常真實」的程式碼可以觀看,有興趣者不妨試試看。