
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>; % }
}

안개, 문, 절벽도 동일한 방식으로 적절한 z 위치와 배율을 사용하여 translate3d
를 적용합니다(그림 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>; % }
}

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