Movi.Kanti.Revo एक नया सेंसरी Chrome प्रयोग है, जिसे Cirque du Soleil के बनाए गए और सब-एटॉमिक सिस्टम्स ने डेवलप किया है. यह आधुनिक वेब टेक्नोलॉजी की मदद से Cirque du Soleil के अजूबे को वेब पर उपलब्ध कराता है.
3D दुनिया का निर्माण करना
प्रयोग सिर्फ़ HTML5 का इस्तेमाल करके बनाया गया था और एनवायरमेंट को मार्कअप और सीएसएस का इस्तेमाल करके
पूरी तरह से तैयार किया गया था. स्टेज पर सेट किए गए हिस्सों की तरह, div, img, छोटे video, और अन्य एलिमेंट को सीएसएस का इस्तेमाल करके 3D स्पेस में रखा जाता है. getUserMedia के नए एपीआई का इस्तेमाल करने से, प्रयोग के साथ इंटरैक्ट करने का
एक नया तरीका चालू हुआ है.
इसके लिए, कीबोर्ड या माउस का इस्तेमाल करने के बजाय,
JavaScript की चेहरे की पहचान करने वाली लाइब्रेरी, आपके सिर को ट्रैक करती है और एनवायरमेंट में आपके साथ काम करती है.
सारे वेब एक स्टेज
इस प्रयोग को बनाने के लिए, यह कल्पना करना बेहतर है कि ब्राउज़र को एक स्टेज के रूप में देखा जाए और <div> जैसे एलिमेंट, इमेज, वीडियो, और अन्य एलिमेंट को सीएसएस का इस्तेमाल करके 3D स्पेस में सेट के रूप में सेट किया जाए. हर एलिमेंट या सेट के हिस्से को स्टेज पर 3D ट्रांसफ़ॉर्म करके दिखाया जाता है. अगर आपको translate3d के बदलावों के बारे में
जानकारी नहीं है, तो इसमें तीन पैरामीटर, X, Y, और Z होते हैं. X, एलिमेंट को हॉरिज़ॉन्टल लाइन में ले जाता है, Y एलिमेंट को ऊपर और नीचे ले जाता है,
और Z एलिमेंट को पास या दूर ले जाता है. उदाहरण के लिए, transform: translate3d(100px, -200px, 300px) को लागू करने पर एलिमेंट 100 पिक्सल दाईं ओर, 200 पिक्सल नीचे, और 300 पिक्सल व्यूअर के करीब आ जाएगा.
ऑडिटोरियम बनाना
आइए पिछले सीन पर नज़र डालते हैं और देखते हैं कि यह सीन, असल में कैसे दिखाया गया है. इन सभी सीन को तीन मुख्य कंटेनर, वर्ल्ड कंटेनर, पर्सपेक्टिव कंटेनर, और स्टेज में बांटा गया है. वर्ल्ड कंटेनर, व्यूअर कैमरा असरदार तरीके से सेटअप करता है. साथ ही, सीएसएस 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); % }
}
स्टेज को विज़ुअलाइज़ करना
स्टेज के आखिरी सीन में सात एलिमेंट हैं. पीछे से आगे करते हुए, इनमें आसमान का बैकग्राउंड, कोहरे की परत, दरवाज़े, पानी, परछाई, कोहरे की एक अतिरिक्त परत, और आखिर में सामने की चट्टानें दिखती हैं.
हर आइटम को transform: translate3d(x, y, z) सीएसएस प्रॉपर्टी की मदद से स्टेज पर रखा जाता है. इससे पता चलता है कि यह 3D स्पेस में कहां फ़िट होता है. हम z वैल्यू का इस्तेमाल ठीक उसी तरह करते हैं जैसे हम z-index करते हैं. हालांकि, translate3d प्रॉपर्टी के साथ, हम वैल्यू के साथ यूनिट भी दे सकते हैं.
पहली इमेज में, सीन को ज़ूम आउट करके 90 डिग्री घुमाया गया है. इससे, यह दिखाया जा सकता है कि अलग-अलग सेट के हर टुकड़े को स्टेज के अंदर कैसे रखा जाता है. सबसे पीछे (बाईं ओर), आपको बैकग्राउंड, धुंध, दरवाज़े, पानी, और आखिर में चट्टानें दिखेंगी.
बैकग्राउंड को स्टेज पर दिखाना
चलिए, बैकग्राउंड इमेज से शुरुआत करते हैं. यह सबसे आगे का हिस्सा है, इसलिए हमने अपने नज़रिए में इसे पीछे धकेलने के लिए Z-ऐक्सिस पर -990 पिक्सल ट्रांसफ़ॉर्मेशन लागू किया (इमेज 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 को लागू करने के अलावा, हम 60 डिग्री (rotateX(60deg)) का x-ऐक्सिस (हॉरिज़ॉन्टल) रोटेशन भी लागू करते हैं, ताकि वह सपाट और टेक्सचर वाला दिखे.
दरवाज़े के रिफ़्लेक्शन और दूसरे फ़ॉग में इसी तरह का एक रोटेशन जोड़ा गया था,
ताकि वह सही प्लेन में दिखे (इमेज 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 स्पेस में दिखाया गया था और हर सीन में सही ट्रांसफ़ॉर्मेशन लागू किया गया था.