WebVRで物理演算をつかってみよう

WebVRで物理演算をつかってみよう

最終更新日:2019-10-25

WebVRの世界を作ることを楽しんでいますか?

前回の記事では、A-Frameを利用してVR空間に物体とコントローラーを表示してみました。本記事ではVR空間に作成した物体に当たり判定などの物理法則を適用して、コントローラーでつかんで投げる処理を追加することに挑戦してみます。

もくじ

  1. はじめに
  2. A-Frameのentity-component-system(ECS)
  3. サンプルを実行してみよう
  4. さいごに

はじめに

本記事で利用した検証環境を紹介します。本記事で紹介しているソースコードは、ここで記載している検証環境でのみ動作確認を行っています。

検証環境

  • A-Frame: v0.9.2
  • Oculus Quest: 377480.16500.0
  • ブラウザ: Oculus Qusest内蔵ブラウザ

検証ソースコード

検証で利用したソースコードはGit Hubにて公開をしています。

A-Frameのentity-component-system(ECS)

A-Frameには物理演算のシステムは組み込まれていないので、そのままでは物体に当たり判定などの処理を追加することはできません。でも安心してください。A-Frameはthree.jsフレームワークのentity-component-system(ECS)アーキテクチャの仕組みにより、簡単かつ柔軟に機能の追加を行うことができます。 entity-component-systemは、おもに3Dやゲームの開発で使われるデザインパターンの一つです。

  • Entity:エンティティは、この世界におけるすべてのオブジェクト(物)を表しています。エンティティにコンポーネントを追加していくことでエンティティに意味づけをしていきます。コンポーネントを持たないエンティティは何も表現をしません。なにもない空の状態を想像するとイメージをしやすいでしょう。A-Frameでは<a-entity>エレメントとプロパティでエンティティを利用します。
  • Component:コンポーネントはエンティティに意味づけをするデータです。コンポーネントによって、それぞれのエンティティに特徴を与えて、オブジェクトの定義をします。プラグ&プレイのように機能を追加していくことをイメージすると理解しやすいでしょう。A-Frameでは<a-entity>の属性としてコンポーネントを利用します。
  • System:システムは世界の仕組みを管理します。世界の仕組みはコンポーネントに影響を与えることがあります。例えば、世界の仕組みとして物理法則を実装した場合、重力の影響などでコンポーネントのデータが変化をするかもしれません。A-Frameでは<a-scene>の属性としてシステムを利用します。

本記事ではA-Frameに物理演算を追加する方法として、Physics for A-Frame VRを利用します。コンポーネントに子リジョンを追加、システムに物理法則を追加することで、つかんだり投げたりできるオブジェクト(エンティティ)を定義していきます。

サンプルを実行してみよう

それではPhysics for A-Frame VRのGit Hubページにあるサンプルを実行して、物理演算の世界を体験してみましょう。
サンプルにはA-FrameやPhysics for A-Frame VRの読み込み部分が省かれているので追加します。ついでにわかりやすくするために、オブジェクトの位置や色も変更しておきます。

<html>  
<head>
  <script src="https://aframe.io/releases/0.9.2/aframe.min.js"</script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
</head>   

<body>         
  <a-scene physics="debug: true">
    <!-- Camera -->
    <a-camera position="0 2 6"></a-camera>
    <!-- Floor -->
    <a-plane static-body rotation="-90 0 0" width="10" height="10" color="gray"></a-plane>
    <!-- Immovable box -->
    <a-box static-body position="0 5 0" width="5" height="1" depth="1" color="yellow"></a-box>
    <!-- Dynamic box -->
    <a-box dynamic-body position="0 5 3" width="1" height="1" depth="1" color="blue"></a-box>
  </a-scene>
</body>
</html> 

上記のソースコードは以下のURLでも公開をしています。Webサーバー等を準備できない場合などに利用してください。

https://skyarchfantasylaboratory.github.io/a-frame-test/002-PhysicsBasic/physicsBasic01.html

短縮URL:https://bit.ly/2IwsT3N

VRヘッドセットもしくはPCのブラウザからアクセスしてみましょう。static-bodyを設定した黄色いボックスは空中にとどまっていますが、dyamic-bodyを設定した青いボックスは物理法則にしたがって、空中から落ちてきましたね。

このサンプルでは物理ボディの形をわかりやすくするために、<a-scene>physics="debug: true"を設定しています。この設定をtrueにすることで、物理ボディの周りが赤いワイヤーフレームで囲われて、物理ボディの形状がわかりやすくなります。

さいごに

本記事ではentity-component-systemの概要とA-Frameに物理演算を追加する方法を紹介しました。A-Frameはentity-component-systemアーキテクチャを採用しているので、コンポーネントを追加していくことでエンティティの特徴を変えることができます。ほかにもアニメーションやパーティクルなどのコンポーネントがunpkgなどで公開されています。パーティクルなどは見ているだけでも楽しいので、いろいろと実験をしていきたいですね。

空想プロジェクトカテゴリの最新記事