프로그래머를 위한 360VR로드뷰 , 유튜브 360 도 동영상 기반 기술 습득 !

Table of Contents- 360VR 소개- Equirectangular 뷰어 만들기- Equirectangular 스샷 찍기 구현하기- 기타 등등

360VR/Photo Sphere 이란 ? 상하좌우앞뒤 원하는 방향으로 돌리면서 볼 수 있는사진 , 동영상

360VR 동영상 유튜브에서 검색하면 나옵니다https://www.youtube.com/results?search_query=360vr

Google street view

“Photo Sphere” 앱으로 찍은 원본 jpg

위

아래앞좌 우뒤 뒤

Equirectangular projection이퀴렉탱귤러 / 등장방형도법 [ 等長方形圖法 ]

“ ” 구 를 2:1 비율 직사각형으로 펼친 것입니다

Equirectangular projection 특징 (1)

Equirectangular projection 특징 (2) 극으로 갈수록

X 방향으로 점차 확대

Y 방향 측척은 항상 동일

DX11 과 HLSL 로 구현합니다Equirectangular 뷰어 만들기 !

큐브맵으로 하늘을 그리는 픽셀 쉐이더float4 mainPS(VsToPs inp) : SV_Target{

float3 dir = normalize(mul(inp.screenPos, invVP).xyz);

return texCube.Sample(samplerState, dir);}

< 기본 흐름 >1. 픽셀이 보는 방향을 구하기 (dir)2. 큐브맵에서 dir 로 샘플링하기

dir 는 3 차원 벡터 !

시선 방향 3 차원 벡터 구하는 법float4 mainPS(VsToPs inp) : SV_Target{

float3 dir = normalize(mul(inp.screenPos, invVP).xyz);

return texCube.Sample(samplerState, dir);}screenPos 에 invVP 를 곱하면 dir 완성 !카메로 방향과 화각이 반영됩니다invVP 는 View 행열과 Projection 행열을 곱해서역행열을 구한 것View 는 카메라 방향 !Projection 은 카메라 화각 ! screenPos 는 x 와 y각각 -1 ~ 1 범위

Equirectangular 로 하늘 그리기float4 mainPS(VsToPs inp) : SV_Target{

float3 dir = normalize(mul(inp.pos2, invVP).xyz);

float longitude = atan2(dir.x, dir.z) * (180 / 3.14159265f);float latitude = asin(dir.y) * (180 / 3.14159265f);return gTexture.Sample(samplerState,float2(longitude, latitude) / float2(360, -180) + 0.5);

}

픽셀이 보는 방향을 구하기 (dir) ... 는 큐브맵과 같습니다 .dir(3 차원 벡터 ) 로부터 2D 텍스쳐 좌표를 구해야 합니다… <- ???

뭘 하는지 아주 직관적으로 이해하기

● 경도 0, 북위 0 (0, 0) 시선 (0, 0, 1) 가나 공화국 남쪽 적도 지점● 경도 0, 복위 45 (0, 0.5) 시선 (0, 0.7071, 0.7071) 프란스 보르도● 서경 90, 복위 45 (-0.5, 0.5) 시선 (-0.7071, 0.7071, 0) 미국 위스콘신주 ( 오대호 )...

https://commons.wikimedia.org/wiki/File:Equirectangular-projection.jpgWikipedia 에 있는 세계지도로 텍스쳐를 만들면 디버깅까지 직관적 !!

위도 / 경도 구하기float4 mainPS(VsToPs inp) : SV_Target{

float3 dir = normalize(mul(inp.pos2, invVP).xyz);

float longitude = atan2(dir.x, dir.z) * (180 / 3.14159265f);float latitude = asin(dir.y) * (180 / 3.14159265f);return gTexture.Sample(samplerState,float2(longitude, latitude) / float2(360, -180) + 0.5);}

longitude 는 경도이며 , 카메라 좌우 회전 !latitude 는 위도이며 , 카메라 상하 회전 !삼각함수를 쓰면 됩니다

텍스쳐 좌표계로 변환float4 mainPS(VsToPs inp) : SV_Target{

float3 dir = normalize(mul(inp.pos2, invVP).xyz);

float longitude = atan2(dir.x, dir.z) * (180 / 3.14159265f);float latitude = asin(dir.y) * (180 / 3.14159265f);return gTexture.Sample(samplerState,float2(longitude, latitude) / float2(360, -180) + 0.5);}

경도는 -180~180위도는 -90~90텍스쳐 좌표는 0~1

Equirectangular 로 스샷 찍기 구현하기

Equirectangular 로 스샷 찍기 이것 엔진으로 지원하면 바로 360VR 동영상을 찍을 수 있게 된다 !

1 패스로는 불가능 ( 직선을 곡선으로 왜곡시킬수없어서 )1. 큐브맵으로 렌더링하기2. 시선 벤터를 역으로 구해서 큐브맵 샘플링

1. 큐브맵으로 렌더링하기“Dynamic Cube Map” 로 검색하면 나옵니다

화각 90 도 , aspect ratio=1.0 로 상하좌우앞뒤 6 방향 촬영

cube map 를 Equirectangular 로 변환float4 mainPS(VsToPs inp) : SV_Target{

float3 dir;float lonR = inp.screenPos.x * 3.14159265f;float latR = inp.screenPos.y * 3.14159265f / 2;dir.x = cos(latR) * sin(lonR);dir.z = cos(latR) * cos(lonR);dir.y = sin(latR);return texCube.Sample(samplerState, dir);

}경도 / 위도를 라디안으로 표현 (lonR/latR)http://stackoverflow.com/questions/11504584/cubic-to-equirectangular-projection-algorithm 보고 만들었습니다 .

기타 등등

Stereographic ProjectionLittle Planet / Tiny Planet 이란 이름으로 알려진 투영법360 도 사진을 소스로 그립니다float4 mainPS(VsToPs inp) : SV_Target{

float2 scale = float2(4.0f / 3.0f, 1) * 3; // scale & aspect ratiofloat2 plane = inp.screenPos.xy * scale;

float3 dir = float3(plane.x * 2, plane.y * 2, -1 + dot(plane, plane))/ (1 + dot(plane, plane));return texCube.Sample(samplerState, dir.xzy); // y is upper;

swap y & z}https://en.wikipedia.org/wiki/Stereographic_projection

Sphere map 이것 역시 360 도 사진의 일종

image stitching● 카메라간 경계를 완벽하게 제거할 수 없다 ( 실제세계 , CG 이면 가능 )● 방향마다 밝기가 다르다

최대한 경계를 없애기 위해 노력해 보는 방식“ image stitching”http://www.cs.bath.ac.uk/brown/autostitch/autostitch.html

Meta data 에 대해서 “유튜브에 올릴 때 360 Video Metadata” “가 들어 있어야 360 ” 도 동영상 으로인식됩니다 .

https://support.google.com/youtube/answer/6178631?hl=ko

사진 (jpg) “에 Photo Sphere XMP Metadata” 가 있어야 구글 서비스에서“ Photo Sphere” 로 인식됩니다 .https://developers.google.com/photo-sphere/metadata/

총정리360VR 는 지금 유행중 , 지금 해 봅시다 !Equirectangular 는 앞으로도 많이 쓰일 기술

재미있게 놀아 봅시다 :)