JOGL - Applet based Omnidirectional Panorama

 얼마 전 부터 Omnidirectional Panorama를 Web 상에서 Rendering하기 위한 방법을 찾고 있었다. Omnidirectional Panorama를 표현함에 있어, 두 가지 정도를 생각해 볼 수 있었는데, 첫째 전방위를 6장(상하좌우앞뒤)의 이미지로 나누어 표현하는 방법, 둘째 전방위 이미지를 Equirectangular Projection 형태로 1장의 이미지로 표현하는 방법이다.

(보다 자세한 내용은 푸른하늘님의 블로그 http://www.internetmap.kr/을 참조)

간단히 각각의 주요한 장단점을 비교하면,
  Cubical Projection은 단지 각 6장의 이미지를 여러 크기별로 저장함으로서 간단한 LOD(Level Of Detail)이 가능하다. 예를들어 Level1(최고 화질)은 1024x1024, Level2는 512x512, Level3은 256x256 과 같은 식으로 미리 저장해 둠으로서 View Point(사용자의 시점)에 맞는 적당한 Level을 Client에 전송해 줌으로서, 이미지를 전송하는데 있어 발생할 수 있는 시간 지연을 줄일 수 있다.(한번에 아주 큰 크기를 전송하기 보다, 적당한 크기를 먼저 전송하고, 사용자의 요구가 있을 경우 점점 더 높은 화질의 이미지를 전송한다) 또한, 좌우상하앞뒤 각 6장의 이미지를 Tessellation하여, 사용자의 시야각에 들어있는 이미지 조각만 전송하여 속도 향상을 꾀하는 방법도 간단히 구현할 수 있다.(앞선 요구사항을 만족하는 보다 최적화된 기법들이 있겠지만 여기서는 '간단한 구현'을 전제로 한다)  단점은, 하나의 Omnidirectional Panorama를 표현하는데 있어 다수의 이미지가 사용되어 관리하기 불편하다는 점과, 분할된 각각의 이미지가 압축되면서, 각 이미지의 경계에서 불연속성이 발생하는 문제점도 발생할 수 있다.

  Spherical Projection은 단지 1장의 이미지로 Omnidirectional Panorama를 표현함으로, 이미지 관리가 아주 편하다는 장점이 있다. 또한 이미지를 6장으로 나누는것 보다 1장에 저장하는 것이 저장 공간을 덜 차지한다. 단점은 렌더링시 하나 하나의 픽셀을 직접 읽기/쓰기 하지 않는 이상 Image Mapping(Texture Mapping)기법을 사용해야 하는데, 이 경우 Sphere mesh가 필요하다.(OpenGL or DirectX의 GPU Shader를 사용할 경우 Cube Mesh면 충분하다.)

  문제는 Sphere Mesh의 Tessellation Level(Slice & Stack)이 높아야한다는 점인데 이에 비례하여 속도가 느려지다는 점이다. Adobe Actionscript based 3D Engine인 Papervision3D(http://www.papervision3d.org/)를 보면 Spherical Panorama를 표현한 예제가 있는데 이 예제에서는 Slice&Stack을 Quality라는 변수로 두고 24로 설정했음을 볼 수 있다. 예제에 있는 이미지에서는 잘 보이지 않지만, 직선 성분이 많은 이미지를 이용하여 이 예제를 테스트해 보면 심한 왜곡을 볼 수 있을 것이다. 물론 quality를 올리면 속도가 급격히 떨어진다.

  국내외 많은 곳에서 Omnidirectional Panorama 서비스를 하고 있다. 주로 QuickTime, Shockwave, Flash, Java를 이용하여 표현하는 것으로 보여진다. 특히 Flash를 이용한 서비스가 많은것 같다. 여러 사이트들에서 사용하고 있는 플래시 파일(*.swf)을 Decompile 해본 결과 drawSide(...); 함수가 존재하는데, 이것으로 보아 Cubical Panorama를 주로 사용하고 있는 듯 하다. Java Applet형태로 제공되는 *.jar 또는 *.zip압축을 해제하여 *.class를 추출한 후 Decompile해본 결과 Cubical / Spherical 둘 모두 골고루 사용되는 것 같다. Omnidirectional Panorama를 표현하는 4000x2000크기의 이미지를 CPU에서 처리하는데도 큰 속도 저하가 없다는 점이 놀라웠다. 다만 몇몇 Java 기반의 샘플들에서는 화면 크기를 증가 시킬 경우(렌더링 해야할 픽셀의 수가 많아질 경우) 속도가 떨어지는 문제점을 볼 수 있었다.

  HTML5의 등장으로 WebGL이 가능하게 되었다. WebGL을 이용하면 GPU상에서 동작되는 Shader Program을 이용하여 하드웨어적으로 가속되는 렌더링이 가능하다.(WebGL로 Spherical Panorama를 표현한 예제는 http://jrr.kr/entry/Adobe-Flash-based-Spherical-Panorama-Skybox에서 찾아볼 수 있다.) WebGL이 비록 하드웨어  가속된 렌더링이 가능하다고 하지만 불행하게도 아직은 지원하지 않는 웹브라우저가 더 많다. 더욱이 Microsoft Internet Explorer는 9 Version에서 조차 WebGL을 지원하지 않고 있으며, Google Chome, Firefox, Safari등의 브라우저는 지원하기는 하지만 나이틀리빌드/베타버전을 통해서만 지원하고 있다. 따라서 WebGL을 이용하여 Omnidirectional Panorama를 표현하는 것은 학습 용도외에는 사용할 수 없다.

  두 번째는 JOGL을 사용하는 것이다. JOGL은 오래전 접해본 적이 있으나 native code에 비해 느린 속도때문에 더 이상의 학습을 진행하지 않았었다. 하지만 비록 JOGL이 native OpenGL code보다는 느리지만, Web상에서 3D를 표현하는 데 있어 현재로서는 가장 알맞은 대안이 아닌가 생각된다. 왜냐하면 google의 O3D조차 WebGL이 등장하면서 더이상의 개발을 진행하지 않는 듯 하고, ActiveX는 MS IE에서만 실행되므로 고려 대상이 아니다. Flash는 Web Contents를 표현하는데 있어 현재로서는 더할 나위 없는 좋은 선택이지만 GPU 가속을 생각할 수 없는점과 차후 WebGL이 활성화 되었을 때를 고려해 보면 깊이 파고들 여지는 없어보인다.(3D Graphics 로서는) JOGL은 앞으로 등장할 WebGL에 대한 적응도를 향상 시키는데에도 많은 도움이 될 것이라 생각되고, 현재로서 하드웨어 가속을 지원하면서 브라우저의 특성을 많이 타지 않고 Web 3D를 표현할 수 있는 유일한 방법이라 생각되므로 본 방식을 선택하여 Omnidirectional Panorama를 표현하고자 한다.

아래는 Equirectangular Projection 이미지 1장, Vertex 8개 Cube & GLSL, JOGL-Applet 을 이용한 예제이다.