ARFoundation Line Drawing - 01 :: 선 그리기 콘텐츠 만들어보기

Published: Jan 19, 2021 by BeatChoi

ARFoundation을 활용하여 증강현실 선 그리기 콘텐츠를 개발합니다.

ARFoundation을 활용하여 실제 공간에 직접 3차원 콘텐츠를 그려서 배치할 수 있는 콘텐츠를 만들어봅니다.
ARFoundation 환경설정 및 라인 렌더러 포스팅을 참고하면 좋습니다.
개발 환경은 IOS 입니다.

유니티3D 에디터에서

플랫폼 세팅

프로젝트를 생성하고 Build Settings창에서 플랫폼을 IOS로 변경합니다.


<01. 개발 플렛폼 변경>

패키지 설치 :: Package Manager

상단 메뉴에서 Window탭의 Package Manager를 선택합니다.


<02. 패키지 매니저 - 01>

패키지 매니저 창에서 Packages항목을 아래와 같이 Unity Registry로 변경합니다.


<02. 패키지 매니저 - 02>

패키지 매니저 창에서 우측 세팅 버튼을 선택하고 Advanced Project Settings버튼을 클릭합니다.


<03. 패키지 매니저 - 03>

Advanced Project Settings항목에서 Enable Preiview Packages항목을 체크하고 진행합니다.


<04. 프리뷰 패키지 설정>

Package Manager창으로 돌아와서 ARFoundation패키지를 설치합니다. 우측 하단 Install 버튼을 클릭합니다.


<05. ARFoundation 패키지 설치>

Package Manager창으로 돌아와서 ARKit XR Plugin패키지를 설치합니다. 우측 하단 Install 버튼을 클릭합니다.


<06. ARKit XR Plugin 패키지 설치>

계층구조창에서

계층구조창에서 마우스 오른쪽 클릭 XR항목에서 AR Session Origin버튼을 클릭합니다.


<07. AR Session Origin 오브젝트 생성>

계층구조창에서 마우스 오른쪽 클릭 XR항목에서 AR Session버튼을 클릭합니다.


<08. AR Session 오브젝트 생성>

계층구조창에서 Main Camera오브젝트를 제거합니다.


<09. Main Camera 오브젝트 제거>

계층구조창에서 빈 게임 오브젝트를 생성하고 이름을 Drawing으로 변경합니다.


<10. `Drawing` 오브젝트 생성>

스크립트 생성

Drawing이라는 이름의 스크립트를 생성해서 다음과 같이 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Drawing : MonoBehaviour
{
    public Camera cam; 
    public Material defaultMaterial; 

    private LineRenderer curLine;  
    private int positionCount = 2; 
    private Vector3 PrevPos = Vector3.zero; 

    // Update is called once per frame
    void Update()
    {
        DrawMouse();
    }

    void DrawMouse()
    {
        Vector3 mousePos = cam.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, 0.3f));

        if (Input.GetMouseButtonDown(0))
        {
            createLine(mousePos);
        }
        else if (Input.GetMouseButton(0))
        {
            connectLine(mousePos);
        }
    }

    void createLine(Vector3 mousePos)
    {
        positionCount = 2;
        GameObject line = new GameObject("Line");
        LineRenderer lineRend = line.AddComponent<LineRenderer>();

        line.transform.parent = cam.transform;
        line.transform.position = mousePos;

        lineRend.startWidth = 0.01f;
        lineRend.endWidth = 0.01f;
        lineRend.numCornerVertices = 5;
        lineRend.numCapVertices = 5;
        lineRend.material = defaultMaterial;
        lineRend.SetPosition(0, mousePos);
        lineRend.SetPosition(1, mousePos);

        curLine = lineRend;
    }

    void connectLine(Vector3 mousePos)
    {
        if (PrevPos != null && Mathf.Abs(Vector3.Distance(PrevPos, mousePos)) >= 0.001f)
        {
            PrevPos = mousePos;
            positionCount++;
            curLine.positionCount = positionCount;
            curLine.SetPosition(positionCount - 1, mousePos);
        }
    }
}

Drawing스크립트를 Drawing 오브젝트에 인스턴스화 시킵니다.


<11. `Drawing` 스크립트 인스턴스화>

프로젝트 창에서 Material파일을 생성하여 이름을 LineMat으로 지정합니다.
해당 메터리얼 파일의 셰이더를 Unlit/Color로 변경하고 Main Color항목을 흰색으로 설정합니다.


<12. `LineMat` 메터리얼 생성>

계층구조창의 Drawing 오브젝트를 선택하고 Drawing컴포넌트의 Cam , Default Material항목을 각각 AR Camera , LineMat으로 지정합니다.
AR Camera 오브젝트는 AR Session Origin오브젝트 하위에 존재하고 있습니다.


<13. 객체 연결>

빌드 해보기

아래 링크를 참조하여 빌드를 진행합니다.
2. ARFoundation iOS Build

결과물은 아래와 같습니다.



Latest Posts

콘텐츠 개발 기법 - URP 환경에서 Bloom 및 Volume 포함한 화면 캡처
콘텐츠 개발 기법 - URP 환경에서 Bloom 및 Volume 포함한 화면 캡처

화면 캡처 :: Screen Capture

일반적으로 URP환경에서 Bloom 등의 Volume 이펙트들이 함께 캡처되지 않는 현상이 일어납니다.
두가지 원인이 있는데 첫번째는 저장할 Texture 및 Texture2D의 크기가 작아 모든 텍스쳐를 저장할 수 없는 경우와
두번째는 Linear color space의 픽셀을 텍스쳐에 저장 할 수 없는 경우가 있습니다.
이번 포스팅에서는 URP 환경에서 해당 이펙트들을 함께 캡쳐하는 방법을 알아봅니다.

콘텐츠 개발 기법 - UI 안나오게 화면 캡처(Screen Capture without UI)
콘텐츠 개발 기법 - UI 안나오게 화면 캡처(Screen Capture without UI)

화면 캡처 :: Screen Capture

UI 없이 화면을 캡쳐하는 방법을 알아봅니다.
해당 방법을 통해 사진 앱에서 사진을 찍거나 게임 내에서 UI를 제거한 스크린샷을 구현할 수 있습니다.

유니티3D 에디터에서

스크립트 작성

LightshipAR SDK 활용하기 - LightshipAR VPS의 활용
LightshipAR SDK 활용하기 - LightshipAR VPS의 활용

LightshipAR SDK

이번 강좌에서는 Visual Positioning System (VPS) 기능을 활용하여 콘텐츠를 개발해 봅니다.
VPS는 GPS정보와 타겟 매핑 정보를 정합하여 해당 타겟을 인식하는 기능입니다.
따라서 객체나 환경의 변화 및 이동이 잦지 않은 타겟이 스캔 대상이 됩니다.
주로 동상, 건물 입구, 가로등 등 위치의 변경이 없는 타겟들이 좋은 타겟입니다.

해당 타겟들을 인식시키고 주변에 가상의 오브젝트들을 배치하고 해당 위치를 저장하는 방법을 알아봅니다.

공간 매핑

Niantic Wayfarer

공간을 인식시키기 위해서 먼저 공간을 매핑해야 합니다.
이 과정은 IOS 어플리케이션으로 진행을 할 수 있는데 아래 링크에서

  1. Testflight
  2. Wayfarer

어플리케이션을 다운로드 및 설치합니다.

링크 : https://testflight.apple.com/join/VXu1F2jf