強火で進め

このブログではプログラム関連の記事を中心に書いてます。

WebKitのNightly Builds版にもWebGL搭載


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

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

WebKitのNightly Builds版にもWebGLの機能が搭載された状態でビルドされたものが提供されているようです。

Surfin’ Safari - Blog Archive » WebGL Now Available in WebKit Nightlies
http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/

DLはこちらから
※現在はまだMac版(LeopardSnow Leopard)のみ対応みたいです。

WebKit Nightly Builds
http://nightly.webkit.org/

※こちらのWebKitはあくまで開発版であり、また新しい技術が実装されたバージョンです。セキュリティの懸念などもありますのであくまでテスト用として使用し、普段のサイト閲覧にはリリース版のSafariなどを使用する様にしましょう。

DLしてアプリフォルダにコピーが終わったら起動前にターミナルで以下のコマンドを実行する必要があります。

defaults write com.apple.Safari WebKitWebGLEnabled -bool YES

WebGLの機能はデフォルトではOFFになっている様でこちらのコマンドで有効になる様です。

後は以下のサイトなどで動作確認をしてみましょう。

新たに公開されたWebKit向けのサンプル

Boxに犬の写真のテクスチャが貼られたもの
http://webkit.org/blog-files/webgl/SpiritBox.html

Firefox向けに作成されたサンプル(WebKitでも動作可能)

COLLADAファイル形式のモデルデータを表示するサンプル
http://people.mozilla.com/~vladimir/webgl/spore/sporeview.html

WebKit向けに最初に公開されたサンプル

Boxが回転するサンプル
http://trac.webkit.org/export/48330/trunk/WebCore/manual-tests/webgl/SpinningBox.html

地球と火星を表示するサンプル
http://trac.webkit.org/export/48330/trunk/WebCore/manual-tests/webgl/Earth.html

地球と火星をたくさん表示するサンプル
http://trac.webkit.org/export/48330/trunk/WebCore/manual-tests/webgl/ManyPlanetsDeep.html

ティーポットを表示するサンプル(Vertex Shaderのサンプル)
http://trac.webkit.org/export/48330/trunk/WebCore/manual-tests/webgl/TeapotPerVertex.html

ティーポットを表示するサンプル(Pixel Shaderのサンプル)
http://trac.webkit.org/export/48330/trunk/WebCore/manual-tests/webgl/TeapotPerPixel.html

その他

キャラクターを複数表示するベンチマークのサンプル

3b test1::webgl::projects

http://3bb.cc/projects/webgl/test1/

タイトル通りのWebGLCSSを組み合わせたサンプル
※クリックするとCSSを使ったエフェクトが実行されます
WebGL + CSS Effects
http://webkit.org/blog-files/webgl/WebGL+CSS.html