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

roman-tech

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

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

a-frame 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開発にオススメです!

超お手軽VR開発フレームワーク A-FRAME入門:第1回

a-frame vr

本シリーズでは最近話題のバーチャルリアリティ開発フレームワークであるA-FRAMEの使い方について記載します。筆者も特に詳しいわけではなくこれから勉強しながら執筆していくので一緒に学んでいきましょう。参考URLは以下の本家サイトです。

aframe.io

本記事で学べること

  • A-FRAMEの概要を知る

  • 基本的な使い方を知る

必要なスキル

軽くhtml5javascriptはかじっておくといいかもしれません。

ただ、結構気軽に開発できるので初心者の人でも言語を学びながらやっていけると思います。

A-FRAME概要

A-FRAMEはwebブラウザ上で動作する3Dとバーチャルリアリティ開発のためのオープンソースフレームワークです。これまで、ブラウザ上で3D空間を表現するにはwegGLという非常に難解なライブラリを使いこなす必要がありハードルが高すぎました。大学でopenGL(1.0)を使っていた僕でさえかなりイミフな部分が多かったです。

しかし、A-FRAMEはwegGLの部分を隠蔽し、ユーザが簡単に3D空間を構築できるように設計されています。しかし、簡単に構築できるということはそれだけできることに制限が出てくると思うので、その辺を見極めながら勉強していきましょう。

実際にどんなことができるの?

上に記載した本家のサイトには多くのサンプルが置いてありますので、それを見てもらうのが一番でしょう。

hello world

Hello World – A-Frame

・・・すごい。html数行でグリグリ動きますね。当然スマホのジャイロにも連動して動きます。

さあ早速開発を始めよう!

開発に必要なもの

  • インターネットに接続可能なパソコン

  • テキストエディタ(これは完全に人の好みですね。テキストエディタ界には様々な派閥があることで知られます。Vimでもemacsでも秀丸でもお好きなものをお使いください。)ちなみに僕はAdobeのフリーエディタbracketsを使っています。 http://brackets.io

  • webGL対応のwebブラウザ(IEはわかりませんがそれ以外なら今は大体どれでも問題ないかと。僕はエディタでbracketsを使っているので連動して動くChromeを使っています。) たったこれだけでVRの開発がはじめられちゃいます!

スマホでみたいよ!って方は別途レンタルサーバなどを用意する必要がありますが)

1.A-FRAMEのダウンロード

まずは本家のURLからA-FRAMEをダウンロードしてきましょう。

<ダウンロード先>

Getting Started – Docs – A-Frame

f:id:roman-tech:20160626203020j:plain

赤枠の部分を右クリックし、「リンク先のファイルをダウンロード」するとA-FRAMEのソースコードがダウンロードできます。なお、①と②の違いは以下です。

ソースコード圧縮版:(ソース名:aframe.min.js)

サイズが小さく、ダウンロード時間が押さえられる。ただし可読性はほぼ無い。

ソースコード未圧縮版(ソース名:aframe.js)

サイズが大きいがソースコードを読むことが可能。また、頑張れば自分の用途に合わせてカスタマイズできる。

機能差はないため、普通の用途であれば①のみダウンロードすれば問題無いでしょう。しかし、ソースコードの中身が気になるなぁって方は②をダウンロードしましょう。このシリーズではソースを改変するかもしれないためあえて②を選択します。

2.ソースを書こう!

ついにお楽しみ!コーディングの時間ですね! その前にディレクトリ構成を決めましょう。 僕は以下のようにして使っています。

【a-frame-project】
     【lib】
          a-frame.js(もしくはaframe.min.js)
     【sample1】   
          index.html
     【sample2】  
          index.html

*)【】はディレクトリ

とりあえず上のような構成のディレクトリを作成し、 まずは¥a-frame-project¥libの中に先ほどダウンロードしてきたaframe.js(またはaframe.min.js)を入れましょう。そしてsample1の下にindex.htmlを作成し以下を記入しましょう。

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Sample1 sphere</title>
    <script src="../lib/aframe.js"></script>
</head>
    <a-scene>
        <a-sphere position="0 2.00 -1" radius="1.25" color="#FE0000"></a-sphere>
    </a-scene>
</body>
</html>

むむっ!なにやら赤い球体が出てきましたね! マウスでグリグリできます。スマホでみた場合、右下のゴーグルアイコンをタップすると2眼のVRモードになり、ジャイロセンサーに連動して画像が動くようになります。

スマホからみたいって方はサーバにアップロードしたので以下URLからご覧ください。

http://action-code.xyz/a-frame-project/sample1-sphere/action-code.xyz

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

因みにa-sphereで記載された中のパラメータの意味は以下の通りです。

position:左から球体を置く場所のx軸上の位置、y軸上の位置、z軸上の位置です。色々値を変えてみてどこに配置されるか試してみるといいと思います。
radius:球体の半径。
color:球体の色。web界ではおなじみの16進数表記です。なお代表的な色は"red","yellow"などでも指定できますが、現状ライティングの設定が反映されないようでのっぺりした絵になるので注意が必要です。

3.応用編

しかしながら球を表示するだけではつまらないので今回はricoh thetaで撮影した360度画像を球体に貼り付けて簡易VRシステムを構築してみましょう。

theta360.com

まずはthetaで撮影した画像を用意しましょう。今回はこの画像を使います。
The 大阪城!!

f:id:roman-tech:20160626225356j:plain:w500

それではコーディングに入りましょう。 まずは画像をindex.htmlと同じディレクトリに入れて、以下のように記載します。 今回は<a-sky>タグを使うのがポイントで、バーチャル空間全体の色を指定したり、画像を指定したりできます。

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sample2 theta</title>
    <script src="../lib/aframe.js"></script>
</head>
    <a-scene>
        <a-sky src="img.jpg" rotation="0 -90 0"></a-sky>
    </a-scene>
</body>
</html>

簡単すぎてワロタ。
自前でWebGL使ってVRシステム作ったことあるけどあの苦労はなんだったんだ。。。
因みに画像を読み込んだりするプログラムはローカル環境では動かないことが多いため、サーバにアップロードして動作確認する必要があります。

以下のURLにアップロードしたのでご確認ください。

http://action-code.xyz/a-frame-project/sample2-theta_image/

ひとまず本日はこの辺で!次は何を試そうかしら。




© 2016 Tsukasa Horinouchi