WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

Three.jsでフライトシミュレーションに再挑戦

   

半年ぶりの投稿になります。自分で企画しているRPGゲームが全然進展しないので、これまで苦手意識を持っていた3Dグラフィックについて少し勉強しました。といっても、Three.jsのですが。このライブラリの入門書がオライリー社から出ていて、それも今年の出版であるので最新情報を得ようと手に入れてみました。ネットの情報だけに頼ろうとするとWeb技術関連は圧倒的に英語コンテンツが多いので、自分のように英語がわからない場合おのずと出回っている書籍に頼るのが早道になります。Three.jsはWebGLをJavaScriptで簡易に実装できるライブラリです。

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

遠い昔Canvasで宇宙空間のフライトシミュレーションを試したことがあり、今回作成したのはそれのWebGLによる焼き直しというわけですが、WebGLはもとより3DCGに特化したAPIだけに3Dの表現能力が格段にすぐれていて、それでいてGPUを経由したグラフィック描画により思ったよりPCに負荷を与えない、モダンブラウザでサクサク動く、環境はいいこと尽くめです。

ブラウザ全画面で試せること、グリッドのパーティクル数を数万単位にできることなど、試作段階ではあるもののかなりスケールの大きいものになりました。今後はシューティングゲーム的な方向に発展させていこうと思っています。もしくはJavaScriptファイル等、フリーライセンスで考えているので、ダウンロードしてカスタムして楽しんでもらっても結構です。

以下のサイトでフライトシミュレーションができます。なお、モバイルは操作が不可なのでPCでご覧ください。最新のモダンブラウザであれば問題なく動くと思います。

Three.js/WebGLで動く宇宙フライトシミュレーション!

WebGLのフライトシミュレーション

レ○エルを追跡中……攻撃はまだ現在のバージョンに実装されていない

 - JavaScript/Ajax, ゲーム , ,