Google의 AR 기술 Tango + Unity로 AR 공간을 바르는 앱, 「RAKUGAKI」의 소개

15367 단어 아 RTangogoogleUnity

개념



「비밀 도구」와 같은 앱을 만들고 싶다. 그런 생각으로부터 4명으로 팀을 짜 이 어플은 개발되었습니다. 스프레이 캔을 이미지하고, 단말을 흔들면 바삭바삭한 소리가 울리고, 거기에 더해 스프레이의 분사음도 재현했습니다.

제목 디자인 : 토미기 씨

Tango에 대해 가볍게 소개



Google의 AR(증강 현실) 기술로 모션 트래킹(Motion Tracking), 영역 학습(Area Learning), 깊이 검출(Depth Perception) 등의 기능을 가지고 공간 정보를 보다 상세하게 얻을 수 있는 것입니다. . 자세한 기사는 그 밖에도 있으므로 조사해 보면 좋을지도 모릅니다.

준비



Tango Unity SDK를 다운로드합니다. 사전에 Unity가 없는 경우에는 설치해야 합니다. 그리고는 package 형식이므로 Unity를 기동해 import 하면 보통으로 구현할 때에는 사용할 수 있습니다. 빌드 시에는 또 설정이 필요합니다만 이번은 생략합니다.

앱의 작동 방식에 대한 간략한 설명



・Tango의 모션 트래킹 기능을 사용해 단말의 진동을 검출해, 그러므로 카라카라 소리를 울리게 한다.
・Unity에서 AR공간에 대해 색(가변식)이 붙은 다이나믹 메쉬를 생성하는 것으로 공간에 색을 칠할 수 있다.

이 다이나믹 메쉬의 생성입니다만, Tango측에서 초기화가 걸려, 색을 칠한 부분이 곧 사라져 버리는 것을 어떻게 하는 것이 힘들었다고, 팀의 담당의 사람이 말하고 있어 해결한다 기술력에 굉장함을 느꼈습니다. 은 주로 GUI의 구조를 설계한 코더였으므로 머리가 내려갑니다.

구현



기사를 읽고 있는 여러분이 신경이 쓰이는 색을 바르는 곳의 구현을 발췌해 보았습니다
구현자 : 우지마루씨
· 다이나믹 메쉬 생성
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class Paint : MonoBehaviour {

    public enum SprayColor { //色の種類を列挙
        Yellow,
        Red,
        Pink,
        Green,
        Blue
    }

    public Text debugText;
    public Material material;

    SprayColor paintColor = SprayColor.Yellow; //今回は最初の色を黄色に設定しました
    Color[] paintColors = { //配列で色の種類を定義
        Color.yellow,
        Color.red,
        Color.magenta,
        Color.green,
        Color.blue
    };

    Dictionary<string, GameObject> meshObjects = new Dictionary<string, GameObject>();

    public void Painting(int num) { //cameraからrayを飛ばしていく感じ
        var cam = Camera.main;
        RaycastHit hit;
        for (var i = 0; i < num; i++) {
            var rand = cam.transform.TransformDirection(Random.insideUnitCircle) * 0.05f;
            var dir = cam.transform.forward + rand;
            if (Physics.Raycast(cam.transform.position, dir, out hit)) {
                var meshCollider = hit.collider as MeshCollider;
                if (!meshCollider || !meshCollider.sharedMesh) return;
                PaintMesh(meshCollider, hit.triangleIndex);
            }
        }
    }

    void PaintMesh(MeshCollider collider, int triangleIndex) { //ダイナミックメッシュ生成部分
        var name = collider.gameObject.name;
        if (!meshObjects.ContainsKey(name)) {
            var obj = collider.gameObject;
            var newObj = Instantiate(obj, obj.transform.position, obj.transform.rotation);
            meshObjects[name] = newObj;
            var instanceMesh = Instantiate(collider.sharedMesh);
            meshObjects[name].GetComponent<MeshRenderer>().material = material;   
            meshObjects[name].GetComponent<MeshFilter>().sharedMesh = instanceMesh;
            Destroy(meshObjects[name].GetComponent<MeshCollider>());
        }
        var mesh = meshObjects[name].GetComponent<MeshFilter>().sharedMesh;
        var vert = mesh.vertices;
        var triangle = mesh.triangles;
        var colors = mesh.colors;
        if (colors.Length <= 0) {
            colors = (new Color[vert.Length]).Select(x => Color.white).ToArray();
        }
        colors[triangle[triangleIndex * 3 + 0]] = paintColors[(int)paintColor];
        colors[triangle[triangleIndex * 3 + 1]] = paintColors[(int)paintColor];
        colors[triangle[triangleIndex * 3 + 2]] = paintColors[(int)paintColor];
        mesh.colors = colors;
    }

    public void ChangeColor(int col) { //色の変更をする関数
        paintColor = (SprayColor)System.Enum.ToObject(typeof(SprayColor), col);
    }
}

이런 느낌입니다. 코드 설명은 또한 편집에서 추가하려고합니다.

데모




이미지는 Mizutori씨 제공

이번 개발에 대해 가볍게 감상



팀에서 한 것은 이번이 처음입니다만, 여러 명의 번쩍임에 의해 앱이 만들어 가는 감각이 즐거웠습니다. 또한 이러한 기회를 둘러볼 수 있기를 바랍니다. (왠지 여기만 블로그 같아져 버린 생각이...)

끝까지 읽어 주셔서 감사합니다.

좋은 웹페이지 즐겨찾기