Javascriptで仮想３次元物理空間を作る！「Cannon.js」とは？
Javascriptでは、HTML5のCANVASとWebGLを使用することで、「3次元物理空間」を作ることができます。
WebGLは、OpenGLお呼ばれるグラフィックAPIのWeb版という位置付けで、OpenGLはデスクトップアプリケーションや組み込み機器などさまざまな分野で活用されています。
Javascriptで3Dグラフィックを表示するために、直接WebGLを実装するのは初心者にはかなり大変なため、「Three.js」というWebGLのラッパーライブラリが幅広く利用されています。
WebGLはグラフィックボードなどに搭載されている「GPU(Graphic Processing Unit)」を使用して描画演算を行うことができるため高速に描画処理を行うことができますが、「VBO（Video Buffer Object）」の扱い方などを覚えなければならないため、学習コストが高くなってしまいます。
そこで、OpenGL初心者でも入門がしやすい「Thress.js」が一般的に利用されているんですね。
3D空間を表現するだけであれば「Three.js」だけで可能なのですが、物理空間を表現する場合は、Javascrptで利用できる「物理計算エンジン」が必要になってきます。
「Three.js」の役割は「グラフィック描画」、「Cannon.js」の役割は「物理計算」なので、処理フローとしては、
- 「Cannon.js」で物体の物理計算を行う。
- 「Three,js」で物体の物理計算結果を描画内容に反映させる。
という流れになります。
実際の利用例がコードを含めて詳しく解説されていましたので、見てみると勉強になると思います。
WebGL自体がまだこれから普及をしていく段階ですので、それほどたくさんのWebサイトに使用されているわけではないのですが、「Webサイトに物理空間を作れる」ことで、今後新しい活用方法が数多く出てくるのではないかと期待しています。
HTML5とjavascriptで「物理世界」を作り、ネットワーク上で他のユーザーと交流できるプラットフォーム作りにチャレンジしてみるのもおもしろいな～と思います(＾＾)
近い将来、Webサイト自体が3次元で作成される日がくるのかもしれません。
「HTML/CSS」学習書籍
「Javascript」学習書籍
