WebGLが実装されたWebKitを使ってみた

(10/02/25 追記)
WebGLの関数名などの変更によりブラウザのバージョンによっては動作しない可能性があります。

WebGLのサンプルが動作しなくなった - 強火で進め
http://d.hatena.ne.jp/nakamura001/20100224/1267028558

(2009/10/21 追記)
Nightly Builds版にもWebGLが搭載されました。
こちらの方が簡単に試せます。

WebKitのNightly Builds版にもWebGL搭載 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20091021/1256144947

最近、SafariやChromeなのでコア部分の実装であるWebKitにWebGLの実装が完了したとのニュースを知りました。

WebGLとはブラウザでプラグイン無しで、共通の記述で3Dグラフィックの描画を行う規格です。また、GPUを使用して実行するのでとても高速に動作します。

規格の策定はOpenGLの策定を行っているKhronosが立ち上げたWebGLワーキング・グループにて行われています。

【参考サイト】

yebo blog: WebKitがWebGLをサポート
http://yebo-blog.blogspot.com/2009/09/webkitwebgl.html

Khronos Press Releases - Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet
http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet/
※ページ自体は英語ですがここから日本語に翻訳したPDFがDLできます。

Wolfire Blog - Preview of WebKit’s WebGL / Canvas 3D
http://blog.wolfire.com/2009/09/preview-of-webkits-webgl-canvas3d/

この「yebo blog」や「Wolfire Blog」で記載が有る様に実装自体は完了しているのですがNightly Builds版で使えるのは「6ヶ月以内に」との事なのでこちらではまだ試せません。

しかし、折角実装が完了してるのに試せないのも残念なのでソースから自分のマシンでビルドしてみて動かしてみました。

こちら初代のMacBook Airで動作させていますが地球が沢山出てくるサンプルで多少処理落ちしている以外はさくさくと動作しています。

なんといってもこのロード時間の速さが良いですね。ブラウザで使うとなるとぱっと開いて、ぱっと動作しないとユーザが別のページに逃げちゃいますからねぇ。

こちらはローカルで実行しているので実際はテクスチャ画像のファイルをDLするのでもう少し遅いです。しかし、このくらいの速度で動作するのであれば十分、実用的だと思います。

MacでWebKitをビルドする方法

※自分が使用した範囲では特に問題は発生しませんでしたがsvn版の使用はリリース版のSafariの使用などに比べるとトラブルが発生する可能性もあります。トラブルが発生する可能性が有っても問題ない方のみお試し下さい。
※こちらのWebKitはあくまで開発版であり、また新しい技術が実装されたバージョンです。セキュリティの懸念などもありますのであくまでテスト用として使用し、普段のサイト閲覧にはリリース版のSafariなどを使用する様にしましょう。

1. ソースのDLする。
まずは svn でソースファイルをDLします。

The WebKit Open Source Project - Getting the Code
http://webkit.org/building/checkout.html

こちらのページの指示に従い、ターミナルでDLしたいディレクトリに移動し、以下のコマンドを実行します。

svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit

2. WebGLを有効にする。
今回はDLしたファイルの以下のパスに有るスクリプトを使ってビルドします。

WebKit/WebKitTools/Scripts/build-webkit

そのままではWebGLが有効になっていません。
こちらのファイルを開き、

my @features = (
    { option => "3d-canvas", desc => "Toggle 3D canvas support",
      define => "ENABLE_3D_CANVAS", default => 0, value => \$threeDCanvasSupport },

と記載の有る部分の default => 0 を default => 1 に変更し、保存します。

my @features = (
    { option => "3d-canvas", desc => "Toggle 3D canvas support",
      define => "ENABLE_3D_CANVAS", default => 1, value => \$threeDCanvasSupport },

3. ビルドの実行。
上記の修正を加えた