Three.jsでWebGLのフライトシュミレーターを作りました

何年も前にHTML5のCanvasを使ってフライトシミュレーターのようなものを作ったことがあります。今回はそのWebGL版です。WebGLはGPUにアクセスしてPCゲーム並みの高度なグラフィックを表現できます。ただし、WebGLのAPIはCanvasのそれと同じように低レベルであるため、ちょっとしたプログラミングをするにもそのままで使用するには苦労します。Three.jsは比較的簡易な記述で、高度な3DCGを制作できるJavaScriptライブラリです。自分はこのライブラリを使ってこのフライトシミュレーターを作りました。動作確認はPC上であり、モバイルはまだ試していませんが、Windows7のChromeとFirefox、Internet11の最新版で問題なく動きました。なお、キーボードで操作するため、モバイルだとブラウザで画面が表示されても操作はできません。

⇒WebGLによる3Dフライトシミュレーション

現段階ではゲームというよりもシミュレーターです。FPS視点で広大な宇宙空間を進むことができます。いくつかのオブジェクトが空間をさまよっていますが、こちらから攻撃を仕かけたり破壊することはできません。また、こちらが攻撃を受けることもないです。まだ飾りのようなものです。

操作の仕方ですが、マウスは使用しません。すべてキーボードからの入力になります。少し硬派というかマニアックな操作系でして、PCゲームでよく使われるWASDのキーがそれぞれ、機体の前後左右運動に対応していて、前後の動きが「W」と「S」に、左右の動きが「A」と「D」に、また上下の動きが「R」と「F」に割り当てられています。次に十字キーですが、これらは機体の旋回運動に割り当てられていて、機首のピッチが上下キーに、ローリング（旋回）が左右のキーに対応しています。また、ヨーイングは「Q」「E」で可能です。

空間がすべて無機質な幾何学図形で構成されているので、3D酔いしやすいと思われ、こういうのが苦手な方は注意してください。空間に無数の黄色い十字の点（ポイントクラウド）が規則的に敷き詰められいて、これらがグリッドを構成しています。また、Three.jsのFog（霧を出す）機能を使って近い点は明るく遠い点は暗く表現し、グリッドとともにプレイヤーが距離感を容易につかめるようにしています。オブジェクトの図形周囲にも色の違うポイントクラウドが配置されていますが、これらのポイントクラウドはすべて同じ大きさです。幾何学図形と自機との距離や大きさを把握する目安になると思います。オブジェクトは一定の動きを繰り返すだけなので、初めのうちはこれらを追っかけて操作に慣れるといいでしょう。ピッチとロール（十字キー）を駆使して操作するといかにも航空機を操縦しているような感覚をもてます。

リンク先はすべてWebGLのビューになるので、「F11」キーで全画面にするといいでしょう。その場合、画面サイズ再計算のためリロードの必要があるかもしれません。PCのスペックによっては、画面左上のFPS計測値が安定しない場合があります。フレームレートは60で安定するのが理想です。フレームレートが30以下になるとカクカクした動きが目立ってきます。もしFPSが不安定な場合はブラウザの不要なタブやキャッシュを消したり、使っていない他のソフトを閉じる、ブラウザの再起動などを試してみてください。