FirefoxのWebGLのサンプルが公開されたので動かしてみた

(11/03/22 追記)
WebGLのサンプルをお探しの方はこちら。

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

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

前回のエントリーでFirefoxにWebGLが実装されたと紹介したのですが前回は残念ながら動作しませんでした。

Firefox Nightly BuildsでFirefoxにもWebGLが実装された？ - 強火で進め
http://d.hatena.ne.jp/nakamura001/20090920/1253417113

今回、こちらでサンプルが公開されたので早速試してみました。

WebGL Samples/Demos and other bits at Vladimir Vukićević
http://blog.vlad1.com/2009/09/21/webgl-samples/

そのままではすんなり動作せず、それぞれのOSで以下の対応が必要でしたが無事動作しました。

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

Macの場合

・Minefield(開発版Firefox)のバージョンアップ(メニューからHelp→Check for Updates...)を行い、最新版にする。

Windowsの場合

・Firefox(DLしてきた開発版)のバージョンアップを行い、最新版にする。
・Mesa software OpenGLのインストール(※手順は以下を参照)
1. ブログにて指定の有る、 webgl-mesa-751.zip をDLする。
2. c:\temp を作成し、そこに 1. のファイルから解凍した osmesa32.dll を置く。
3. アドレスバーに about:config を入力。表示されたページ内の検索欄に「webgl.」と入力し、検索する。
4. webgl.osmesalib を探し、無い場合はデータ一覧部分を右クリックし、「新規作成」→「文字列」をクリック。

最初のダイアログに webgl.osmesalib を、次のダイアログに C:\temp\osmesa32.dll を入力。
既に webgl.osmesalib が存在する場合は値(Value)の部分に C:\temp\osmesa32.dll を入力。

※この設定で上手くいかない場合は webgl.software_rendering を trueに切り替えてテストしてみて下さい。

こちらの手順を行うとこのようにFirefox上でWebGLを使用したサンプルが実行できるようになります。

WebKitのWebGLとの互換性について

サンプルを確認したところ以下の様に先に "moz-webgl" で getContext を行い、失敗した場合は "webkit-3d" で実行するという記述になっています。

  var canvas = document.getElementById("canvas");
  var gl = null;
  try { 
    if (!gl)
      gl = canvas.getContext("moz-webgl");
  } catch (e) { }
  try { 
    if (!gl)
      gl = canvas.getContext("webkit-3d");
  } catch (e) { }

  if (!gl) {
    alert("Can't find a WebGL context; is it enabled?");
    return;
  }