Learning WebGL

Learning WebGL翻訳‎ > ‎The Lessons‎ > ‎

Lesson 0:始めに

オリジナル(英語)はこちらから。 もし翻訳後の文章に間違いや気になる点など有りましたら、お気軽にこのページの下のコメント欄に書き込んでください。 できる限り対応します。 レッスン １>>  注）この資料は、オリジナルが投稿されてから何度もアップデートされています。最後のアップデートは2010年8月16日です。 WebGLへの最初のステップとして、それをサポートしているブラウザを手に入れましょう。 Internet Explorer を除くと、WebGLをサポートしているのは各種ブラウザの開発版となっています。 自分のマシン環境や好みにあったバージョンのブラウザを選びましょう。お使いのマシンによっては、とっても簡単にWebGL環境が手に入ります。 Windowsの場合   まず ATI か Nvidia のグラフィックカード（GPU）がマシンに搭載されているか確認しましょう。 搭載マシンだった場合には、 Firefox か Chromium、好きなほうをインストールします。 もし、インストールがうまくいかない場合には、それぞれのトラブルシューティングを参照してください。 もしGPUが搭載されていないマシンや多くのノートPCでは、インテルのグラフィックスチップセットを使います。 これは標準で付属していますが、GPUほどの性能はありません。 また、インテルの提供するチップセットでは OpenGL（これをベースにしてWebGLが動作します）がサポートされないことがあります。 実際に Firefox や Chromium でOpenGLやWebGLが動くかどうか確かめても、動かないことが多いです。 この場合には、ソフトウエアレンダリング（CPU上で3DCGを描く機能）をサポートしている Firefox を使うのが良いでしょう。 もちろんGPUよりも遅いですが、WebGLを動かして、色々と遊べます。 Macintoshの場合 もし Snow Leopard（OS X 10.6） をお使いでしたら、開発版の WebKit がオススメです。 これを使えば、Safariの別バージョンとして実行されます。 もし Leopard（OS X 10.5）をお使いの場合には、開発版のWebKitは使えません。 この場合には、開発版の Firefox か Chromium を使うことになります。 もちろん、Snow Leopard の人も Firefox や Chromium でもOKです。 これ以前のMacOSをお使いの場合には、残念ながら今のところWebGLを体験できるブラウザを私は知りません:-( Linuxの場合 だいたいWindowsの場合と同じです。 もし ATI か Nvidia のGPUを搭載しているならば Firefox か Chromium の好きなほうを使いましょう。 数か月前の 64ビットLinux版Firefoxには不具合がありましたが、現在は解決しています。 開発チームの Benoit Jacob いわく「使ってみて！不具合があったら連絡してね！」 もし GPU非搭載＝インテルグラフィックスチップの場合には、Windowsユーザーと同じように Firefox か Chromium でソフトウエアレンダリング機能を使います。 残念ながら Linux の場合には、ハードウエアレンダリングが標準なのでインストール時にいくつかやることがあります。 まず、 パッケージマネージャなどを使って、最新版の Mesa をインストールします。その後 Firefox でいくつかの追加セッティングを行います。 Firefoxを使うには 開発版(unstable)の Firefox は Minefield と呼ばれています。ほとんど毎晩のように更新されており(nightly buildと呼ばれてます)、かなり安定してきています。 下で紹介する設定をすれば、いきなりクラッシュすることもなくなりました（私は必ずその設定をしています）。 Minefield は、通常の Firefox と並行して使用することができます。なので、アンインストールすることなく、通常版にすぐに切り替えることができます。 Minefield のインストールと設定 Minefield の配布ページ ”nightly builds page”  に行き、マシン環境にあったバージョンをダウンロードします。 起動している Firefox を終了して、インストーラーを起動します。インストール項目は、特に設定しなくても問題ありません。 Minefieldを起動します。 アドレスバーに "about:config" と入力します。 フィルタの欄に "webgl" と入力します。 検索された"webgl.enabled_for_all_sites" の値を true に変更します。 2010年2月追記）この時に、同じように "dom.ipc.plugins.enabled" の値を false にするのがオススメです。 この設定をすると、ブラウザが固まってしまう現象を回避できます。PDFファイルを見えていないタブで開いているときによく起きます。 2010年11月訳注）現時点の最新版では、デフォルトでWebGL機能がオンになっています。よって、上記の4以降の作業は必要ありません。 (情報をくれた Vladimir Vukićević さん、ありがとうございます。) 最後に、ここをクリックして、WebGLのサンプルを試してください。 Windows上で、ソフトウエアレンダリングで動く Minefield を使うには もしWebGLをサポー トしているハードウエア環境が無い場合には、 Mesa と呼ばれるライブラリを使ってWebGLを動かすことになります。 GPUをソフトウエアエミュレートするのが Mesa の特徴です。少しだけ動作は遅いですが、無いよりはマシです！ Mesa をは Minefield（開発版のFirefox） に統合します。以下の手順で動かしましょう Minefield の配布ページ ”nightly builds page”  に行き、マシン環境にあったバージョンをダウンロードします。 起動している Firefox を終了して、インストーラーを起動します。インストール項目は、特に設定しなくても問題ありません。 ここから、Mozillaの Vladimir Vukićević が提供してくれている Mesa ライブラリをダウンロードします。 ファイルを解凍して、そこに含まれる OSMESA32.DLL を 適当な場所(C:/temp など) に置きます。 Minefieldを起動します。 アドレスバーに "about:config" と入力します。 フィルタの欄に "webgl" と入力します。 検索された"webgl.enabled_for_all_sites" の値を true に変更します。 同じように、検索された "webgl.osmesalib" の値を 4. で置いた DLLファイルを指すようにします。たとえば C:/temp/OSMESA32.DLL です。 最後に "webgl.software_rendering" の値を true に変更します。  2010年2月追記）この時に、同じように "dom.ipc.plugins.enabled" の値を false にするのがオススメです。 この設定をすると、ブラウザが固まってしまう現象を回避できます。PDFファイルを見えていないタブで開いているときによく起きます。 (情報を提供してくれた Vladimir Vukićević 、ありがとう！) 設定がすべて終了したら、WebGLのサンプルを試してください。 Linux上で、ソフトウエアレンダリングで動く Minefield を使うには もしWebGLをサポー トしているハードウエア環境が無い場合には、 Mesa と呼ばれるライブラリを使ってWebGLを動かすことになります。 GPUをソフトウエアエミュレートするのが Mesa の特徴です。少しだけ動作は遅いですが、無いよりはマシです！ Mesa は Minefield（開発版のFirefox） に統合でき、各Linuxディストリビューション毎に提供されています。以下の手順で動かしましょう。 Minefield の配布ページ ”nightly builds page”  に行き、マシン環境にあったバージョンをダウンロードします。 起動している Firefox を終了して、インストーラーを起動します。インストール項目は、特に設定しなくても問題ありません。 お使いのLinuxディストリビューションのパッケージマネージャーを使って、最新の Mesa をインストールしてください。 Minefieldを起動します。 アドレスバーに "about:config" と入力します。 フィルタの欄に "webgl" と入力します。 検索された"webgl.enabled_for_all_sites" の値を true に変更します。 次に "webgl.software_rendering" の値を true に変更します。  最後に “webgl.osmesalib” の値を OSMesa ライブラリを指すように変更します。(/usr/lib/libOSMesa.so など) 2010年2月追記）この時に、同じように "dom.ipc.plugins.enabled" の値を false にするのがオススメです。 この設定をすると、ブラウザが固まってしまう現象を回避できます。 PDFファイルを見えていないタブで開いているときによく起きます。 設定がすべて終了したら、WebGLのサンプルを試してください。 Safari の場合 上でも説明しましたが OSが Snow Leopard(OS X 10.6)でないと、WebGLがサポートされている Safari が使えません。 もし Leopard(OS X 10.5)かWindows かLinuxをお使いでしたら、 Firefox か Chromium を使いましょう。 もし、古いバージョンの OS X をお使いの場合には、使用できるブラウザを私は知りません :-() Snow Leopard の場合 最新版の Safari であるか確認します。そうではない場合、インストールします。 WebKit の開発版をダウンロードし、インストールします。 ターミナルを立ち上げて、以下のコマンドを実行します。  defaults write com.apple.Safari WebKitWebGLEnabled -bool YES   インストールした WebKit を実行します。 (情報提供をしてくれた Chris Marrin、ありがとうございます。) 設定がすべて終了したら、WebGLのサンプルを試してください。 Chromium の場合 Chrome の開発者がオススメしているWebGL環境は、nightly build（開発）版の Chromium です。 これは Chrome をベースにしたオープンソースのブラウザです。インストール手順は、OSによって微妙に異なります。 ここでは Windows、Linux、Macintosh での方法を紹介します。（注意）私自身は Windows でしか試していません。 ほかの環境でもうまくいくとは思いますが、何かあればコメントをください。 Windowsの場合 開発中ページに行き chrome-win32.zip をダウンロードします。 ファイルを解凍します。 コマンドプロンプトを起動し、解凍したフォルダに行きます。 もし Chrome を起動している場合には、それを終了します。 次のコマンドを実行します。 chrome.exe --enable-webgl  Macintoshの場合 開発中ページに行き chrome-mac.zip をダウンロードします。 ファイルを解凍します。 ターミナルを起動し、解凍したフォルダに行きます。 もし Chrome を起動している場合には、それを終了します。 次のコマンドを実行します。   ./Chromium.app/Contents/MacOS/Chromium --enable-webgl 動作を確認したら、上のようなコマンドライン/ターミナルの処理は自動的に行いたくなると思います。 コメント欄にて、Julien Limoges が便利なスクリプトを紹介してくれました。 Linux の場合 開発中ページに行き chrome-linux.zip をダウンロードします。 ここで、32bit版と64bit版は置いてあるページが異なるので注意してください。 64bit版の場合には、かならず64bit版の開発ページからダウンロードしてください。 ファイルを解凍し、ターミナルでそのディレクトリに移動します。 もし Chrome を起動している場合には、それを終了します。 次のコマンドを実行します。       ./chromium --enable-webgl (情報提供をしてくれた Mohamed Mansour 、ありがとうございます。) 設定が終了したら、WebGLのサンプルを試してください。 2010年11月訳注）現時点で、デフォルトでWebGLの機能はオンになっています。また、開発版ではない通常版でも、オプションを付ければWebGLが実行できます。 いくつかのサンプル 適切な環境のインストールが終了したら、WebGLを実行することができます。 まずはこの、私の2ndレッスンでのコンテンツを実行してみましょう。赤と緑と青の三角形と、明るい青の四角形が見えるはずです。 もし、見えない場合には、以下のトラブルシューティングを参照してください。 ちゃんと確認できたならば、セットアップは終了しました。 残念ながら、最近のWebGL自身のアップデートにより、いくつかのデモは動かないようになってしまいました。 以下のサンプルは、アップデートされた動作確認済みのコンテンツです。 私自身のデモ：Bouncing Mandelbrot Cubes Ilmari Heikkinenのデモ：らせん状に回転するキューブと、キューブを使ったペイントプログラム Googleのデモ：輝くティーポット（マウスで回転させられます。）と、“San Angeles“、それと、パーティクルのデモ 実際に使われている例：分子構造をブラウザ上で確認できる ChemDoodle 3D 一番上のデモは、私自身の最初のWebGLのコードです。もし、WebGLについてもっと学んで何か作りたくなったら、次のレッスンに進んでください。 レッスン １>>  トラブルシューティング ここには、Macintoshに関する有用なヒントや用例があまりありません。 私が質問を受けたことも、フォーラムでの質問もあまり見たことがありません。 なので、Macintoshはみんなちゃんと動いているのだろうと思います。 WindowsとLinuxの場合に WebGL が動かないもっともよくある原因は、GPUのドライバの問題です。もちろん、コードの不具合は除いて、ですが。 現在、すべてのブラウザはOpenGLをベースにして WebGL を実装しています（将来的にどうなるかは不明）。 そして、OpenGLのサポートは、GPUドライバに依存しています。WebGLでは、少なくとも OpenGL2.0 がサポートされている必要があります。 インテルのグラフィックスチップセットで問題がよく発生するのは、インテルが多く場合において OpenGL2.0 に対応していないからです。 もし、WindowsやLinux上で、上記の設定を行ってもWebGLが動かない場合には、コメントをください。可能な限りヘルプします。 もし ATI  や Nvidia のGPUを使っている場合には、サポートされているOpenGLのバージョンを確認してください。 Windowsでは、GLviewというツールを使えば確認できます。Lunixでは、glxinfo を実行し"OpenGL Version String"という文字列の後をチェックしてください。 もし、この数字が2.0よりも小さい場合には、ドライバのアップデートを行ってください。 そのためには、あなたのコンピューターの販売元のページか、Windowsアップデート、もしくはパッケージマネージャーを使ってください。 もし、これでもWebGLを実行できない場合、あなたのハードウエアやOSでは、OpenGL、つまり WebGL を動かせるドライバが無いのでしょう。 このページの上部を参考にして、ソフトウエアレンダリングで対応してください。