Movi Kanti Revo - 1. Bölüm - 3D Dünyayı İnşa Etme

Pete LePage

Movi.Kanti.Revo, Cirque du Soleil tarafından hazırlanmış ve Subatomic Systems tarafından geliştirilen ve Cirque du Soleil'in harikalarını modern web teknolojileriyle web'e taşıyan yeni, duyulara hitap eden bir Chrome deneyidir.

3D Dünyayı İnşa Etme

Deneme yalnızca HTML5 kullanılarak oluşturulmuştur ve ortam, işaretleme ve CSS ile tümüyle oluşturulmuştur. Sahnedeki ayarlanan parçalar gibi, div'ler, img'ler, küçük video'ler ve diğer öğeler de CSS kullanılarak 3D bir alana konumlandırılır. Yeni getUserMedia API'sinin kullanılması, denemeyle etkileşim kurmak için yepyeni bir yol sağladı. Bu API, klavye veya fare kullanmak yerine, JavaScript yüz algılama kitaplığı başınızı izler ve ortamı sizinle birlikte hareket ettirir.

Her şey bir aşamadır

Bu denemeyi oluşturmak için en iyisi tarayıcıyı bir aşama, <div> öğeleri, resimler, videolar ve diğer öğeleri CSS kullanarak 3D uzaya yerleştirilmiş parçalar olarak görmektir. Her bir öğe veya set parçası, bir 3D dönüştürme uygulanarak sahneye konumlandırılır. translate3d dönüşümünü bilmiyorsanız X, Y ve Z olmak üzere 3 parametre gerekir. X öğeyi yatay bir çizgi boyunca, Y öğeyi yukarı ve aşağı hareket ettirir, Z ise yaklaştırır veya uzaklaştırır. Örneğin, transform: translate3d(100px, -200px, 300px) uygulandığında öğe 100 piksel sağa, 200 piksel aşağı ve görüntüleyene doğru 300 piksel daha yakına taşınır.

Oditoryum Yapılıyor

Şimdi son sahneye ve nasıl düzenlenmiş olduğuna bakalım. Tüm sahneler üç ana kapsayıcıya ayrılır: dünya kapsayıcısı, bir perspektif kapsayıcısı ve sahne. Dünya kapsayıcısı, görüntüleyenin kamerasını etkili bir şekilde kurar ve tarayıcıya öğenin nereden baktığını bildirmek için CSS perspective özelliğini kullanır. #perspective-container, 3D dönüştürme işlemleri uygulayarak perspektifimizi değiştirmek için kullanılır. Son olarak, sahnede ekranda görünecek gerçek set parçaları yer alır.

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

Sahneyi Görselleştirme

Sahnenin son sahnesinde yedi öğe bulunur. Arkadan öne doğru giderken gökyüzü arka planı, sis katmanı, kapılar, su, yansımalar, ek bir sis katmanı ve son olarak öndeki kayalıklar yer alıyor. Her öğe, 3D uzayda nereye sığacağını belirten bir transform: translate3d(x, y, z) CSS özelliğiyle sahneye yerleştirilir. Z değerini, z-index ile benzer bir şekilde kullandık ancak translate3d özelliğiyle aynı değeri içeren bir birim de sağlayabiliriz.

Şekil 1'de, farklı küme parçalarının her birinin sahne içine yerleştirilme şeklini görselleştirebilmeniz için, sahne uzaklaştırılmış ve yaklaşık 90 derece döndürülmüştür. Arkada (en sola) arka planı, sisi, kapıları, su ve son olarak uçurumları görebilirsiniz.

Arka Planı Sahneye Yerleştirme

Arka plan resmiyle başlayalım. En uzak konum olduğu için Z eksenine -990 piksellik bir dönüştürme uygulayarak perspektifimize geri döndürdük (bkz. Şekil 2).

Yalnızca arka plan -990 piksele yerleştirilen sahne — Şekil 2: Yalnızca arka plan -990 piksel olacak şekilde yerleştirilmiş sahne

Fizik kuralları gereği, uzayda geri döndükçe resmin küçülmesi gerekir. Bu nedenle, görüntü alanına uyması için bir scale(3.3) özelliği aracılığıyla yeniden boyutlandırılması ve üst kenarı, y ekseninde bir translate3d ile görüntü alanının üst kısmına hizalanması gerekir (bkz. Şekil 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>; % }
}

Şekil 3: Arka planı yerleştirilmiş ve ölçeklendirilmiş olarak sahne. — Şekil 3: Yalnızca arka planın yerleştirilip ölçeklendirildiği sahne.

Sis, kapılar ve uçurumlar aynı şekilde görünür. Her biri uygun bir z konumu ve ölçek faktörüne sahip bir translate3d uygulayarak (bkz. Şekil 4). Sislerin kapı arkasında ve uçurum arkasında nasıl yığıldığına dikkat edin.

Şekil 4: Sis, kapılar ve uçurumun konumlandırıldığı ve ölçeklendirildiği şekilde sahne — Şekil 4: Sis, kapılar ve uçurumların yerleştirilip ölçeklendirildiği sahne.

Denizin Gelişmesi

Mümkün olduğunca gerçekçi bir ortam oluşturmak için suyu dikey bir düzleme dökemeyeceğimizi biliyorduk, gerçek dünyada böyle bir şey yoktu. Suyu sahneye konumlandırmak için translate3d uygulamanın yanı sıra, düz ve dokulu görünmesi için 60 derecelik (rotateX(60deg)) bir x ekseni (yatay) döndürme de uygularız. Kapının doğru düzlemde görünmesi için kapı yansımasına ve ikincil sislere de benzer bir dönüş eklendi (bkz. Şekil 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>; % }
}

Şekil 5: Her şeyin konumlandırıldığı ve ölçeklendirildiği sahne.

Her sahne benzer bir şekilde oluşturulmuş, öğeler bir sahnenin 3D alanı içinde görselleştirilmiş ve her bir sahneye uygun bir dönüşüm uygulanmıştır.