読者です 読者をやめる 読者になる 読者になる

roman-tech

テクノロジーはロマンだ。

超お手軽VR開発フレームワーク A-FRAME入門:第2回 簡単なVR空間を作ってみよう

前回はA-FRAMEで一体どんなことができるのか、概要について述べ簡単なサンプルを作成しました。今回は簡単なVR空間を構成するための基本的な知識について学びたいと思います。

目的

  • テクスチャとオブジェクトを表示し簡単なVR空間を構成する

本記事で学べること

  • シーンへの画像の貼り方を学ぶ
  • フォグの使い方を学ぶ
  • daeモデルの表示方法を学ぶ

開発編

画像をVR空間内に配置する

まずはVR空間内に配置したい画像を用意しましょう。今回はなんとなくサイバー感漂うハニカム構造の画像を使いたいと思います。透過処理を入れたいため、画像フォーマットはpngにしました。

f:id:roman-tech:20160701120833p:plain:w300

この画像を床としてVR空間内に貼り付けます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample3</title>
    <script src="../lib/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
          <img id="tile" src="tile.png">
      </a-assets>
        <a-camera position="0 3 0"></a-camera>
        <a-image src="#tile" rotation="90 0 0" scale="50 50 50" position="0 0 0"></a-image>
    <a-sky color="#000"></a-sky>
    </a-scene>
  </body>
</html>

【処理概要】

<img id="tile" src="tile.png">

画像を読み込んできてid名をtileとします。
ちなみに上記記述はa-assetsタグの中に入っています。a-assetsタグの中に記載したリソース(画像、音、3Dモデルなど)は事前に読み込まれるため、実際に表示する際の遅延を軽減します。リソースのロードはa-assetsタグの中で行うのが良いでしょう。

<a-camera position="0 3 0"></a-camera>

カメラの位置座標をx:0, y:3, z:0に設定します。この辺は実際に表示してみて自分のイメージに近い値にチューニングするといいです

<a-image src="#tile" rotation="90 0 0" scale="50 50 50" position="0 0 0"></a-image>

画像を貼り付けます。ここではidで画像を指定し、回転角度(rotation)、スケーリング(scale)、位置を指定できます(position)。 rotation="90 0 0"としているのはデフォルトだと画像が直立に表示されるためx軸周りに90度回転させることで床のように見せます。

<a-sky color="#000"></a-sky>

空間全体の色です。今回は黒としました。

f:id:roman-tech:20160701122224j:plain:w300

以下にサンプルをアップロードしました。
sample2-1
おおー!サイバーな床っぽく見えますね。
しかし、床の画像は無限に続くわけではないので、床が奥の方で途切れてしまい、明らかに画像貼ってるだろ!ってのが見え見えです。
そこで、遠くの方をぼかすテクニックであるフォグ(霧)を使って違和感をなくします。

フォグの設定をする

a-sceneタグを以下のように書き換えます。

<a-scene fog="type: linear; color: #000; far: 25; near: 0">

colorはフォグの色、nearとfarはフォグが適用される位置を示しており、この場合だと距離0から距離25までの間にフォグを発生させ、25に近づくに従ってだんだんcolorで設定した色が濃くなっていきます。

f:id:roman-tech:20160701124423j:plain:w300

以下にサンプルをアップロードしました。
sample2-2

先ほどとの違いがわかるでしょうか?遠くの方の違和感が軽減されています。

3Dモデル(.dae)を配置する

なんとなくいい感じにになってきたので、最後に3Dモデルを配置します。今回配置するのは、、、


ジュウシマツ!!

f:id:roman-tech:20160701124847p:plain:w300

10年ほど前、あまりに暇だったのでメタセコを駆使してなぜか作ってしまったジュウシマツがPCの奥底に眠っていました。ちなみに試用版メタセコでモデルを作成すると.mqoでしか出力できないため、blenderを使ってdaeに変換しました。
さあ、さっそく配置してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample3</title>
    <script src="../lib/aframe.js"></script>
  </head>
  <body>
    <a-scene fog="type: linear; color: #000; far: 25; near: 0">
      <a-assets>
          <img id="tile" src="tile.png">
            <a-asset-item id="jyushimatsu" src="jyushimatsu1.dae">
      </a-assets>
        <a-camera position="0 3 0"></a-camera>
        <a-image src="#tile" rotation="90 0 0" scale="50 50 50" position="0 0 0"></a-image>
        <a-entity id="jyushimatsu-team" scale="1 1 1">
          <a-collada-model src="#jyushimatsu" rotation="0 -90 0"  position="0 3 -10"></a-collada-model>
          <a-collada-model src="#jyushimatsu" rotation="0 -180 0" position="10 3   0"></a-collada-model>
          <a-collada-model src="#jyushimatsu" rotation="0 90 0" position="0 3 10"></a-collada-model>
          <a-collada-model src="#jyushimatsu" rotation="0 0 0" position="-10 3   0"></a-collada-model>
        </a-entity>
    <a-sky color="#000"></a-sky>
    </a-scene>
  </body>
</html>

【処理概要】

<a-asset-item id="jyushimatsu" src="jyushimatsu1.dae">

ジュウシマツの3Dモデルを読み込みます。

<a-collada-model src="#jyushimatsu" rotation="0 -90 0"  position="0 3 -10"></a-collada-model>

適当に回転や位置を決めて配置します。ここで上記記述はa-entityタグで囲まれています。a-entityタグは中に記載したものをグルーピングする機能を持ちます。ここではscaleプロパティで指定できるモデルのサイズを一括で変更できるようにa-entityタグで4つのモデルをグルーピングしました。

そして表示!簡単すぎる!

f:id:roman-tech:20160701125723j:plain:w300


以下にサンプルをアップロードしましたのでジュウシマツとしばし戯れてください。
sample2-3



いかがでしたでしょうか?簡単なVR空間であれば即座に構築することができます。ぜひみなさんもお試しあれ!



以下VR開発にオススメです!

© 2016 Tsukasa Horinouchi