(Unity) 360도 영상을 플레이 해보자! - Sphere Object

안녕하세요!

오늘은 저번 Panoramic 방식이 아닌 다른 방식을 사용해서

360도 영상을 플레이 해보도록 하겠습니다!

스크립트나 쉐이더의 변경 없이 적용했던 Panoramic 방식과는 다르게

Sphere Object방식을 사용하려면 최소한 둘 중 하나는 수정을 해야합니다!

두가지 방법 모두 소개 해드릴테니 잘 따라와 주세요!

Panoramic 방식 은 여기 있습니다!

 

Sphere 방식 특징

Sphere 방식은 다음과 같습니다.

Sphere 오브젝트가 있고 그 안에 카메라 오브젝트를 위치 시킨뒤

360도 영상을 Sphere 오브젝트에 띄우는 것이죠!

하지만 유니티에서는 최적화기법 중 하나인 Culling 을 사용 하는데요.

Culling은 보이지 않는 오브젝트의 뒷면을 그리지 않아서 퍼포먼스를 높이는 최적화 기법입니다.

Sphere 오브젝트도 이 Culling 기법이 적용되어 있어서 

그냥 Sphere 오브젝트 안에 카메라를 위치시키면 아무것도 볼 수 없을겁니다.

아래 방법을 통해 그 문제점을 2가지 방식으로 해결해 보도록 하겠습니다.

 

준비물

유니티 버전은 2019.3.9f1을 사용하여 테스트 하였습니다.

아래 링크를 통해 360도 영상을 받아주세요.

물론 이미 360도 영상이 있으시다면 건너뛰셔도 됩니다!

vimeo.com/214402865

 

기본 준비

우선 새로운 씬을 하나 생성해주세요! 

그 다음 그 씬에서 Sphere 오브젝트를 생성한 뒤 Video Player 컴포넌트를 추가해 줍시다.

그리고 가지고 있는 360도 영상을 추가해주신 뒤

Renderer 에 Shpere 오브젝트가 잘 들어있는지 확인 해 주세요!

자 이제 기본 준비는 끝났습니다! 

 

1. 스크립트 추가 방식

스크립트 추가 방식에 대해서 설명해 드릴게요.

우선 메쉬(Mesh)에 대해 간단히 설명해야 하는데

간단히 설명하자면 오브젝트의 모양을 그릴 때 

점을 찍고 그 점 3개를 이어 면을 만들고(삼각형모양 - 폴리곤)

그걸 이어 붙여서 만들어진게 메쉬 라는 것이죠.

그리고 아래에 있는 스크립트는 그 폴리곤을 뒤집는 기능을 합니다.

바깥에서 구를 바라보는 방향으로 폴리곤을 구성하는게 아니라

안쪽에서 구를 바라보는 방향으로 폴리곤을 구성하도록요!

 

스크립트 생성

아래의 스크립트를 복사 붙여넣기로 생성해주세요!

using UnityEngine;
public class InvertNormals : MonoBehaviour
{
    void Start()
    {
        Mesh mesh = this.GetComponent<MeshFilter>().mesh;
        Vector3[] normals = mesh.normals;
        for (int i = 0; i < normals.Length; i++)
            normals[i] = -1 * normals[i];
        mesh.normals = normals;
        for (int i = 0; i < mesh.subMeshCount; i++)
        {
            int[] tris = mesh.GetTriangles(i);
            for (int j = 0; j < tris.Length; j += 3)
            {
                //swap order of tri vertices
                int temp = tris[j];
                tris[j] = tris[j + 1];
                tris[j + 1] = temp;
            }
            mesh.SetTriangles(tris, i);
        }
    }
}

 

머테리얼 추가

다음으로 머테리얼을 하나 생성해 주신 뒤 

쉐이더를 Unlit -> Texture 로 바꿔주세요

Unlit는 빛의 영향을 받지는 않는 쉐이더 입니다!

 

값 적용

스피어 오브젝트의 Scale 을 100 100 100 으로 조정해 주시고

생성한 머테리얼과 스크립트를 적용해준 다음

플레이 버튼을 누르시면 영상이 잘 재생 되는 것을 확인 할 수 있습니다!

 

2. 쉐이더 추가 방식

다음으로 쉐이더 추가 방식에 대해서 알려드릴게요.

아까 위에 Sphere 방식 특징을 설명할 때 Culling 에 대해서 말씀드렸는데요.

쉐이더 추가 방식은 바로 그 Culling을 끄는 방법입니다.

스크립트 추가 방식이 구 바깥쪽의 면을 안쪽에서 볼 수 있게 바꿔주는 방법이었다면

쉐이더 방식은 바깥쪽에서 구를 볼수도 있고

안쪽에서도 구를 볼수 있게 하는 방법입니다.

안쪽과 바깥쪽 2 방향에서 볼 수 있도록 계속 그리고 있기 때문에 사실 퍼포먼스 적으로 그다지 좋은 방법은 아닌거죠!

 

쉐이더 생성

아래의 쉐이더를 복사 붙여넣기로 생성해 주세요.

Shader "Flip Normals" {
    Properties{
        _MainTex("Base (RGB)", 2D) = "white" {}
    }
        SubShader{

            Tags { "RenderType" = "Opaque" }

            Cull Off

            CGPROGRAM
            #pragma surface surf NoLighting

            #pragma surface surf Lambert vertex:vert
            sampler2D _MainTex;

            struct Input {
                float2 uv_MainTex;
                float4 color : COLOR;
            };

            void vert(inout appdata_full v) {
                v.normal.xyz = v.normal * -1;
            }

            void surf(Input IN, inout SurfaceOutput o) {
                 fixed3 result = tex2D(_MainTex, IN.uv_MainTex);
                 o.Albedo = result.rgb;
                 o.Alpha = 1;
            }

            fixed4 LightingNoLighting(SurfaceOutput s, fixed3 lightDir, fixed atten) {
                fixed4 c;
                c.rgb = s.Albedo;
                c.a = s.Alpha;
                return c;
            }
            ENDCG
    }
        Fallback "Diffuse"
}

 

머테리얼 추가

머테리얼을 하나 생성해 주신 뒤 

방금 전 생성한 쉐이더를 드래그 해서 넣어주던지

쉐이더를 직접 변경해주세요!

 

값 적용

스크립트 적용 방식과 동일하게

스피어 오브젝트의 Scale 을 100 100 100 으로 조정해 주시고

생성한 머테리얼을 적용하시면 됩니다!

 

자 이렇게 Sphere 오브젝트를 사용해서 360도 영상을 플레이 하는 방법에 대해서 알아 보았습니다.

개인적으로 Sphere 오브젝트를 활용하기보다는

스크립트나 쉐이더 추가 없는 Panoramic 방법을 선호하는 편이긴 합니다만

상황에 따라 필요한 방법이 다르니까요! ㅎㅎ

감사합니다!

 

아래 VR 기기를 적용 하는 방법도 링크 걸어두겠습니다!

(Unity) 유니티 VR 적용 방법

(Unity) 360도 영상을 플레이 해보자! - Panoramic 360