WebGLでゲームを作る
みなさんがWebGLを始めたいと思われた理由はなんでしょうか。
「市販の3Dゲームのような、すごい映像コンテンツを作りたい」と望んで始められた方もいらっしゃることでしょう。
しかし実際のところ、WebGLでそうした市販の3Dゲームのような映像を作ることは可能なのでしょうか？
WebGLは三角形しか表示できない（？）
WebGLを始めとしたリアルタイム3D用のAPIは、実は三角形（ポリゴン）を表示する機能しかありません。1
もちろん最終的には工夫を重ねることでリッチな映像ができるのですが、基本としてこれらの映像はすべて三角形で作ります。その三角形上の色をプログラムで計算したり、画面に重ね塗りする対象を一部制限したりすることで最終映像を段階的に作っていくのです。
GPUにはその三角形にテクスチャ（模様画像）を貼り付けたり、シェーダーというプログラムを使って動的に三角形上に複雑な色を計算で出したり、透明度を設定することすることが可能です。
近年の複雑で写実的なゲームも、紐解けばそうした技術の積み重ねによって作られています。
ゲームや映画ではどうしている？
市販のゲームや映画では、あれほどまでにリアルな造形をどのように制作し、そしてプログラム上に構築しているのでしょうか。
まず造形について、主に次の２つの方法があります。
-
A. 三角形の組み合わせ（ポリゴンメッシュと呼ばれます）で構成された基本形状（立方体、球、円錐、円柱など）をプログラム的にあらかじめ登録しておき、
それらを変化をつけながら呼び出し、組み合わせることで目的の造形を実現します。 -
B. ３Dソフトで複雑な形状のポリゴンメッシュを作成し、それをファイルに書き出し、3Dプログラムで読み込んで表示する。
A. はシンプルですが、作れるモデルの複雑さには限界があります。人体などの複雑なモデルをプログラムコードに手動で書き込むことは難しいでしょう。
人物や動物などの、複雑な形状をWebGLで表示したいなら、まず間違いなくBの方法をとることになります。2
Bの方法でも、ファイル中に記録されているキャラクターや動物の形状は、大量の三角形の集まり（ポリゴンメッシュ）として記録されています。
実際にはゲームや映画でも、シンプルさやパフォーマンスの点からAの方法を部分的に利用することがあります。
たくさんある３Dソフト
3Dソフトにはたくさんの種類があります。
Autodesk社Mayaなどのプロ御用達の何十万もするソフトから、「Blender」などオープンソースの無料で使えるものなど3多岐に渡ります。
ここでは3Dソフトで作られたポリゴンメッシュモデルデータがすでに手元にあるものと仮定して話を進めます。
3Dデータを記録する３Dファイルフォーマット
3Dデータのファイル形式はたくさんあります。
どれか一つ、あなたが使う３Dソフトが出力をサポートしていて、そしてWebGLで表示する際のファイル入力の処理を開発しやすいフォーマットを選ぶとよいでしょう。
最近ではglTF形式がおすすめです。
WebGLだと、どの程度の表現が可能なのか？
結論からいうと3D APIとしての機能レベルという意味ではWebGL2でPlayStation 3 程度と考えてください。
ちなみに、PlayStation 3の初期〜中期の有名タイトルである「KILLZONE 2」というゲームのリアルタイム映像は、（静止画ですが）このような感じ です（動画はゲーム内容が過激なので、ここでは掲載を控えます）。
このような市販ゲームではデジタルアーティスト4たちの芸術センスも映像品質にかかわります。
そのため直接の比較は難しいですが、少なくともWebGLにもこの水準を作れるだけの機能がAPIとしてあるということです。4
プログラムだけも良い作品は作れる
こうした水準に到達するのは、一朝一夕でできることではありません。ゲーム会社と異なり、プロのアーティストに素材制作を依頼するにはお金もかかります。
しかし、優れた作品をプログラムだけで実現することも不可能ではありません。
例えば、以下の２つのデモを見てください。
どちらも、プロのアーティストによる複雑なキャラクターモデルなどは出てきません。
これらのすばらしい見栄えは、WebGLを駆使した「プログラムの巧みさ」によって実現されています。
さらにデジタルアーティストのアートが加わると…
プロのアーティストによるアート素材が加わると、表現はさらに多彩になります。
cru ci form by clicktorelease.com
これらがすべてWebブラウザで動いています。WebGLはすごいですね。