Maverick Project

　WebGL 1.0
　OpenGL ES 2.0
　Google Chrome 12.0.742.100
　jQuery 1.6.2
　glMatrix 0.9.5

■WebGL 1.0 はじめました　[ サンプルページ ]	Top　Next
	関連ページ：なし

サンプル

■はじめに

２か月ぶりの更新です。仕事のほうが一段落したので、再び更新再開します。で何やろうかしばらくネタ探してて、最初は、スマートフォンで3Dソフト開発しようかと思いました。はやりものだしね。
ですが、ブラウザ上で3DCGを表示させることができる WebGL というものがあってこれもスマートフォンと同じ、OpenGL ES だし、だったらハード購入する必要がない WebGL でいいじゃん的な理由で WebGL やることにしました。

WebGL は現在開発中の標準規格で2011/6/24現在のバージョンは 1.0 です。標準規格のためブラウザが WebGL に対応してさえあれば、特別なプラグインをインストールする必要がありません。また javascript で動作するため、Internet Information Services( IIS ) などのWebサーバを構築する必要もありません。こんなにお手軽に使えるのに、シェーダーまで使用できるんだから正直すげーと思いました。

まあいいところだけでもなくて、~~コンパイラがない( いや見つけられていないだけか？ )ため開発効率が悪いとか、~~ 現在問題となっているセキュリティ対策の問題とか懸念事項はありますが、それを差し引いても十分魅力的な技術だといえます。
今後の展開が気になるところですが、Silverlight を押したい Microsoft がどう絡んでくるのかが楽しみです。まあ今現在は否定的な姿勢をとってますけどね。

さて、前置きが長くなりましたが、ここからWebGL について解説していきます。

WebGL はすでに説明したとおり、ブラウザ上で3DCGを表示させることができる標準規格です。管理はKhronos Groupが行っています。 Khronos Groupは知っている方もいらっしゃると思いますが、OpenGLなどのさまざまなAPIの開発を行っている非営利団体です。したがって WebGL で開発を行う場合は、必然的に OpenGL ES を使用することになります。
DirectX 9 ライクな開発も可能らしく、これをやるにはANGLE: Almost Native Graphics Layer Engineを使用します。これは DirectX 9 の API の呼び出しを OpenGL ES の API の呼び出しにエミュレーションさせるレイヤです。まあ速度的にどうなの？って疑問があるし、スマートフォンが OpenGL ES 使用していることもあるし、ここは素直に OpenGL ES 使いましょう。

■OpenGL ES 2.0について

WebGL は OpenGL ES 2.0 を使用して3DCGを表示します。さて当サイトを見に来ている人の中には DirectX 使っていて、 OpenGL なんか知らねって人がいるかと思います。確かに記述方法は異なるとか、座標系が異なるなどの違いはありますが、3DCGを表示するためにしなければならないことは同じです。ですので DirectX 知っているならば OpenGL も労せず使いこなせるようになると思います。
なおリファレンスについてはWebGL Reference Cardを参照してください。

■WebGLの実行環境の構築

１．HTML5に対応するブラウザ

WebGLでは<canvas>タグ領域内に3DCGを表示します。そのためHTML5に対応するブラウザで表示する必要があります。といっても新しいブラウザであればそのほとんどがHTML5に対応しているのでここはあまり気にしなくていいでしょう。

２．WebGLを実行できるブラウザ

HTML5の項目で実行環境のブラウザについてはあまり気にすることはないと書きましたが、実はこっちのほうで気にする必要があります。 WebGL は Google Chrome、Mozilla Firefox、Operaなどでサポートされていますが、Windows Internet Explorer 9といった一部のブラウザが対応していません( 2011/6/24現在 )。ただサポート情報については真偽がいまいちつかめていないので当サイトでは当面 Google Chrome のみサポートすることとします。

なお余談ですがJetGLというまだ開発段階のプロジェクトがあって、これを使用するとWebGLに未対応のブラウザでも動作できるようになるらしいです。

３．ブラウザの環境設定

当然ですが、WebGLを実行するブラウザのjavascriptを有効にする必要があります。
またWebGLを有効にする必要もあります。 Google Chrome 12.0.742.100の場合、デフォルトで有効となっているようなのでそのまま実行できます。

４．３Ｄアクセラレータ

ビデオカードが OpenGL 2.0 をサポートしている必要があります。

５．外部ライブラリをダウンロードする

当サイトでは２つのjavascriptライブラリを使用するためこれをダウンロードします。いずれも必須ではないのですが、開発が楽になるので使っていきましょう。

１．jQuery
jQuery はjavascriptの拡張パックです。必須ではないですが、気分で使ってみました(笑)。
jQuery は非常に独特の記述方法となるため、なれるのが大変だと思います。勉強方法はまずサンプルソースをみてわからないところをその都度調べていって、改造してみるをひたすら繰り返すのがいいと思います。チュートリアル形式の40分で覚える！jQuery速習講座とか、リファレンスのjQuery日本語リファレンスが参考になるでしょう。

２．glmatrix
glmatrixは、javascriptで記述された WebGL 用の行列とベクトル演算ライブラリです。

■開発環境の構築

１．javascriptのエラーチェック

Google Chrome 12.0.742.100の場合、以下の方法でjavascriptのエラーチェックを確認できるようにします。

１．ウィンドウ右上にある、スパナみたいな画像をクリックします。

２．「ツール」をクリックします。

３．「JavaScript コンソール」をクリックします。

２．PIXライクなデバックツール

次のリンク先にあるライブラリを使用すると、DirectX の PIXツールライクなウィンドウが表示されて、デバックすることが可能となります。

WebGL Inspector

次の手順で環境を構築します。
１．ライブラリをダウンロードする。
２．coreフォルダ以下の資源をすべて自分のサイト内に配置する。
３．ソースを次のように修正する


<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="robots" content="index,follow">
<meta name="Description" content="WebGL">
<TITLE>Maverick Project</TITLE>
<script type="text/javascript">
  var gliEmbedDebug = true;
</script>
<script type="text/javascript" src="core/embed.js"></script>
<script type="text/javascript" src="../jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="../glMatrix-0.9.5.min.js"></script>
<script type="text/javascript">

４．ウィンドウの右上に「Capture」「UI」が表示されるようになるので、クリックしてみてください。

２点注意点があります。
今回すべてのページを修正しましたが、jQueryの ready() 関数を使用すると、エラーになって、正しく動作してくれませんでした。ですので ready() やめて onload に変更しました。
また、当サイトのサンプルに WebGL Inspector はしこまないので、使用するときはご自身で修正してください。

■サンプルを実行

サンプルの実行は、サンプルページからできます。ソースはブラウザウィンドウ上で右クリックして、「ページのソースを表示」で表示できます。
なおソースの下のほうに、fc2の宣伝用のjavascriptが記述されているので削除してください。

なお、当サイトのサンプルは、Chrome でのみ動作確認していますので、Chrome で実行してください。
また GPU が OpenGL ES 2.0 に対応している必要があります。

上記を満たしているにもかかわらず実行できない場合は、ブラウザ側で WebGL を無効にしている可能性があります。どうもOS、グラフィックカード、チップセットの一部の組み合わせではWebGLを無効にしてしまうようです。
強火で進めより。

その場合はChrome のショートカットに --ignore-gpu-blacklist を追加して実行してみてください。これにより強制的に実行されるようになります。ただし、この方法は推奨されません。自己責任にて実行してください。

■サンプルの解説

コメントにいっぱい書いたので解説はなしの方向で(笑)。

■WebGL開発時に参考にしたサイト紹介

１．Hack The WebGL (WebGL勉強会)
チュートリアル形式となっています。英語サイトを日本語に翻訳したものなので英語が理解できて最新情報がほしい場合はLearning WebGLを参照してください。

■リンク集

Khronos Group	会員企業の会費によって運営される非営利団体です。WebGLなどを管理しています。
WebGL Reference Card	WebGLの簡易リファレンス( 英語 )。
glmatrix	glmatrixの公式サイト。2011/7/9時点ではBSDライセンスです。
WebGL Inspector	PIXツールライクなWebGLのデバックツール。
Hack The WebGL (WebGL勉強会)	WebGLのチュートリアル集( 日本語 )。最新の記事が記載されていない可能性があります。
Learning WebGL	WebGLのチュートリアル集( 英語 )。
WebGL Experiments	WebGLデモ集。
AlteredQualia	WebGLデモ集。
Canvas 3d JS Library	WebGL用のjavascript拡張パックです。COLLADAフォーマットが簡単に使用できるようになります。2011/7/18時点でMITライセンスです。
jQuery	jQueryの公式サイト。2011/7/9時点ではMITライセンスです。
jQuery日本語リファレンス	jQueryの日本語リファレンスです。

※jQueryはWebGLで直接的に必要となるライブラリではありません。

Top　Next