Movi Kanti Revo - 1부 - 3D 세상 만들기

Pete LePage

Movi.Kanti.Revo는 Cirque du Soleil에서 제작하고 Subatomic Systems에서 개발한 새로운 감각적 Chrome 실험으로, 최신 웹 기술을 통해 Cirque du Soleil의 경이로움을 웹에 제공합니다.

3D 세상 빌드

이 실험은 HTML5만 사용하여 만들었으며 환경은 마크업과 CSS로 완전히 빌드됩니다. 무대의 세트 조각처럼 div, img, 작은 video 및 기타 요소는 CSS를 사용하여 3D 공간에 배치됩니다. 새로운 getUserMedia API를 사용하면 실험과 상호작용하는 완전히 새로운 방법을 사용할 수 있습니다. 키보드나 마우스를 사용하는 대신 JavaScript 얼굴 감지 라이브러리가 사용자의 머리를 추적하고 사용자와 함께 환경을 이동합니다.

웹은 모두 무대입니다.

이 실험을 빌드하려면 브라우저를 무대로, <div>, 이미지, 동영상 등의 요소를 CSS를 사용하여 3D 공간에 배치된 세트 조각으로 생각하는 것이 가장 좋습니다. 각 요소 또는 세트 조각은 3D 변환을 적용하여 무대에 배치됩니다. translate3d 변환에 익숙하지 않은 경우 X, Y, Z라는 3가지 매개변수를 사용합니다. X는 요소를 가로선을 따라 이동시키고, Y는 요소를 위아래로 이동시키며, Z는 요소를 더 가까이 또는 더 멀리 이동시킵니다. 예를 들어 transform: translate3d(100px, -200px, 300px)를 적용하면 요소가 오른쪽으로 100픽셀, 아래로 200픽셀, 보기 권한 사용자 쪽으로 300픽셀 이동합니다.

강당 건설

마지막 장면을 살펴보고 어떻게 구성되었는지 알아보겠습니다. 모든 장면은 세 가지 기본 컨테이너인 월드 컨테이너, 원근 컨테이너, 스테이지로 분류됩니다. 월드 컨테이너는 시청자 카메라를 효과적으로 설정하고 CSS perspective 속성을 사용하여 시청자가 요소를 어디에서 볼지 브라우저에 알려줍니다. #perspective-container는 3D 변환을 적용하여 원근을 변경하는 데 사용됩니다. 마지막으로 스테이지에는 화면에 표시될 실제 세트가 포함됩니다.

<div id="world-container">
  <div id="perspective-container">
    <div id="stage">
    </div>
  </div>
</div>

#world-container {
perspective: 700px;
overflow: hidden;
}

#perspective-container {
{ % mixin transform-style: preserve-3d; % }
{ % mixin transform-origin: center center; % }
{ % mixin perspective-origin: center center; % }
{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
}

스테이지 시각화

스테이지 내의 최종 장면에는 7개의 요소가 있습니다. 뒤에서 앞으로 이동하면 하늘 배경, 안개 레이어, 문, 물, 반사, 추가 안개 레이어, 마지막으로 앞에 있는 절벽이 포함됩니다. 각 항목은 3D 공간에서 항목이 들어맞는 위치를 나타내는 transform: translate3d(x, y, z) CSS 속성을 사용하여 무대에 배치됩니다. z 값은 z-index를 사용하는 것과 비슷한 방식으로 사용했지만 translate3d 속성을 사용하면 값에 단위를 제공할 수도 있습니다.

그림 1은 각기 다른 세트 조각이 무대 내에 배치되는 방식을 시각화할 수 있도록 축소하고 거의 90도 회전한 장면을 보여줍니다. 뒤쪽 (가장 왼쪽)에는 배경, 안개, 문, 물, 절벽이 보입니다.

무대에 배경 배치

배경 이미지부터 시작하겠습니다. 가장 뒤에 있으므로 Z축에 -990px 변환을 적용하여 관점에서 뒤로 밀었습니다(그림 2 참고).

공간에서 뒤로 이동할 때 물리학에 따라 크기가 작아져야 하므로 scale(3.3) 속성을 통해 크기를 조절하여 표시 영역에 맞추고 y축의 translate3d를 사용하여 상단 가장자리를 표시 영역 상단에 정렬해야 합니다 (그림 3 참고).

.background {
width: 1280px;
height: 800px;
top: 0px;
background-image: url(stars.png);
{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
}

그림 3: 배경이 배치되고 크기가 조정된 스테이지 — 도움말 3: 배경만 배치되고 크기가 조정된 스테이지

안개, 문, 절벽도 동일한 방식으로 적절한 z 위치와 배율을 사용하여 translate3d를 적용합니다(그림 4 참고). 문 뒤와 절벽 뒤에 안개가 쌓이는 모습을 확인할 수 있습니다.

그림 4: 안개, 문, 절벽이 배치되고 크기가 조정된 무대 — 도움말 4: 안개, 문, 절벽이 배치되고 크기가 조정된 무대

바다 추가

최대한 사실적인 환경을 만들기 위해 수직 평면에 물을 단순히 배치할 수는 없습니다. 실제 세계에서는 일반적으로 그렇게 존재하지 않기 때문입니다. translate3d를 적용하여 무대에 물을 배치하는 것 외에도 x축 (가로) 회전 60도 (rotateX(60deg))를 적용하여 평평하고 질감이 있는 것처럼 보이게 합니다. 올바른 평면에서 표시되도록 문 반사와 보조 안개에 유사한 회전을 추가했습니다 (그림 5 참고).

.sea {
bottom: 120px;
background-image: url(sea2.png);
width: 1280px;
height: 283px;
{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
}

그림 5: 모든 요소가 배치되고 크기가 조정된 상태의 무대 — Figure 5: 모든 요소가 배치되고 크기가 조정된 스테이지

각 장면은 비슷한 방식으로 빌드되었으며, 요소는 무대의 3D 공간 내에 시각화되었고, 각 요소에 적절한 변환이 적용되었습니다.