Kinect सेंसर का उपयोग करके एक इंटरैक्टिव 3D HTML5 एप्लिकेशन बनाने की विशेषताएं।
कार्य
3 डी डिस्प्ले पर हमारी महान मातृभूमि के विभिन्न हिस्सों में कैप्चर की गई 3 डी तस्वीरें और वीडियो प्रदर्शित करें, ताकि प्लेबैक तब शुरू हो जब उपयोगकर्ता स्क्रीन के सामने रखे गए नक्शे पर एक निश्चित भौगोलिक क्षेत्र में प्रवेश करता है। आदर्श रूप से, स्टैंड में 6 3D डिस्प्ले और 3 Kinect सेंसर शामिल होने चाहिए जो स्क्रीन के सामने भू-दृश्य के प्रसार को अधिकतम करें और कई उपयोगकर्ताओं को अपने डिस्प्ले को नियंत्रित करने की अनुमति दें।
निर्णय
चर्चा के दौरान भी, हमने पूर्ण विकसित त्रिविम (गैर-एनाग्लिफ़िक) 3 डी सामग्री को प्रदर्शित करने के मुद्दे का पता लगाया। संभावित कार्यान्वयन मार्गों में एनवीडिया 3 डी विजन तकनीक थी, जिसके चालक और फ़ायरफ़ॉक्स के लिए ऐड-ऑन ने 3 डी प्रदर्शित करना संभव बना दिया।
3 डी डिस्प्ले की तकनीकों के बीच, हम सक्रिय 3 डी (शटर ग्लास + 100 हर्ट्ज फ्रेम-बाय-फ्रेम स्कैनिंग) की तुलना में कम खर्चीले में बंद हो गए, अर्थात्, बाएं और दाएं चैनलों के पृथक्करण की प्रगतिशील तकनीक के साथ निष्क्रिय ध्रुवीकृत 3 डी तकनीक। स्क्रीन के सापेक्ष सिर को घुमाते और मोड़ते समय ध्रुवीकरण को सबसे उपयुक्त चुना गया।
यह ध्यान दिया जाना चाहिए कि एनवीडिया 3 डी विज़न ड्राइवर सर्वाहारी निकला और किसी भी प्रकार के प्रदर्शन के साथ काम करने में सक्षम था (कम से कम हमारे निपटान में उपलब्ध अधिकांश के साथ)। हालांकि, स्लैड एपीआई, अस्थिरता, और एनवीडिया की वाणिज्यिक नीतियों ने जल्दी से पसंद पर संदेह डाला। तो अपने ड्राइवर को बनाने के लिए विचार आया। और तर्क इस प्रकार थे:
- बाएं और दाएं चैनलों के लाइन आउटपुट के साथ प्रौद्योगिकी का अर्थ है दो छवियों की उपस्थिति डॉक-बाय-साइड (ऊपर-नीचे या बाएं-दाएं),
- यदि आप "बाएं / दाएं" लाइनों में फुलएचडी साइड-बाय-साइड छवि पर बारी-बारी से पिक्सेल को फिर से जोड़ते हैं, और एलसीडी मैट्रिक्स पर "पिक्सेल से पिक्सेल" रेखापुंज का सख्त प्रदर्शन भी प्राप्त करते हैं, तो आप बिना ड्राइवर के 3 डी डिस्प्ले हासिल कर सकते हैं।
पक्ष की ओर से
जिल्द बनाना
तो तकनीकी अंतर्ज्ञान हमें शादियों तक ले गया। आरंभ करने के लिए, हमने थ्रीजीएस फ्रेमवर्क के उदाहरणों के साथ वेबजीएल के लिए जीएलएसएल का परीक्षण किया। शेडर को कई पंक्तियों में लिखा गया था: रेखा की समता की जाँच, यदि विषम - बाईं तस्वीर से पिक्सेल प्रदर्शित करें, यहां तक कि - दाईं ओर से। यह सब अच्छी तरह से शुरू हुआ और एचडी पर तेजी से काम किया - लगभग 30 एफपीएस (विंडोज 7, क्रोम, एनवीडिया जीपीयू)। फुलएचडी वीडियो ने इस आंकड़े को लगभग 12 एफपीएस तक घटा दिया। प्रोफाइलर ने एक अड़चन दिखाई - प्रत्येक ड्रॉ कॉल से पहले एक विशाल बफर को एक बनावट के साथ स्थानांतरित करना आवश्यक था जो प्रत्येक फ्रेम में बदल गया। और "मक्खी पर" को हराना संभव नहीं था। फिर फ्लैश बचाव में आया और कुख्यात पिक्सेल बेंडर (2 डी) तकनीक। यह अनिवार्य रूप से एक ही GLSL सिंटैक्स है, बस थोड़ा अलग विनिर्देश है। कई घंटों के लिए हमने 3 डी प्लेयर का एक फ्लैश घटक लागू किया, जिसमें एक साधारण जेएस एपीआई था, जितना संभव हो HTML5 <video> के करीब। इसलिए हमारे पास जेएस रैपर में 3 डी प्लेयर के दो कार्यान्वयन हैं। फुलएचडी वीडियो पर एक फ्लैश 3 डी प्लेयर के साथ टेस्ट ने अधिक अच्छे परिणाम दिखाए ~ 25fps। इसलिए हमने नम को हराया।
WebGL
#ifdef GL_ES precision highp float; #endif uniform sampler2D Sample0; varying vec2 vUv; void main () { vec3 colour; float row = ceil(vUv.y * 1080.0); vec2 pixel; float mod = mod(row, 2.0); if (mod == 0.0) { pixel = vec2(vUv.x / 2.0, vUv.y); } else { pixel = vec2(0.5 + vUv.x / 2.0, vUv.y); } colour = texture2D(Sample0, pixel).xyz; gl_FragColor.xyz = colour; gl_FragColor.w = 1.0; }
पिक्सेल बेंडर
<languageVersion: 1.0;> kernel interlace < namespace : "Interlace 3D"; vendor : "NMT"; version : 2; description : "Create interlaced video from side-by-side"; > { input image4 oImage; output float4 outputColor; parameter bool swapEyes < description: "swap eyes"; defaultValue: false; >; void evaluatePixel() { float2 relativePos = outCoord(); float modulus = mod(relativePos.y, 2.0); if (swapEyes && modulus <= 1.0 || !swapEyes && modulus >= 1.0) { relativePos.x = 960.0 + relativePos.x / 2.0; } else { relativePos.x = relativePos.x / 2.0; } outputColor = sampleLinear( oImage, relativePos ); } }
और फिर यह आसान है! हमने WebSocket के माध्यम से JS के साथ Kinect tcp-server का एक बंडल लागू किया। हमने कई क्षेत्रों के लिए Kinect दृश्यता क्षेत्र में उपयोगकर्ता ट्रैकिंग को अनुकूलित किया, प्रभावों पर खराब कर दिया, डिज़ाइन बनाया और
यह काम किया !
परिणाम
चालक बनाम शेडर
- शेडर तकनीक का लाभ 3 डी सामग्री को न केवल एक फोटो या वीडियो में पूर्व-रेंडर करने के लिए प्रदर्शित करने की क्षमता है, बल्कि स्टीरियोस्कोपिक मोड में रनटाइम 3 डी दृश्य भी है, अर्थात एचटीएमएल 5 में सच 3 डी / वेबलॉग या फ्लैश / पिक्सेल बेंडर / स्टेज 3 डी एप्लिकेशन एक ब्राउज़र में; हालाँकि, बाएं और दाएं चैनलों को अलग करने के लिए प्रगतिशील प्रौद्योगिकी वाला एक डिस्प्ले इस दृष्टिकोण के लिए महत्वपूर्ण है।
Kinect
- हेरफेर की प्रक्रिया में उपयोगकर्ता के लिए उनकी छवि या हाथों की छवि को देखना महत्वपूर्ण है,
- भौतिक नियमों की नकल के साथ प्राकृतिक इशारों की आवश्यकता होती है (जड़ता, टकराव),
- खुली जगह (लगभग हर स्थिति में) "हर कोई यहाँ जाता है"
- tcp का उपयोग करना केवल JS अनुप्रयोगों के लिए एक सीमा है, यदि आप UDP (फ़्लैश) का खर्च उठा सकते हैं, तो इसका उपयोग मेमोरी लीक और कम एफपीएस के साथ समस्याओं से बचने के लिए कर सकते हैं, हालांकि UDP निर्माण के समय क्रोम कैनरी में उपलब्ध था।
3 डी डिस्प्ले
- पूर्ण स्टीरियो प्रभाव प्राप्त करने के लिए, वीडियो कार्ड-डिस्प्ले बंडल में पिक्सेल-टू-पिक्सेल डिस्प्ले को कॉन्फ़िगर करना महत्वपूर्ण है, यह वीडियो कार्ड ड्राइवरों और डिस्प्ले सेटिंग्स में सभी प्रकार के स्केलिंग को रीसेट करने के साथ-साथ मॉनिटर द्वारा समर्थित सटीक रिज़ॉल्यूशन द्वारा प्राप्त किया जाता है।
- स्क्रीन पर वस्तुओं के लिए गहराई का आदेश देने के नियमों का पालन करना महत्वपूर्ण है: नियंत्रण और पाठ जानकारी की एक परत, 3 डी ऑब्जेक्ट्स की एक परत, एक पृष्ठभूमि, इन संस्थाओं की अतिव्यापी गहराई गंभीर रूप से धारणा को प्रभावित करती है और थकान का कारण बन सकती है,
- चश्मा चुनना महत्वपूर्ण है ताकि वे अच्छी तरह से विपरीत चैनलों (बाएं से दाएं और इसके विपरीत) को कवर करें - यहां तक कि 3 डी पैनल के निर्माता से चश्मा भी बैंगनी भूत की छवि के रूप में विपरीत चैनल से गुजरे, हमें 3 डी स्क्रीन एलजी 55 + + फिलिप्स चश्मा की काफी उच्च गुणवत्ता वाली जोड़ी मिली।
- स्क्रीन पर बैकलाइटिंग का ध्यान रखें - यह वहां नहीं होना चाहिए, यह आपको 3 डी धारणा से बहुत विचलित करता है - यह छवि की एक अतिरिक्त परत जैसा दिखता है।