WebVR में टेक्स्ट रेंडर करना

साइट देखें

(https://with.in/) में, कहानी सुनाने की कला का इस्तेमाल किया जाता है वर्चुअल रिएलिटी. इसलिए, जब टीम ने WebVR के बारे में सुना 2015 में हमें इसकी क्षमता के बारे में जानना था. आज, वह रुचि हमारे वेब प्लैटफ़ॉर्म के यूनीक सबडोमेन में मेनिफ़ेस्ट करता है, https://vr.with.in/. वीआर की सुविधा वाले ब्राउज़र के ज़रिए कोई भी व्यक्ति ये काम कर सकता है: साइट पर जाएँ, एक बटन पर क्लिक करें और एक हेडसेट को फेंककर, अपने बारे में गहराई से जानें वीआर फ़िल्मों का पोर्टफ़ोलियो है.

फ़िलहाल, इसमें Daydream View पर Chrome इस्तेमाल करने के अलावा और भी चीज़ें शामिल हो सकती हैं. इसके लिए आपके डिवाइस और सिर पर पहनने वाले डिसप्ले की जानकारी से चेक आउट करने की सुविधा https://webvr.info/.

अन्य वर्चुअल रिएलिटी वाले खास रेंडरिंग एनवायरमेंट की तरह, वेब मुख्य तौर पर, यह सीन के तीन डाइमेंशन पर निर्भर करता है. यह सीन में कैमरा, आपका नज़रिया, और कई ऑब्जेक्ट मौजूद हों. मैनेज करने में मदद करने के लिए इस सीन, कैमरा, और ऑब्जेक्ट को इकट्ठा करते समय, Three.js, जो थ्रॉ करने के लिए <canvas> एलिमेंट का इस्तेमाल करती है के रेंडर होने में ज़्यादा समय लग सकता है. इसमें कई उपयोगी Three.js ऐड-ऑन मौजूद हैं WebVR में अपने सीन को देखने लायक बनाएं. मुख्य दो विकल्प, THREE.VREffect हर आंख के लिए एक व्यूपोर्ट बनाने और THREE.VRControls का अनुवाद करने के लिए (जैसे कि रोटेशन और पोज़िशन सिर पर पहनने वाला डिसप्ले सेट अप कर सकते हैं. इसके कई उदाहरण हैं इसे कैसे लागू किया जाए. ज़्यादा जानकारी के लिए Three.js WebVR के उदाहरण शुरू करने के तरीकों के बारे में जानें.

WebVR के बारे में ज़्यादा जानकारी लेने पर हमें एक समस्या का सामना करना पड़ा. अगर हम वेब की सामग्री में, टेक्स्ट उसका अहम हिस्सा होता है. बहुमत होने पर हमारा कॉन्टेंट वीडियो आधारित है. साइट के अंदर टेक्स्ट, कॉन्टेंट के आस-पास मौजूद होता है; यूज़र इंटरफ़ेस के साथ-साथ फ़िल्म या उससे जुड़ी फ़िल्मों के बारे में अतिरिक्त जानकारी टेक्स्ट से तैयार किया जा सकता है. इसके अलावा, यह पूरा टेक्स्ट डीओएम में बनाया जाता है. हमारे वेबवीआर एक्सप्लोरेशन और https://vr.with.in/ यहां उपलब्ध है <canvas>.

मेरे पास कौन-कौनसे विकल्प हैं?

अच्छी बात यह है कि ऐसा करने के लिए काम किया जा रहा है. हमारी रिसर्च में हमने 3D में टेक्स्ट को रेंडर करने के कई असरदार <canvas> एलिमेंट में मौजूद एनवायरमेंट. नीचे उन कुछ का मैट्रिक्स है, जो हमें मिले इनमें से हर एक के लिए इसके फ़ायदे और नुकसान बताए गए हैं:

हमारा निर्णय: SDF बिटमैप फ़ॉन्ट

ctx.fillText() के साथ 2D कैनवस पर टेक्स्ट रैपिंग, अक्षरों के बीच की दूरी, और लाइन का इस्तेमाल किया जा सकता है ऊंचाई, लेकिन ओवरफ़्लो कट जाता है, और यदि आप बहुत अच्छी तरह से ज़ूम इन करते हैं तो टेक्स्ट धुंधला हो जाएगा दूर. कैनवस टेक्सचर का साइज़ बढ़ाया जा सकता है, लेकिन उससे ज़्यादा अगर टेक्सचर बहुत बड़ा है, तो टेक्सचर के साइज़ या परफ़ॉर्मेंस की सीमा पर असर पड़ सकता है.

निकाला गया 3D टेक्स्ट आवश्यक रूप से ट्राईऐंगुलेटेड वेक्टर टेक्स्ट जैसा ही है, लेकिन में गहराई और संभवतः एक बेवल है इसलिए इसमें ज्यामिति का कम से कम दुगुना है. इनमें से कोई एक ये टाइटल या लोगो के लिए छोटी मात्रा में काम कर सकते हैं, लेकिन इस तरह परफ़ॉर्म नहीं करेंगे और न ही इसमें टाइपोग्राफ़ी की सुविधा होती है.

बिटमैप फ़ॉन्ट में हर वर्ण में एक क्वाड (दो त्रिभुज) का इस्तेमाल होता है. इसलिए, वे कम इस्तेमाल करते हैं और इसकी तुलना में बेहतर प्रदर्शन करता है ट्राऐंगुलेटेड वेक्टर. ये अब भी रास्टर पर आधारित हैं, क्योंकि इनमें टेक्सचर मैप स्प्राइट का इस्तेमाल किया जाता है. हालांकि, इसे एसडीएफ़ के साथ इस्तेमाल किया जाता है शेडर, मूल रूप से रिज़ॉल्यूशन-इंडिपेंडेंट हैं, इसलिए वे 2D से अच्छे दिखते हैं कैनवस बनावट. मैट डेसलॉरियंस तीन-bmfont-text में, टेक्स्ट को रैप करने के लिए टाइपोग्राफ़िक की भरोसेमंद सुविधाएं भी शामिल हैं, अक्षरों के बीच की दूरी, लाइन की ऊंचाई, और अलाइनमेंट. ओवरफ़्लो नहीं होता. फ़ॉन्ट साइज़ को स्केल से कंट्रोल किया जाता है. हमने यह रास्ता इसलिए चुना क्योंकि इससे हमें बेहतरीन डिज़ाइन के साथ डिज़ाइन के लिए सबसे अच्छे विकल्प. माफ़ करें, यह ऐसा नहीं था इस्तेमाल करना आसान है, इसलिए हम इन चरणों के बारे में जानेंगे. उम्मीद है कि हम साथी की WebVR में काम करने वाले डेवलपर के लिए.

1. बिट मैप फ़ॉन्ट (.png + .fnt) जनरेट करें

Hiero, बिटमैप फ़ॉन्ट पैकिंग है एक ऐसा टूल है जो Java के साथ चलता है. Hiero के दस्तावेज़ में यह नहीं बताया गया है कि बिना किसी मुश्किल बिल्ड प्रोसेस के भी इसे चलाया जा सकता है. सबसे पहले, Java इंस्टॉल करें, अगर आपने पहले से नहीं किया है. इसके बाद, अगर Runnable-hiero.jar पर दो बार क्लिक करने से काम नहीं होता Hiero को खोलें, तो कंसोल में इस निर्देश की मदद से इसे चलाने की कोशिश करें:

java -jar runnable-hiero.jar

Hiero के चालू होने के बाद, .ttf या .otf डेस्कटॉप वाला फ़ॉन्ट खोलें और कोई अतिरिक्त फ़ॉन्ट इस्तेमाल करें जिन वर्णों को आप शामिल करना चाहते हैं, इफ़ेक्ट लागू करने के लिए रेंडरिंग को Java में बदलें, साइज़ को बढ़ाना होगा, ताकि आपके वर्ण ग्लिफ़ कैश मेमोरी के पूरे स्क्वेयर को भर सकें, दूरी फ़ील्ड इफ़ेक्ट जोड़ें, दूरी फ़ील्ड के स्केल और स्प्रेड को अडजस्ट करें. कॉन्टेंट बनाने स्केल वैल्यू, रिज़ॉल्यूशन की तरह होती है. इमेज का साइज़ जितना ज़्यादा होगा, वह उतना ही कम धुंधला होगा. लेकिन Hiero को प्रीव्यू रेंडर करने में उतना ज़्यादा समय लगेगा. इसके बाद, अपने बिट मैप फ़ॉन्ट. यह एक बिटमैप फ़ॉन्ट जनरेट करता है, जिसमें .png इमेज और एंजेलकोड .fnt फ़ॉन्ट की जानकारी वाली फ़ाइल.

2. एंजेल कोड को JSON में बदलें

अब जब बिटमैप फ़ॉन्ट जनरेट हो चुका है, तो हमें उसे अपने मैट डेसलॉरियर्स के साथ JavaScript ऐप्लिकेशन load-bmfont npm पैकेज सबमिट करें.

हम load-bmfont को ब्राउज़र बना सकते हैं और फ़्रंट एंड पर उसका इस्तेमाल कर सकते हैं, लेकिन इसके बजाय हम चलने वाला है load-bmfont.js को Hiero'sangelCode .fnt को कन्वर्ज़न और सेव करने के लिए नोड .json फ़ाइल:

npm install
node load-bmfont.js

अब हम load-bmfont को बायपास कर सकते हैं और बस .json फ़ॉन्ट फ़ाइल.

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. ब्राउज़रीफ़ाई तीन-bmfont-टेक्स्ट

फ़ॉन्ट लोड हो जाने के बाद, मैट का तीन-bmfont-text, आराम. हम अपने ऐप्लिकेशन के लिए नोड का इस्तेमाल नहीं कर रहे हैं. इसलिए, हम ब्राउज़राइज़ करना three-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/ साइन किए गए दूरी फ़ील्ड शेडर का असर देखने के लिए.

5. इस्तेमाल

सुविधा के लिए, मैंने एक TextBitmap रैपर क्लास ब्राउज़रिफ़ाइड तीन-bmfont-text के लिए.

<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 में segment.js रेकास्ट इंटरैक्शन के लिए, न दिखने वाला हिटबॉक्स भी शामिल है उन्हें माउस, कैमरा या हाथ से ट्रैक किए जाने वाले मोशन कंट्रोलर के ज़रिए, जैसे कि Oculus Touch या Vive कंट्रोलर के तौर पर. टेक्स्ट बदलने पर, हिटबॉक्स का साइज़ अपने-आप अपडेट हो जाता है के विकल्प.

तीन.js सीन में Bmtext.group जोड़ा गया है. अगर आपको बच्चों की प्रोफ़ाइल का ऐक्सेस चाहिए / Object3D है, तब टेक्स्ट के लिए सीन ग्राफ़ इस तरह दिखेगा:

6. json को छोटा करना और xoffsets में बदलाव करना

अगर आपका कर्निंग लुक बंद है, तो हो सकता है कि आपको json में xoffsets में बदलाव करना पड़े. चिपकाने के लिए json को Jsbeautifier.org में जोड़कर फ़ाइल का छोटा वर्शन भी बताया जा सकता है.

xoffset एक वर्ण के लिए आवश्यक रूप से वैश्विक कर्निंग है. कर्निंग दो लोगों के लिए है एक-दूसरे के बगल में दिखने वाले खास वर्ण. डिफ़ॉल्ट मान कर्निंग अरे से कोई फ़र्क़ नहीं पड़ता और इसे मैनेज करना बहुत मुश्किल होगा बदलाव करें, ताकि आप json का फ़ाइल साइज़ कम करने के लिए, उस कलेक्शन को खाली कर सकें. इसके बाद कर्निंग के लिए xoffsets में बदलाव करो.

सबसे पहले आपको यह पता लगाना होगा कि JSON. three-bmfont-text-bundle.js में, लाइन 240 के बाद console.log डालें:

    var id = text.charCodeAt(i)
    // console.log(id);

इसके बाद, dat.खरीदने पर टेक्स्ट फ़ील्ड में टाइप करें https://vr.with.in/archive/text-sdf-bitmap/ और किसी वर्ण से जुड़े आईडी को ढूंढने के लिए कंसोल देखें.

उदाहरण के लिए, हमारे बिटमैप फ़ॉन्ट में, "j" लगातार दाईं ओर बहुत दूर है. यह वर्ण आईडी 106 है. इसलिए, json में "id": 106 को ढूंढें और इसके xoffset को -1 से बदलें -10 तक.

7. लेआउट

अगर आपके पास टेक्स्ट के एक से ज़्यादा ब्लॉक हैं और आपको उन्हें ऊपर से नीचे की ओर फ़्लो करना है, तो एचटीएमएल में, सब कुछ मैन्युअल रूप से सेट होना चाहिए. यह बिलकुल सटीक जगह पर होना चाहिए CSS के साथ प्रत्येक डॉम एलीमेंट का उपयोग करते हैं. क्या आप सीएसएस में ऐसा करने के बारे में सोच सकते हैं?

    * { 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 आज मौजूद है. कल हमें शायद बेहतर टूल मिलेंगे. तब तक, इसे आज़माएं और प्रयोग. हर जगह उपलब्ध फ़्रेमवर्क के बिना डेवलप करने से, हर पेज पर अपनी और यह रोमांचक है.