Movi Kanti Revo - パート 1 - 3D 世界の構築

Pete LePage

Movi Kanti Revo のロゴ。

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 ピクセル移動します。

オーディトリアムの構築

最後のシーンとその構成を見てみましょう。すべてのシーンは、ワールド コンテナ、パースペクティブ コンテナ、ステージの 3 つのメイン コンテナに分割されます。ワールド コンテナは視聴者のカメラを効果的にセットアップし、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: 横から見たステージ
図 1: 横から見たステージ

図 1 は、シーンをズームアウトしてほぼ 90 度回転させたものです。各セットピースがステージ内にどのように配置されているかを確認できます。後ろ（左端）には、背景、霧、ドア、水、最後に崖が見えます。

ステージに背景を配置する

背景画像から始めましょう。最も奥にあるため、Z 軸に -990 ピクセルの変換を適用して、遠近感で奥に押し出しました（図 2 を参照）。

背景のみが -990 ピクセルに配置されたステージ
図 2: 背景のみが -990 ピクセルに配置されたステージ

空間内で後方に移動すると、物理的な要請によりサイズが小さくなるため、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: すべてのオブジェクトの位置とスケールが設定されたステージ。
図 5: すべてのオブジェクトの位置とスケールが設定されたステージ。
>

各シーンは同様の方法で構築され、要素はステージの 3D 空間内で可視化され、それぞれに適切な変換が適用されました。

関連情報