Movi.Kanti.Revo は、Chrome の新しい試験運用版で、シルク デュ ソレイユが考案し、Subatom システムによって開発されました。これは、最新のウェブ技術を通じてシルク デュ ソレイユの魅力をウェブにもたらします。
3D 世界を構築する
このテストは HTML5 のみを使用して作成されており、環境全体はマークアップと CSS のみで構築されています。ステージ上のセットピースと同様に、div、img、小さな video などの要素は、CSS を使用して 3D 空間に配置されます。新しい getUserMedia API を使用することで、キーボードやマウスを使用する代わりに、JavaScript 顔検出ライブラリが頭を追跡し、環境をユーザーと一緒に動かして、まったく新しい方法でテストを操作できます。
ウェブのステージ
このテストを作成するときは、ブラウザを 1 つのステージとして、<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 は、ズームアウトしてほぼ 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 空間内で可視化して、それぞれに適切な変換を適用しました。