🤾🏿 👎 🤢 जावास्क्रिप्ट संवर्धित वास्तविकता

यदि चित्र दिखाई नहीं देता है, तो कृपया इसके बारे में लेखक को लिखें

JSARToolkit एक JavaScript लाइब्रेरी है, जिसे FLARToolkit (Flash) के साथ पोर्ट किया गया है और AR मार्कर को वीडियो पर ट्रैक करने के लिए डिज़ाइन किया गया है। ARToolKit मार्करों से डेटा को 3 डी निर्देशांक में परिवर्तित करता है, उनका उपयोग करके आप एक सपाट सतह पर छवियों या 3 डी ऑब्जेक्ट को ओवरले कर सकते हैं।

आपने शायद पहले से ही इस्मारी हिककिनन डेमो - रीमिक्सिंग रियलिटी पर जेएसरुलकिट को एक्शन में देखा है।
इल्मरी डेमो मोज़िल के " वेब ओ 'वंडर " का हिस्सा है, जो फ़ायरफ़ॉक्स 4 में शामिल होने के लिए नई तकनीकों को दिखाने वाली साइट है।

HTML5 क्लिप पर शोध करें

ग्राहक ने हमें कार्य निर्धारित किया - ऑनलाइन HTML5 क्लिप के लिए JSARToolkit का उपयोग करने की संभावना का मूल्यांकन करने के लिए। (हमें केवल उन उपयोगकर्ताओं पर विचार करने के लिए कहा गया था जो फ़ायरफ़ॉक्स और क्रोम के नवीनतम संस्करण का उपयोग करते हैं)
यहाँ कुछ प्रश्न दिए गए हैं जिनका हम उत्तर देना चाहेंगे:
- क्या स्लो कंप्यूटर पर प्रोसेसिंग तेज होगी?
- एक ही समय में हम कितने AR मार्कर ट्रैक कर सकते हैं?
- आप मार्कर को कितनी तेजी से आगे बढ़ा सकते हैं ताकि यह अन-ट्रैक हो सके?
- सबसे बड़ी दूरी क्या है जिस पर कैमरा मार्कर को ट्रैक कर सकता है?

इन सवालों के जवाब, स्रोत कोड और डेमो नीचे पाए जा सकते हैं।

वीडियो रिकॉर्डिंग

मैंने परीक्षण वीडियो रिकॉर्ड करने के लिए Flip Ultra HD का उपयोग किया। फ्लिप अल्ट्रा एचडी वीडियो की गुणवत्ता स्वीकार्य है, यह देखते हुए कि यह एक पेशेवर कैमरा नहीं है। हम जानते थे कि हमें इस तरह के कैमरे से कुछ भी अच्छा नहीं मिलेगा, लेकिन यह परीक्षण के लिए पर्याप्त था। इस तरह के कम-गुणवत्ता वाले कैमरे के साथ मुख्य समस्या शटर गति को स्विच करने में असमर्थता है।

इसका मतलब था कि अगर हम बहुत तेजी से आगे बढ़े तो धुंधले AR टैग के बारे में हम कुछ नहीं कर सकते थे। हम आश्चर्यचकित थे कि हम मार्कर को कितनी जल्दी खो देते हैं, क्योंकि हम अगल-बगल से चले जाते हैं।
फिर भी, हमें यकीन है कि जब उच्च शटर गति वाले कैमरे का उपयोग करके एक अच्छी तरह से रोशनी वाले स्टूडियो में शूटिंग की जाती है, तो बहुत कम अपठनीय एआर निशान होंगे।

प्रिंटिंग ए आर मार्कर

मैंने कुछ मार्कर छपवाए जो JSARToolkit के साथ आए और रसोई में टेस्ट शॉट्स लेना शुरू किया। मुझे यह भी उम्मीद नहीं थी कि सब कुछ पहली बार काम करेगा, लाइब्रेरी में जोड़ा गया प्रत्येक वीडियो काम कर रहा है।

कुछ परिणाम उच्च-गुणवत्ता वाले नहीं थे, लेकिन मैं दोहराना चाहता हूं कि हमारे कैमरे की गुणवत्ता पेशेवर लोगों की तुलना में खराब थी। हमने व्यक्तिगत मार्करों पर ध्यान केंद्रित किए बिना वीडियो शूट किए, जो उनकी ट्रैकिंग में सटीकता जोड़ सकते हैं।

VP8 WebM में रीकोडिंग वीडियो

हमने एच .264 एमपीईजी प्रारूप में वीडियो रिकॉर्ड किया। एचटीएमएल 5 वीडियो के साथ काम करने के लिए हमें वीडियो को वेबएम में बदलना होगा। पहले वीडियो डिकोडर मैंने कोशिश की Ffmpeg2Theora, नाम से देखते हुए, यह वेबएम में वीडियो को एन्कोड करने वाला था। हालांकि, मुझे एहसास हुआ कि Ffmpeg2Theora के साथ समस्याएं हैं। जब मैंने वीडियो को लिनक्स के तहत एनकोड किया, तो यह विंडोज़ पर नहीं चल सकता है और इसके विपरीत।

अन्य एन्कोडर का परीक्षण करने के बाद, मैं Miro वीडियो कनवर्टर पर बस गया। दुर्भाग्य से, मिरो कई वीडियो को संसाधित करने में सक्षम नहीं है, लेकिन यह वीडियो जो सभी ओएस और ब्राउज़रों पर काम करता है।

लपेटो सृजन

मैं एक सरल JSARToolkit- आधारित एपीआई लिखना चाहता था जिसका पुन: उपयोग किया जा सके। कुछ ऐसा जो मैं एक और जावास्क्रिप्ट लाइब्रेरी से जोड़ सकता था, उदाहरण के लिए पॉपकॉर्न.जेएस। इल्मरी डेमो में मुझे मिला कोड विशिष्ट था। चूंकि कोड टिप्पणियों से भरा नहीं था, इसलिए मुझे यह समझने में समस्या थी कि क्या चल रहा है। मुझे प्रयोग करना था। मैं JSARToolkit के लिए एक आवरण लिखने का एक आसान तरीका लेकर आया था।

JSARToolkit रैपर का उपयोग करने में पहला कदम अपने ट्रैकर को स्थापित करना है। ऐसा करने का एक उदाहरण:

//        var myTracker = jsartoolkit.tracker({ src : 'my-video.webm', //    autoplay : true, //      repeat : true, //   volume : 0, //    target : doc.getElementById('DOMTarget'), // DOM element     canvas width : 720, //   height : 360, //   threshold : 100, //    ratio : 0.5, //    canvas   (1 = 11  ) debug : false //     -     });

एक बार ट्रैकर बनाए जाने के बाद, अगला चरण था मार्करों में सामग्री जोड़ना।
हमने एक स्थिर छवि जोड़ी, और फिर एक 3D ऑब्जेक्ट Blender3D से निर्यात किया:

  //     myTracker.marker(0).image('my-image_01.png'); //   Blender3D myTracker.marker(2).model('HTML5_Logo001');

यह उदाहरण दिखाता है कि इसे बनाए जाने के बाद मार्कर गुण कैसे अपडेट करें:

  //    0 myTracker.marker(0) .scale(1) .axis(0, 0, 1) .angle(0) .position(0,0,0) ;

आप JSARToolkit-Wrapper का उपयोग करके अधिक जटिल व्यवहार भी जोड़ सकते हैं। निम्न उदाहरण दर्शाता है कि वास्तविक समय में मार्कर गुणों को कैसे अपडेट किया जाए। यह कोड स्पिन और पल्स के पहले मार्कर का कारण बनता है:

  //    Marker_0   var interval = global.setInterval( function(){ var date = + new Date(), scl = 1.5 + (Math.sin( date/200 ) * 0.5), axs = Math.cos( date/300 ), posX = Math.sin( date/300 ), posY = Math.cos( date/300 ) ; myTracker.marker(0) .scale(scl) .axis(0, axs, 0) .position(posY, posX, 0) .angle(date / 230) ; }, 20);

वीडियो ट्रैकर तक पहुंचने के लिए, आप कुछ इस तरह से कर सकते हैं:

  //        currentTime myTracker.video.currentTime = 1;

सवालों के जवाब

क्या धीमी गति से कंप्यूटर पर प्रसंस्करण तेज होगा?
वीडियो प्रसंस्करण और मार्कर स्थिति बहुत तेज है। मैंने लगभग 1 मार्कर और 100 मार्करों को ट्रैक करने में अंतर नहीं देखा। मुख्य बोझ वीडियो पर सामग्री को ओवरले कर रहा है।

एक समय में हम कितने AR मार्कर ट्रैक कर सकते हैं?
मैंने बिना किसी समस्या के एक ही समय में 100 मार्करों को ट्रैक किया।

आप मार्कर को कितनी तेजी से आगे बढ़ा सकते हैं ताकि यह अन-ट्रैक हो सके?
यह सब आपके कैमरे पर निर्भर करता है और आप कैसे शूट करते हैं। यदि हम एक उच्च शटर गति के साथ एक कैमरा का उपयोग करते हैं, जैसे कि रिकॉर्डिंग खेलों के लिए उपयोग किया जाता है, तो हमें न्यूनतम मार्कर (यदि बिल्कुल भी) मिलेंगे और उन्हें बहुत अच्छी तरह से ट्रैक किया जाएगा।

सबसे बड़ी दूरी क्या है जिस पर कैमरा मार्कर को ट्रैक कर सकता है?
फिर, यह सब कई कारकों पर निर्भर करता है - कैमरे / वस्तुओं की गति और प्रकाश की गति। एक अच्छी तरह से रोशनी वाले कमरे में (पेशेवर स्टूडियो नहीं)। मैं 720p के संकल्प में लेंस की दिशा में 10 मीटर से मार्करों को ट्रैक करने में कामयाब रहा। कैमरे का रिज़ॉल्यूशन जितना अधिक होगा, ट्रैकिंग मार्करों की गुणवत्ता उतनी ही अधिक होगी। ध्यान देने योग्य एक बात: आप अपने वीडियो को 1080 रिज़ॉल्यूशन में शूट कर सकते हैं, ट्रैकिंग परिणामों को कैश कर सकते हैं और क्लाइंट साइड पर प्रक्रिया की संख्या कम कर सकते हैं। आप अनुपात को स्पिन कर सकते हैं यदि कुछ खराब तरीके से ट्रैक किया गया है या यदि फ्रेम खराब रूप से जलाया गया है तो थ्रेसहोल्ड।

निष्कर्ष

आकर्षण आते हैं

- लागू करने में आसान
- इष्टतम ट्रैकिंग एल्गोरिदम, प्रोसेसर को लोड नहीं करता है
- आप कम से कम 100 मार्करों को ट्रैक कर सकते हैं
- ब्लेंडर 3 डी से सीधे निर्यात कर सकते हैं
- आप किसी भी सामग्री को ओवरले कर सकते हैं: चित्र, वीडियो, 3 डी ऑब्जेक्ट

विपक्ष

- स्रोत पुस्तकालय कोड में बहुत सारे वैश्विक चर
- आपको ब्लेंडर 3 डी से थोड़ा निर्यात कसने की आवश्यकता है
- कई वीडियो का एक साथ प्रसंस्करण समर्थित नहीं है
- GetElementById () के लिए बहुत अधिक महंगा कॉल

यदि आप इस पुस्तकालय का उत्पादन पर उपयोग करना चाहते हैं या इसे एक बड़े पुस्तकालय का हिस्सा बनाना चाहते हैं तो बहुत सारे काम करने की आवश्यकता है। लेकिन बड़ी संख्या में परीक्षणों और प्रयोगों के बाद, मैं कहूंगा कि यह कोड आश्चर्यजनक रूप से काम करता है!

उदाहरण, परीक्षण और लिंक

JSARToolkit-Wrapper डेमो
JSARToolkit वीडियो टेस्ट
JSARToolkit मार्कर छवियाँ
जेसर्टूलकिट-व्रपर गीथब पर

देखने के लिए आपको फ़ायरफ़ॉक्स 4 या क्रोम का नवीनतम संस्करण चाहिए।

अनुवादक से

दुर्भाग्य से, लेखक ने अभी तक एक डेमो पोस्ट नहीं किया है। एआर का उपयोग उस रूप में जिसमें यह अनुवाद में प्रस्तुत किया गया है, बहुत विस्तृत नहीं है, लेकिन एचटीएमएल 5 डिवाइस एलीमेंट ( एक अन्य लेख ) के आगमन के साथ, सब कुछ बदल सकता है।
एआर जल्द ही आपके ब्राउज़र में;)

जावास्क्रिप्ट संवर्धित वास्तविकता - JSARToolkit परीक्षण