Movi.Kanti.Revo, Chrome पर एक नया प्रयोग है. इसे Cirque du Soleil ने बनाया है और Subatomic Systems ने डेवलप किया है. यह प्रयोग, आधुनिक वेब टेक्नोलॉजी की मदद से, 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 पिक्सल ले जाया जाएगा.
ऑडिटोरियम बनाना
आइए, आखिरी सीन पर नज़र डालते हैं और देखते हैं कि इसे कैसे बनाया गया है. सभी सीन को तीन मुख्य कंटेनर में बांटा गया है: वर्ल्ड कंटेनर, पर्सपेक्टिव कंटेनर, और स्टेज. वर्ल्ड कंटेनर, दर्शकों के कैमरे को असरदार तरीके से सेट अप करता है. साथ ही, ब्राउज़र को यह बताने के लिए 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); % }
}
स्टेज को विज़ुअलाइज़ करना
इस स्टेज में, आखिरी सीन में सात एलिमेंट हैं. पीछे से आगे की ओर बढ़ते हुए, इनमें आसमान का बैकग्राउंड, धुंध की एक लेयर, दरवाज़े, पानी, प्रतिबिंब, धुंध की एक और लेयर, और आखिर में सामने की चट्टानें शामिल हैं.
हर आइटम को transform: translate3d(x, y, z) सीएसएस प्रॉपर्टी के साथ स्टेज पर रखा जाता है. इससे पता चलता है कि वह 3D स्पेस में कहां फ़िट होता है. हमने z वैल्यू का इस्तेमाल उसी तरह किया है जिस तरह z-index का इस्तेमाल किया जाता है. हालांकि, translate3d प्रॉपर्टी की मदद से, वैल्यू के साथ यूनिट भी दी जा सकती है.
पहले इमेज में, ज़ूम आउट किए गए सीन को 90 डिग्री तक घुमाया गया है, ताकि आप यह देख सकें कि स्टेज पर अलग-अलग सेट पीस कैसे रखे गए हैं. सबसे पीछे (सबसे बाईं ओर), आपको बैकग्राउंड, धुंध, दरवाज़े, पानी, और आखिर में चट्टानें दिख सकती हैं.
स्टेज पर बैकग्राउंड डालना
चलिए, बैकग्राउंड इमेज से शुरुआत करते हैं. यह सबसे पीछे है, इसलिए हमने इसे अपने पर्सपेक्टिव में पीछे धकेलने के लिए, Z-ऐक्सिस पर -990 पिक्सल का ट्रांसफ़ॉर्म लागू किया है (दूसरा इमेज देखें).
स्पेस में वापस जाते समय, फ़िज़िक्स के हिसाब से यह छोटा हो जाता है. इसलिए, इसे व्यूपोर्ट में फ़िट करने के लिए, scale(3.3) प्रॉपर्टी की मदद से इसका साइज़ बदलना होगा. साथ ही, इसके ऊपरी हिस्से को y-ऐक्सिस पर translate3d की मदद से व्यूपोर्ट के ऊपरी हिस्से के साथ अलाइन करना होगा (तीसरा चित्र देखें).
.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 स्पेस में विज़ुअलाइज़ किया गया था और हर सीन पर सही ट्रांसफ़ॉर्म लागू किया गया था.