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

roman-tech

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

超お手軽VR開発フレームワーク A-FRAME入門:第6回 コスモ(小宇宙)を感じようpart2

a-frame vr

前回は星の画像のテクスチャを自分を中心とした球面上に貼り付ける作業を行いました。本日は続きの作業を行います。

目的

  • いよいよコスモを感じる

本記事で学べること

  • A-FRAMEのLook-At機能を使って画像のローテーションを制御する

開発編

早速開発にはいりましょう。
まず前回までのおさらいをしましょう。
【前回の記事】

roman-tech.hatenablog.jp

画像を球面上に貼ろうとして以下のように失敗したのでした。

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

まずは自分を取り囲むように星の画像を貼り付ける作業を行います。そこで使うのがA-FRAMEの隠れ玉Look-At機能です。正直公式に置いてあるデモを見ても何に使うのかいまいちピンとこなかったこの機能ですが、ここでは凄まじい威力を発揮します。
簡単にいうとLook-Atは、ターゲットを作成することで各オブジェクトをターゲットの方向に向かせる機能です。今回は、ターゲットを自分のカメラの位置に作成し、すべての星の画像を自分の方に向けるようにします。以下にコードを示します。

[index.html]
<html>
<head>
    <meta charset="utf-8">
    <title>universe</title>
    <script src="../lib/aframe.js"></script>
    <script src="sub.js"></script>
    <script src="Utils.js"></script>
</head>

<body onload="init()">
    <a-scene>
        <a-assets> <img id="star2" src="star2.png"></a-assets>
        <a-camera position="0 0 0"></a-camera>
        <a-sphere id="target" color="#000" radius="0.1"></a-sphere>
        <a-sky color="#000">
    </a-scene>
    </a-scene>
</body>
</html>

以下のコードで座標系の中心(つまり自分の位置)にtargetを作成しています。

<a-sphere id="target" color="#000" radius="0.1"></a-sphere>

次にJavascript側です。

[sub.js]
function genStar(imgName, sizex, sizey, r_max, r_min, num)
{
    var theta1;
    var theta2;
    var radius1;
    var radius2;
    var tmp;
    // generate star
    var scene = document.querySelector('a-scene');
    for (var i = 0; i < num; i++) {    
        theta1 = random(0, 360);
        theta2 = random(0, 360);
        
        var star = document.createElement('a-image');
        star.setAttribute('src', imgName);
        star.setAttribute('width', sizex);
        star.setAttribute('height', sizey);
        star.setAttribute('look-at', '#target');
        
        radius1 = r_min;
        var y = radius1 * Math.sin(deg2rad(theta1));
        radius2 = radius1 * Math.cos(deg2rad(theta1));
        var x = radius2 * Math.cos(deg2rad(theta2));
        var z = radius2 * Math.sin(deg2rad(theta2));
        var str = String(x) + " " + String(y) + " " + String(z);
        star.setAttribute('position', str);
        scene.appendChild(star);
    }
    
}

function setup() {
    genStar('#star2', '50', '50', 700, 1000, 500);
}

function init() {
    setup();
}

以下の箇所で星の画像がtargetの方を向くように設定しています。

star.setAttribute('look-at', '#target');

さぁ結果を見てみましょう!

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

たった2行の追加ですべての画像が私の方を見ています!!!
正直これは凄い。。。A-FRAMEで地味に一番凄い機能だと思いました。画像では分かりにくいため以下にデモをアップしました。

universe

そして見栄えを良くするために以下の対応を行いました。 説明をすると長くなるため、詳細は割愛しますが詳細を知りたい方は説明のための記事を作成するので気軽にコメントください。

  • 星の画像サイズと距離を調整
  • 星の画像のバリエーションを3種類に
  • 単純な乱数(一様乱数)を使うと星の位置に味が無いためパーリンノイズを使用し、ある程度規則を持ったノイズを生成し星の位置を調整する。(パーリンノイズはジェネラティブアートと呼ばれるプログラミング界隈で良く使われる手法です)
  • 背景画像に宇宙っぽいテクスチャを貼る
  • 惑星を幾つか配置する。惑星画像は以下サイトからダウンロードさせていただきました。ありがとうございます。

壁紙宇宙館【フリーCG宇宙画像1000枚以上収録】

さぁ色々調整した結果を見てみましょう!

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

コスモを感じる!!!
中々綺麗な感じに仕上がりましたね!以下にアップロードしましたのでぜひ宇宙に没入してコスモを感じてください!!

http://action-code.xyz/a-frame-project/universe/



二回にわたってお届けしてきました、コスモを感じよう!特集、いかがだったでしょうか。A-FRAMEの力を借りてかなり簡単にコーディングできました。
次はまた新しいテーマに取り組んでみたいと思います!
それでは!

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

© 2016 Tsukasa Horinouchi