わずか数十行のコードで物理演算付きシーンを構築できる WebGL フレームワーク WhitestormJS

three.js をさらにラップしたフレームワーク

今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。

Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。

物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。

使いやすさを重視した設計、ドキュメントも完備

この WhitestormJS ですが、実は結構昔からその存在は知っていました。

ちょっと前に見た時は、一見すると開発が止まっているのかなと感じさせるようなところもあったのですが、久しぶりに見てみたらかなり別物になってますね。

three.js による 3D レンダリングと、physi.js という物理演算ライブラリを内包した設計になっており、JSON を記述するような感じでパラメータを設定するだけで、簡単に物理演算付きのシーンが出来上がってしまいます。

さっと、とにかく手軽に作りたいんだというケースでは、かなり便利なんじゃないでしょうか。

一見するとわかりませんが、ティーポットの下に実は丸いオブジェクトが挟まっていて、ティーポットは物理演算によって少し傾いています。

開発のしやすさを重視した機能も含まれており、個人的に感心したのはデバッグ用のモードがあることですかね。

デバッグ用のモードでは法線をラインで描いて可視化して見せることができるようになっており、こういった機能は実は地味に便利だったりしますよね。

他にも、オンラインでコードが記述できるエディタが用意されていたり、かなり 3D 初心者にも、勉強しながら継続して開発が行えるような配慮がされているなと感じました。

公式サイトのほうがそのままドキュメントになっており、画面の左側にあるリンクをクリックするだけで、簡単にドキュメントを流し読みすることもできるようになっています。

three.js がもともと備えているモデルデータの生成などの機能はそのままに、それをさらに拡張したような感じです。

実際にサイトに訪れてサンプルコードを見ていただければ一目瞭然かと思いますが、驚くほどコードの記述量は少ないです。

ハイパフォーマンスな細かい部分での調整は性質的にも難しくなると思いますが、手っ取り早く簡単に、かつ物理演算とかも使ってみたい、という意図であればかなり有力な選択肢になるんじゃないでしょうか。

小さい玉の重さでへこんだソフトなジオメトリ。

ゲーム開発などにも利用してもらうことを目指しているようで、カメラをいわゆる FPS 風の視線で動かすモードなど、ビジュアル以外の部分の機能も備えています。

WASD キーでキャラクターが実際に移動しているように見えるサンプルデモが公式サイトにありますが、画面には映らないキャラクター自身にも物理演算が掛かっていて、斜面では勝手に滑り落ちていく挙動になるなど、ちょっと手が混んだ感じになっています。

Github のほうには GIF 画像のアニメーションで、まったくゼロの状態から物理演算でスフィアが下に落ちていくところまでを記述した、コード記述の様子を撮影した動画が貼ってあります。

これを見ると、恐らく「これなら 3D 未経験でもなんとかなっちゃいそうだな」と感じると思います。それくらい、直感的で簡単に記述が行えるようになっています。

個人的には、3D 開発は基礎がものを言う世界だとは思っていますが、世の中の全ての人に、潤沢な時間とモチベーションがあるわけではないでしょう。こういったフレームワークの存在が、誰かの助けになることもきっとあるのではないかなと感じさせられました。

WebGL や 3D の開発は、ウェブを中心に活動してきたエンジニアからすると、異常に難しいものに見えると思います。

そんなときに、まずはこういった手厚いフレームワークを利用することから始めていき、徐々に、少しずつでも、3D 開発に対するモチベーションを上げていく……これはけして悪くないフローだなと思っています。

WhitestormJS は、描画部分を three.js ベースで作っているため、このフレームワークに限界を感じたそのときは、three.js のみでの記述を行うという場合でも、基本的な考え方や流れなどをイメージしやすくなると想像できます。

いきなりフルスクラッチで WebGL 書くというのはちょっと……という方も、まずはこういったフレームワークを活用しつつ、3D に慣れてみるといいかもしれません。

ドキュメントも整備されており、すぐに使いはじめることができると思います。また Babel に対応しているなど、最近のウェブのトレンドにも一部対応しているところなどが見受けられますね。

興味のある方は、ぜひ一度サイトを覗いてみてください。

初学者には単純にツールのひとつとして、中級者には自身の実装の参考に、なにかと刺激があるように思います。

ぜひチェックしてみてください。

リンク：

WhitestormJS Documentation (API Reference)

WhitestormJS/whitestorm.js: Framework for developing 3D web apps with physics.