맨 처음 장면을 만들고 카메라를 등록합니다. Canvas에서는 카메라를 통해 장면을 그려주게 됩니다. 이후 큐브를 만들기 위하여 먼저 BoxGeometry를 생성하고 그것을 보여줄 Material를 등록하게 됩니다. Material은 GameObject의 표면을 보여주는 설정객체로, Web에서의 CSS와 비슷한 개념이 되겠습니다. 이렇게 만든 Geometry와 Material을 가지고 Cube라는 Mesh를 만들게 되며, 이것을 장면에 등록하게 되면 화면에 Cube가 나타나게 될 것입니다.

큐브까지 생성하게 되면 request Animation Frame 함수를 호출하여 렌더링용 루프(loop)를 호출해야 합니다. request Animation Frame 함수는 setInterval함수보다 CPU 사용률을 줄일 수 있으며, 윈도우에서 사용자가 다른 탭으로 이동하거나 창을 최소화 시켰을 경우에는 실행되지 않는 장점이 있는 메서드입니다. 이렇게 만들어진 렌더링용 함수에 큐브에 움직임을 주는 기능을 추가 시키면 되겠습니다.

스크립트 소스 20줄 미만으로 사용자는 큐브가 돌아가는 애니메이션을 볼 수 있습니다. 아래 이미지는 three.js를 사용하여 다양한 웹어플리케이션을 만든 예제입니다. WebGL과 three.js를 사용하면 웹에서 별도 플러그인 설치 없이 좋은 퀄리티의 3D 어플리케이션을 만들 수 있습니다.

여러분들도 한번 WebGL과 three.js의 세계로 빠져보는 것은 어떨까요?

>>아래 이미지를 클릭하시면 해당 페이지로 이동합니다.

AR과 VR 그 사이의 MR 기술

 증강현실(Augmented Reality)은 카메라로 찍은 실제 화면에, 3차원의 가상 이미지를 얹어서 하나의 영상으로 보여주는 기술입니다. 가장 쉬운 예로 ‘포켓몬GO’, ‘SNOW카메라’가 있습니다. ‘포켓몬GO’와 ‘SNOW카메라’는 증강현실을 이용한 앱으로, 현실에서 카메라를 비추면 해당하는 장소에 가상 3D이미지가 겹쳐져 보입니다. 실제 사용자는 이러한 이미지를 이용하여 원하는 모습을

보여준다거나, 자신이 소유할 수 있도록 해주어 현실적인 느낌이 더욱 잘 느껴질 수 있도록 해주는 앱입니다.

<포켓몬 GO>

가상현실(Virtual Reality)은 3차원 환경의 가상세계를 구현해내는 기술입니다. AR기술 이 현실세계에 3차원의 물체를 불러온다면, VR은 가상세계로 체험자가 들어가는 것이라고 볼 수 있습니다. 현재 360도 카메라가 상용화되면서 가상세계의 몰입도가 더욱 넓어졌습니다. 사용자는 VR기기를 착용하고 5분내에 지구 반대편에 있는 나라로 이동을 할 수 있게 되는 것입니다. 현재에도 게임업계는 VR기술을 도입하여 게임을 제작하고 있으며, ‘HTC Vive’, ‘삼성 기어 VR’, ‘SONY의 PS VR’등으로 VR을 체험해 볼 수 있습니다. 실제 VR에 대한 사람들의 관심이 많으며,