トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

ディスプレイを置けるARを作る【ARkit】

メルカリARハッカソン向けの現実的なアイデアをやっと思いついたので作ります。

ディスプレイを表示する

きっかけ

 これを作ろうと思ったきっかけは、モニターやディスプレイの大きさってわかりにくいから。

対角線の長さな上にインチで示されてもわからない><

最近パソコンを買うついでにモニターも買ったんですが、自分の机と用途に合うサイズが全然わからなかった。

最初17インチがなんとなく小さそうだから、17インチで探してたんですが、最終的にブックオフにあった21インチを買いました。これがちょうど良かったので、実物を見るって大事。

Dell ディスプレイ モニター E1715S 17インチ/SXGA/TN非光沢/5ms/VGA,DP/3年間保証
 

でもメルカリとかの通販やネットだと置くまでわからない。ここでARです!

ちゃんとメルカリのCtoCにも沿っているし、自分でも実装できそう。

ただ未来でもないし、面白くもないかも。

しょうがない!何も思いつかなかった。もしくはアイデアはあるけど実装できない奴ばかり><

pen64.com

ag-tec.co.jp

先行事例

類似のアプリとしてokeruARがや家具を置くARアプリがあります。

play.google.com

指定した大きさのものを置くというシンプルなアプリ。

f:id:bibinbaleo:20170825140747p:plainf:id:bibinbaleo:20170825140729p:plain

現在は5種類の形を置ける。

f:id:bibinbaleo:20170825140818p:plainf:id:bibinbaleo:20170825140805p:plain

okeruARはcubeの大きさなどを入力して置けます。

また家具を置くアプリは無数にありますね。

bibinbaleo.hatenablog.com

ただモニターに絞ったものは多分ないし、最終的にはアプリではなく記事組込型のwebARでやりたいなと思います。

今回は多分そこまではできないけど。

環境

ハッカソンでやるのでmacbookairの方に環境を作ります。最近UnityのARkitを触っていないので今どんな環境がいいのかよくわからない。

Requirements:

  • Unity v5.6.2+
  • iOS 11+
  • Xcode 9.x with latest iOS SDK that contains ARKit Framework
  • iOS device that supports ARKit (iPhone 6S or later, iPad (2017) or later)

ARkit-Puluginはこちらからダウンロード 

Unity-Technologies / Unity-ARKit-Plugin / Downloads — Bitbucket

Xcodeがアップデートできなくて困りましたが、一旦元のを消して、OSをHigh sierraにアップデートしたらできろ

モデル

大好きなPolyにいっぱいモニターモデルがあったのでこれの大きさを変えて使いたい。

poly.google.com

poly.google.com

流れとしてはリアルタイムに大きさを変えれたらいなと思います。

あとはタッチしたところにモニターが表示されるだけのデフォルト設計。

bibinbaleo.hatenablog.com

本体がとても大きかったので、モニターが1mになるように設定してから、大きさ1の空のゲームオブジェクトの子オブジェクトにました。

f:id:bibinbaleo:20171213141056p:plain

f:id:bibinbaleo:20171213141100p:plain

そしてARで表示するオブジェクトにはUnity AR Hit Testをつけます。

f:id:bibinbaleo:20171213141103p:plain

サイズ変更UI

スクロールビューでサイズを選択できるようにしたい 

tsubakit1.hateblo.jp

1インチ(型)サイズの時、横幅は2.21cmらしいのでそれを元に入力したあたいから正しいモニターのサイズになるようにスクリプトを書きます。

f:id:bibinbaleo:20171214152832p:plain

こんな感じになりました。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class scale : MonoBehaviour {

    private float a;
    public GameObject tv;
    public Slider slider;
    public Text text;
    // Use this for initialization
    void Start () {
        slider.value = 20f;
    
    }

    // Update is called once per frame
    void Update () {
        a = slider.value;
        text.text = *1 {

 タッチしない奴はRaycast Targetをオフに

f:id:bibinbaleo:20171217173712p:plain

完成

できましたが、ほとんど誰にも見せていません。

f:id:bibinbaleo:20171217213044p:plain

結局当日に別の方と組んで一から新しいのを作りました。

それは東京旅行記事の方で・・・

*1:int)a).ToString()+"";
        float b = a * 2.21f/100;
        tv.transform.localScale = new Vector3(b, b, b);
    }
}

こっち見て!

nn-hokuson.hatenablog.com

        Vector3 p = Camera.main.transform.position;
        p.y = transform.position.y;
        transform.LookAt (p); 

UIの奥をおさない

スライダーを操作しようとすると、その場所にモニターが移動してしまいます。

tsubakit1.hateblo.jp

tyfkda.github.io

こんな感じでsampleのスクリプトに書き込んだらできました。

    if (Input.touchCount > 0 && Input.GetTouch (0).phase == TouchPhase.Began) {
                if (!EventSystem.current.IsPointerOverGameObject (Input.GetTouch (0).fingerId