इसके अंदर (https://with.in/) वर्चुअल रिएलिटी में कहानी सुनाने की सुविधा देने वाला एक प्लैटफ़ॉर्म है. इसलिए, जब टीम को 2015 में WebVR के बारे में पता चला, तो हमें तुरंत इसकी क्षमता में दिलचस्पी शुरू हो गई. आज, यह दिलचस्पी हमारे वेब प्लैटफ़ॉर्म https://vr.with.in/ के एक खास सबडोमेन में दिखने लगेगी. वीआर-सुविधा वाला ब्राउज़र इस्तेमाल करने वाला कोई भी व्यक्ति इस साइट पर जा सकता है, बटन पर क्लिक करके, हेडसेट पर फेंककर वीआर फ़िल्मों के हमारे पोर्टफ़ोलियो का आनंद ले सकता है.
इसमें Daydream View पर Chrome के अलावा और भी चीज़ें शामिल हो सकती हैं. अपने डिवाइस और सिर पर पहनने वाले डिसप्ले के बारे में जानकारी के लिए, https://webvr.info/ देखें.
वर्चुअल रिएलिटी के लिए खास तौर पर बनाए गए दूसरे एनवायरमेंट की तरह, वेब भी मुख्य रूप से किसी सीन को तीन डाइमेंशन में दिखाने पर निर्भर करता है. इस सीन में कैमरा, आपका नज़रिया, और कितने भी ऑब्जेक्ट हैं. इस सीन, कैमरा, और ऑब्जेक्ट को मैनेज करने के लिए, हम Three.js नाम की लाइब्रेरी का इस्तेमाल करते हैं. यह लाइब्रेरी, <canvas> एलिमेंट का इस्तेमाल करके आपके कंप्यूटर के जीपीयू पर रेंडरिंग का इस्तेमाल करती है. WebVR में आपके सीन को दिखाने के
लिए तीन उपयोगी ऐड-ऑन हैं. खास तौर पर, हर आंख के लिए व्यूपोर्ट बनाने के लिए THREE.VREffect और हर आंख के लिए व्यूपोर्ट बनाने के लिए, THREE.VRControls का इस्तेमाल किया जाता है. इसे लागू करने के
कई उदाहरण हैं. शुरुआत करने के तरीके जानने के लिए,
Three.js WebVR के उदाहरण देखें.
WebVR के बारे में ज़्यादा जानने पर, हमें समस्या का सामना करना पड़ा. अगर हम वेब की सामग्री पर नज़र डालते हैं, तो टेक्स्ट उसका अहम हिस्सा होता है. आम तौर पर, हमारा ज़्यादातर कॉन्टेंट
वीडियो पर आधारित होता है. हालांकि, साइट के अंदर टेक्स्ट पर जाने पर,
यूज़र इंटरफ़ेस और फ़िल्म या उससे जुड़ी फ़िल्मों के बारे में अतिरिक्त जानकारी
टेक्स्ट के साथ तैयार हो जाती है. इसके अलावा, यह पूरा टेक्स्ट DOM में बनाया गया है. हमारे
WebVR एक्सप्लोरेशन और https://vr.with.in/
<canvas> में शामिल हैं.
इसके लिए, मेरे पास क्या विकल्प हैं?
अच्छी बात यह है कि ऐसा किया जा रहा है. असल में, हमने अपनी रिसर्च में, <canvas> एलिमेंट पर तीन डाइमेंशन में टेक्स्ट को रेंडर करने के कई असरदार तरीकों का पता लगाया है. नीचे कुछ मैट्रिक्स दिए गए हैं जो
हर एक के फ़ायदे और नुकसान बता रहे हैं:
| रिज़ॉल्यूशन इंडिपेंडेंट | टाइपोग्राफ़िक सुविधाएं | परफ़ॉर्मेंस | लागू करने में आसान | |
|---|---|---|---|---|
| 2D कैनवस टेक्स्ट | हां | हां | हां | |
| त्रिकोण वाला वेक्टर टेक्स्ट | हां | हां | ||
| बाहर रखा गया 3D टेक्स्ट | हां | |||
| साइन की गई दूरी वाला फ़ील्ड बिट मैप टेक्स्ट | हां | हां | हां |
हमारा फ़ैसला: एसडीएफ़ बिटमैप फ़ॉन्ट
ctx.fillText() के साथ 2D कैनवस में टेक्स्ट रैपिंग, अक्षरों के बीच स्पेस, और लाइन की ऊंचाई
का इस्तेमाल किया जा सकता है. हालांकि, ओवरफ़्लो कट जाएगा और बहुत दूर से ज़ूम इन करने पर टेक्स्ट धुंधला होगा. आप कैनवस का आकार बढ़ा सकते हैं, लेकिन बनावट के आकार की ऊपरी सीमा तक पहुंच सकते हैं. अगर बनावट बहुत बड़ी है, तो परफ़ॉर्मेंस पर बुरा असर पड़ सकता है.
एक्सट्रैक्ट किया गया 3D टेक्स्ट, ट्राइऐंग्युलेटेड वेक्टर टेक्स्ट जैसा ही होता है. हालांकि, इसकी गहराई और संभावित रूप से एक बेवेल होता है, इसलिए इसकी ज्यामिति कम से कम दोगुनी होती है. इनमें से कोई भी टाइटल या लोगो के लिए छोटी-छोटी खुराक में काम आ सकता है, लेकिन ज़्यादा टेक्स्ट के लिए उतना अच्छा परफ़ॉर्म नहीं कर सकता. साथ ही, इनमें से किसी में भी टाइपिंग की सुविधा नहीं है.
बिटमैप फ़ॉन्ट एक वर्ण में एक क्वाड (दो त्रिभुज) का इस्तेमाल करते हैं. इसलिए, वे कम ज्यामिति का इस्तेमाल करते हैं और त्रिकोण वाले वेक्टर की तुलना में बेहतर परफ़ॉर्म करते हैं. वे अब भी रास्टर पर आधारित होते हैं, क्योंकि वे टेक्सचर मैप स्प्राइट का इस्तेमाल करते हैं. हालांकि, एसडीएफ़ शेडर के साथ वे ओरिजनल रूप से रिज़ॉल्यूशन-इंडिपेंडेंट होते हैं, इसलिए वे 2D कैनवस टेक्सचर की तुलना में बेहतर दिखते हैं. Matt DesLauriers' थ्री-bmfont-टेक्स्ट में टेक्स्ट रैपिंग, लेटर के बीच के स्पेस, लाइन की ऊंचाई और अलाइनमेंट के लिए, टाइपिंग की भरोसेमंद सुविधाएं भी शामिल हैं. ओवरफ़्लो नहीं कटता. फ़ॉन्ट साइज़ को स्केल से कंट्रोल किया जाता है. हमने इस रूट को इसलिए चुना, क्योंकि इससे हमें बेहतर प्रदर्शन करते हुए डिज़ाइन के लिए सबसे अच्छे विकल्प मिलते थे. माफ़ करें, इसे लागू करना आसान नहीं था. इसलिए, हम WebVR में काम करने वाले साथी डेवलपर की मदद करने की उम्मीद करते हैं.
1. बिटमैप फ़ॉन्ट (.png + .fnt) जनरेट करें
Hiero बिट मैप फ़ॉन्ट पैकिंग टूल है, जो Java के साथ चलता है. Hiero दस्तावेज़ में इस बात की पूरी जानकारी नहीं दी गई है कि बिना किसी जटिल बिल्ड प्रोसेस से इसे कैसे चलाया जाए. अगर आपने पहले से Java इंस्टॉल नहीं किया है, तो सबसे पहले उसे इंस्टॉल करें. इसके बाद, अगर Runnable-hiero.जार पर दो बार क्लिक करने से Hiero नहीं खुलता है, तो इसे कंसोल में इस निर्देश की मदद से चलाने की कोशिश करें:
java -jar runnable-hiero.jar
Hiero के चलने के बाद, .ttf या .otf डेस्कटॉप फ़ॉन्ट खोलें, आपको जो भी वर्ण शामिल करने हैं उन्हें डालें, इफ़ेक्ट चालू करने के लिए रेंडरिंग को Java में बदलें, साइज़ बढ़ाएं, ताकि आपके वर्ण पूरे ग्लिफ़ कैश स्क्वेयर को भर सकें, एक दूरी का फ़ील्ड इफ़ेक्ट जोड़ें, दूरी के फ़ील्ड का स्केल अडजस्ट करें और उसके फैलाव को बढ़ाएं. स्केल वैल्यू एक रिज़ॉल्यूशन की तरह होती है. यह जितना ज़्यादा होगा, उतना ही धुंधला होगा, लेकिन Hiero को झलक दिखाने में ज़्यादा समय लगेगा. इसके बाद, बिटमैप फ़ॉन्ट को सेव करें. यह .png इमेज के साथ एक बिटमैप फ़ॉन्ट जनरेट करता है. AngelCode .fnt फ़ॉन्ट की जानकारी वाली फ़ाइल मौजूद होती है.
2. AngelCode को JSON में बदलें
अब बिट मैप फ़ॉन्ट जनरेट हो गया है, इसलिए हमें इसे Mat DesLauriers के load-bmfont npm पैकेज के साथ अपने JavaScript ऐप्लिकेशन में लोड करना होगा.
हम लोड-bmfont को ब्राउज़र में बदल सकते हैं और उसे फ़्रंट एंड पर इस्तेमाल कर सकते हैं. हालांकि, अब हम Hiero's AngelCode .fnt को .json फ़ाइल में बदलने और सेव करने के लिए नोड की मदद से load-bmfont.js चलाएंगे:
npm install
node load-bmfont.js
अब हम load-bmfont को बायपास कर सकते हैं और .json फ़ॉन्ट फ़ाइल पर सिर्फ़ XHR (XMLHttpRequest) का अनुरोध कर सकते हैं.
var r = new XMLHttpRequest();
r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');
r.onreadystatechange = function() {
if (r.readyState === 4 && r.status === 200) {
setup(JSON.parse(r.responseText));
}
};
r.send();
function setup(font) {
// pass font into TextBitmap object
}
3. ब्राउज़रify तीन-bmfont-टेक्स्ट
फ़ॉन्ट लोड होने के बाद, बाकी की मेहनत मैट के तीन-bmfont-टेक्स्ट से होगी. हम अपने ऐप्लिकेशन के लिए Node का इस्तेमाल नहीं कर रहे हैं. इसलिए, हम इसे Browserify तीन-bmfont-text.js का इस्तेमाल कर सकने वाले three-bmfont-text-bundle.js में ले जा रहे हैं
npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js
4. एसडीएफ़ शेडर
साइन किए गए दूरी के फ़ील्ड शेडर का असर देखने के लिए, vr.with.in/archive/text-sdf-bitmap/ पर afwidth और थ्रेशोल्ड स्लाइडर को अडजस्ट करें.
5. इस्तेमाल का तरीका
सुविधा के लिए, मैंने ब्राउज़र के हिसाब से तीन-bmfont-text के लिए, TextBitmap रैपर क्लास बनाई है.
<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>
.json फ़ॉन्ट फ़ाइल के लिए XHR अनुरोध बनाएं और कॉलबैक में एक टेक्स्ट ऑब्जेक्ट बनाएं:
var bmtext = new TextBitmap({ options });
टेक्स्ट बदलने के लिए:
bmtext.text = 'The quick brown fox jumps over the lazy dog.';
scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );
बिटमैप फ़ॉन्ट का .png, text-bitmap.js में THREE.TextureLoader के साथ लोड है
TextBitmap में माउस, कैमरे या हाथ से ट्रैक किए जाने वाले मोशन कंट्रोलर, जैसे कि Oculus Touch या Vive कंट्रोलर से तीन.js रेकास्ट इंटरैक्शन के लिए, न दिखने वाला हिटबॉक्स भी शामिल होता है. टेक्स्ट के विकल्प बदलने पर, हिटबॉक्स का साइज़ अपने-आप अपडेट हो जाता है.
Bmtext.group को तीन.js सीन में जोड़ा गया. अगर आपको चिल्ड्रेन / Object3D's को ऐक्सेस करना है, तो टेक्स्ट का सीन ग्राफ़ इस तरह दिखता है:
6. json को अलग करें और xoffsets में बदलाव करें
अगर आपकी करिंग बंद है, तो आपको json में xoffsets में बदलाव करने की ज़रूरत पड़ सकती है. फ़ाइल का अनमिनिफ़ाइड वर्शन पाने के लिए, json को Jsbeautifier.org में चिपकाएं.
xoffset एक वर्ण के लिए मुख्य रूप से ग्लोबल कर्निंग है. Kerning दो खास वर्णों के लिए है, जो एक-दूसरे के बगल में दिखते हैं. कर्निंग अरे में डिफ़ॉल्ट वैल्यू से कोई फ़र्क़ नहीं पड़ता. इसमें बदलाव करना बहुत मुश्किल हो सकता है. इसलिए, आप उस ऐरे को खाली करके json फ़ाइल का साइज़ कम कर सकते हैं. फिर कर्निंग के लिए xoffsets में बदलाव करें.
सबसे पहले आपको यह पता करना होगा कि json में, कौनसे वर्ण
किस तरह के वर्ण आईडी के साथ इस्तेमाल किए जा सकते हैं. three-bmfont-text-bundle.js में,
लाइन 240 के बाद console.log डालें:
var id = text.charCodeAt(i)
// console.log(id);
इसके बाद https://vr.with.in/archive/text-sdf-bitmap/ पर dat.gui टेक्स्ट फ़ील्ड टाइप करें और किरदार का आईडी ढूंढने के लिए कंसोल पर जाएं.
उदाहरण के लिए, हमारे बिटमैप फ़ॉन्ट में, "j" लगातार दाईं ओर बहुत दूर है. इसका
चार्ट आईडी 106 है. इसलिए, json में "id": 106 खोजें और इसके xoffset को -1 से बदलकर -10 करें.
7. लेआउट
अगर आपके पास टेक्स्ट के कई ब्लॉक हैं और आपको उसे एचटीएमएल की तरह ऊपर से नीचे की ओर फ़्लो करना है, तो हर चीज़ को मैन्युअल तरीके से रखना होगा. ऐसा सीएसएस के साथ हर डॉम एलिमेंट की पूरी पोज़िशनिंग करने जैसा ही होना चाहिए. क्या सीएसएस में ऐसा करने के बारे में सोचा जा सकता है?
* { position: absolute; }
3D में टेक्स्ट लेआउट कुछ ऐसा ही होता है. ज़्यादा जानकारी वाले व्यू में: टाइटल, लेखक, ब्यौरा, और अवधि, TextBitmap के नए ऑब्जेक्ट हैं. इनकी अपनी-अपनी स्टाइल, रंग, स्केल वगैरह है.:
author.group.position.y = title.group.position.y - title.height - padding;
description.group.position.y = author.group.position.y - author.height - padding;
duration.group.position.y = description.group.position.y - description.height - padding;
इसमें यह माना जाता है कि हर TextBitmap ग्रुप का लोकल ऑरिजिन, TextBitmap मेश के ऊपर की ओर वर्टिकल तौर पर अलाइन किया जाता है (text-bitmap.js अपडेट में सेंटरिंग देखें). अगर आप इनमें से किसी भी ऑब्जेक्ट का टेक्स्ट बाद में बदलते हैं और उस ऑब्जेक्ट की ऊंचाई बदलती है, तो आपको उन स्थितियों को फिर से कैलकुलेट करना होगा. यहां, सिर्फ़ टेक्स्ट की y-स्थिति को बदला गया है, लेकिन 3D में काम करने का एक मौका यह है कि हम टेक्स्ट को z-निर्देश में धकेल सकते हैं और खींच सकते हैं. साथ ही, x, y और z ऐक्सिस को घुमा भी सकते हैं.
नतीजा
WebVR में टेक्स्ट और लेआउट को बनाने में काफ़ी लंबा सफ़र तय करना होता है. इसके बाद ही, उन्हें एचटीएमएल और सीएसएस की तरह इस्तेमाल किया जाता है. साथ ही, उन्हें बड़े पैमाने पर इस्तेमाल किया जाता है. हालांकि, अभी भी ये समाधान काम कर रहे हैं और WebVR में पारंपरिक एचटीएमएल वेब पेज के मुकाबले बहुत कुछ किया जा सकता है. WebVR आज भी मौजूद है. कल बेहतर टूल उपलब्ध हो सकते हैं. तब तक, इसे आज़माएं और प्रयोग करें. एक जैसे फ़्रेमवर्क के बिना तरक्की करने से, ज़्यादा यूनीक प्रोजेक्ट बनते हैं और यह रोमांचक भी होता है.