로드뷰, 360VR의 기반 기술인 Equirectangular Projection(이퀴렉탱귤러/등장방형도법)을 이해해, DirectX11과 HLSL로 화면 출력, 큐브맵과 상호 변환 방법을 공부합니다.

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

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

3. 360VR/Photo Sphere이란?
상하좌우앞뒤 원하는 방향으로 돌리면서 볼 수
있는 사진, 동영상
360VR 동영상 유튜브에서 검색하면 나옵니다
https://www.youtube.com/results?search_query
=360vr

4. Google street view

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

6. 위
아래
앞좌 우뒤 뒤

7. Equirectangular projection
이퀴렉탱귤러/등장방형도법 [等長方形圖法]
“구”를 2:1 비율 직사각형으로 펼친 것입니다

8. Equirectangular projection특징(1)

9. Equirectangular projection특징(2)
극으로 갈수록
X방향으로
점차 확대
Y방향 측척은
항상 동일

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

11. 큐브맵으로 하늘을 그리는 픽셀 쉐이더
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차원 벡터!

12. 시선 방향 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 범위

13. 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텍스쳐 좌표를 구해야 합니다… <- ???

14. 뭘 하는지 아주 직관적으로 이해하기
● 경도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.jpg
Wikipedia에 있는 세계지도로 텍스쳐를 만들면 디버깅까지 직관적!!

15. 위도/경도 구하기
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는 위도이며, 카메라 상하 회전!
삼각함수를 쓰면 됩니다

16. 텍스쳐 좌표계로 변환
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

17. Equirectangular로 스샷 찍기 구현
하기

18. Equirectangular로 스샷 찍기
이것 엔진으로 지원하면 바로 360VR동영상을
찍을 수 있게 된다!
1패스로는 불가능(직선을 곡선으로 왜곡시킬수
없어서)
1. 큐브맵으로 렌더링하기
2. 시선 벤터를 역으로 구해서 큐브맵 샘플링

19. 1.큐브맵으로 렌더링하기
“Dynamic Cube Map”로 검색하면 나옵니다
화각 90도, aspect ratio=1.0로 상하좌우앞뒤 6방향 촬영

20. 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 보고 만들었습니다.

21. 기타 등등

22. Stereographic Projection
Little Planet / Tiny Planet이란 이름으로 알려진 투영법
360도 사진을 소스로 그립니다
float4 mainPS(VsToPs inp) : SV_Target
{
float2 scale = float2(4.0f / 3.0f, 1) * 3; // scale & aspect ratio
float2 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

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

24. image stitching
● 카메라간 경계를 완벽하게 제거할 수 없다(실
제 세계, CG이면 가능)
● 방향마다 밝기가 다르다
최대한 경계를 없애기 위해 노력해 보는 방식
“image stitching”
http://www.cs.bath.ac.uk/brown/autostitch/autos
titch.html

25. 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/

26. 총정리
360VR는 지금 유행중, 지금 해 봅시다!
Equirectangular는 앞으로도 많이 쓰일 기술
재미있게 놀아 봅시다:)