WebGLU: WebGL के साथ कार्य को सरल बनाना

ब्राउज़र में 3 डी एक बड़ी समस्या हुआ करती थी। उन्होंने ब्राउज़र में त्रि-आयामी गतिशील तीन-आयामी ग्राफिक्स बनाने के लिए क्या नहीं किया: SVG में छद्म-3D का उपयोग करना, कैनवास में निर्माण करना, फ्लैश का उपयोग करना ... हालाँकि, प्रगति बंद नहीं होती है: आखिरकार, सभी आधुनिक ब्राउज़र OpenGL (OpenGL ES) के हल्के संस्करण का समर्थन करने लगे 2.0) - वेबजीएल। यह एक युवा तकनीक है, यह केवल एक वर्ष से थोड़ा अधिक है। हालाँकि, अब आप सभी प्रकार के ब्राउज़र गेम और उदाहरणों में इसकी शक्ति का मूल्यांकन कर सकते हैं।

इस तकनीक के तुलनात्मक युवाओं के कारण, इसके साथ काम करने के लिए इतने सारे मैनुअल नहीं हैं। आप यहां उसके साथ काम करने के बारे में कुछ पढ़ सकते हैं ( यहां - रूसी में अनुवाद)। यहां आप वेबजीएल की मूल बातें के बारे में कुछ सीख सकते हैं।

WebGL के साथ काम करने की सुविधा के लिए, कई पुस्तकालय विकसित किए गए हैं (हालांकि उनमें से अधिकांश अभी भी काफी कच्चे हैं)। उनमें से एक का आवेदन - वेबग्लू - एक एकल स्रोत-टॉर्च द्वारा प्रकाशित एक साधारण दृश्य बनाने के लिए, और यह लेख समर्पित है। यहां आप एक उदाहरण देख सकते हैं, और यहां से इसे अपने मशीन पर चलाने के लिए पूर्ण संग्रह डाउनलोड कर सकते हैं।

सबसे पहले, ओपनजीएल और वेबजीएल के बीच अंतर का थोड़ा अनुस्मारक। चूंकि WebGL GLES पर आधारित है, इसलिए यह तकनीक OpenGL से काफी नीच है: इसमें कई सुविधाजनक एक्सटेंशन (ARB, आदि) नहीं हैं, कोई अंतर्निहित प्रकाश समर्थन नहीं है, और यहां तक ​​कि GL_QUADS भी इसमें समर्थित नहीं है ... हालाँकि, आप क्या कर सकते हैं: कोई और अधिक तकनीक नहीं, ऐसा कोई भी नहीं है जो आपको थर्ड-पार्टी प्लग इन के बिना वेब पर 3 डी लागू करने की अनुमति देता है।

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

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

इसलिए, WebGLU के साथ काम करना शुरू करने के लिए, हमें webglu.js स्क्रिप्ट को जोड़ने और इसे आरंभ करने की आवश्यकता है:

<script type="text/javascript" src="./src/webglu.js"></script> … $W.initialize(); 

$ W WebGLU नामस्थान का मुख्य उद्देश्य है। हम उसके साथ ज्यादातर काम करेंगे। इस ऑब्जेक्ट के अलावा, एक वस्तु $ G (GameGLU नाम स्थान) है, जो माउस और कीबोर्ड का उपयोग करके दृश्य को नियंत्रित करने के साथ काम को सरल करता है। WebGLU में कुछ प्रयोगात्मक विशेषताएं भी हैं (उदाहरण के लिए, CrazyGLU - पसंद और कुछ भौतिकी के छद्म बफर के साथ काम करने के लिए)। जब संबंधित फ़ंक्शन लॉन्च किए जाते हैं, तो सभी स्रोत फ़ाइलें WebGLU द्वारा लोड की जाती हैं (उदाहरण के लिए, useControlProfiles(); फ़ंक्शन useControlProfiles(); ControlProfiles.js फ़ाइल लोड करता है), इसलिए आपको वेबग्लू .js के अलावा स्क्रिप्ट को मैन्युअल रूप से लोड करने की आवश्यकता नहीं है।

WebGLU को आरंभ करने के बाद, हम दृश्य ऑब्जेक्ट बनाना शुरू कर सकते हैं। ऑब्जेक्ट बनाने के लिए, WebGLU इंटरफ़ेस $W.Object(type, flags) प्रदान करता है, जहाँ प्रकार ऑब्जेक्ट का प्रकार (OpenGL के रूप में) है:

• $ W.GL.POINTS - प्रत्येक शीर्ष बिंदु द्वारा प्रदर्शित किया जाता है,
• $ W.GL.LINES - प्रत्येक जोड़ी का जोड़ 2n-1 और 2n एक लाइन से जुड़ा हुआ है,
• $ W.GL.LINE_LOOP - सभी कोने पहले शीर्ष पर बंद होने के साथ खंडों द्वारा क्रम में जुड़े हुए हैं,
• $ W.GL.LINE_STRIP - सभी कोने बिना बंद किए खंडों से जुड़े हैं,
• $ W.GL.TRIANGLES - कार्यक्षेत्र का प्रत्येक त्रिभुज (क्रम में) एक त्रिभुज बनाता है,
• $ W.GL.TRIANGLE_STRIP - कोने त्रिकोण के क्रम में जुड़े हुए हैं,
• $ W.GL.TRIANGLE_FAN - कोने एक सामान्य - प्रथम - शीर्ष के चारों ओर त्रिकोण द्वारा जुड़े हुए हैं;

झंडे - वैकल्पिक झंडे: डिफ़ॉल्ट रूप से वे $W.RENDERABLE | $W.PICKABLE $W.RENDERABLE | $W.PICKABLE , हालाँकि, यदि हम एक ऐसी वस्तु का निर्माण कर रहे हैं जो कि एक बच्चा है, तो $W.PICKABLE को स्पष्ट रूप से $W.PICKABLE किया जाना चाहिए। सबसे सरल मामले में, आपको ऑब्जेक्ट के प्रत्येक शीर्ष के लिए एक रंग निर्दिष्ट करने की आवश्यकता है, हालांकि, हम अपने स्वयं के शेडर (जो हम आगे करेंगे) लिखने के लिए स्वतंत्र हैं, जो हमें संपूर्ण ऑब्जेक्ट के लिए सामान्य रंग निर्दिष्ट करने की अनुमति देता है।

इसलिए, उदाहरण के लिए, रंग समन्वय अक्ष बनाने के लिए, हम यह करेंगे:

 var originLines = new $W.Object($W.GL.LINES); originLines.vertexCount = 6; originLines.fillArray("vertex", [[0,0,0], [3,0,0], [0,0,0], [0,3,0], [0,0,0], [0,0,3]]); with ($W.constants.colors){ originLines.fillArray("color", [ RED, RED, GREEN, GREEN, BLUE, BLUE]); } 

शेडर, डिफ़ॉल्ट रूप से, ऑब्जेक्ट के प्रत्येक शीर्ष को चिह्नित करने के लिए निम्न सरणियों का उपयोग करता है:

• "वर्टेक्स" - कोने के निर्देशांक,
• "रंग" - कोने के रंग,
• "सामान्य" - कार्यक्षेत्र के मानदंड,
• "टेक्सकोर्ड" - इस शीर्ष पर बनावट का समन्वय है,
• "Wglu_elements" - शीर्ष समन्वय सूचकांकों (जटिल वस्तुओं के लिए)।

अनुरूप (सूचकांकों को छोड़कर), शेड्स में संबंधित चर नाम दिए गए हैं (मुझे याद है कि छाया में किसी व्यक्ति के शीर्ष की विशेषता वाले चर विशेषता attribute )।

WebGL से कनेक्टिंग Material विधि का उपयोग करके कार्यान्वित की जाती है। इस विधि का एकमात्र तर्क JSON shader विवरण फ़ाइल का पथ है। उदाहरण के लिए, हमारे प्रकाश व्यवस्था के तार इस तरह जुड़े हुए हैं:

 var lights = new $W.Material({path:$W.paths.materials + "light.json"}); 

Light.json फ़ाइल स्वयं इस तरह दिखती है:

 { name: "light", program: { name: "light", shaders: [ {name:"light_vs", path:$W.paths.shaders+"light.vert"}, {name:"light_fs", path:$W.paths.shaders+"light.frag"} ] } } 

यहाँ नाम "सामग्री" का सामान्य नाम है; कार्यक्रम → नाम - जाहिर तौर पर कार्यक्रम के नाम की विशेषता है (शायद WebGL के निर्माता ने सुझाव दिया था कि कई कार्यक्रमों का उपयोग एक सामग्री के लिए किया जा सकता है, लेकिन यह पैरामीटर एक विशेष भूमिका नहीं निभाता है); shaders - उनके लिए पथ के संकेत के साथ shaders का उपयोग किया।

चर जो प्रत्येक वस्तु या संपूर्ण प्रणाली के लिए uniform ( uniform विशेषता के साथ setUniformAction(n, f) , setUniformAction(n, f) ऑब्जेक्ट के setUniformAction(n, f) विधि का उपयोग करके संबंधित जावास्क्रिप्ट चर के साथ जुड़े हुए हैं। इस विधि के तर्कों के निम्नलिखित अर्थ हैं: n - छाया में चर का नाम (यह विधि में एक स्ट्रिंग के रूप में इंगित किया गया है); f एक प्रकार का function(u, o, m) , जहाँ u एकरूप () ऑब्जेक्ट है, o ऑब्जेक्ट ही है, m is the मटीरियल है। उदाहरण के लिए, वस्तु के रंग के लिए "रंग" पैरामीटर का बंधन निम्नानुसार किया जाता है:

 lights.setUniformAction('color', function(uniform, object, material){ $W.GL.uniform4fv(uniform.location, object.color); }); 

गैर-मानक सामग्री को ऑब्जेक्ट में सेट करने के लिए, setMaterial(mat) ऑब्जेक्ट की संपत्ति का setMaterial(mat) , जहां मैट वह सामग्री होती है जिसकी आपको आवश्यकता होती है। चूंकि जावास्क्रिप्ट आपको मक्खी पर पहले से ही परिभाषित वस्तुओं में गुण जोड़ने की अनुमति देता है, इसलिए हम आसानी से वस्तुओं के साथ बदलाव करके उन्हें हमारे शेड्स के साथ समन्वय कर सकते हैं।

WebGLU का उपयोग करते हुए, आइए इस दृश्य को बनाएं:



ऑब्जेक्ट्स के इनहेरिटेंस का उपयोग यहां किया जाता है: मुख्य ऊर्ध्वाधर सिलेंडर दूसरे सिलेंडर और ऊपरी सर्कल को विरासत में मिला है। बदले में, दो सर्कल के बीच विमान में बेतरतीब ढंग से रखे गए अलग-अलग आकारों के निचले सर्कल और बहु-रंगीन क्षेत्रों का एक सेट विरासत में मिला। पूरे दृश्य को एक दिशात्मक प्रकाश स्रोत (नारंगी "टॉर्च") द्वारा प्रकाशित किया गया है, जो एक छोटे नारंगी क्षेत्र द्वारा दर्शाया गया है।

प्रकाश व्यवस्था का उपयोग करने के लिए, हमें निश्चित रूप से उन सभी लंबों के मानदंडों की सही गणना करने की आवश्यकता है जो हमारे "इल्यूमिनेटर" शेड द्वारा संसाधित किए जाएंगे। हम genSphere(n1,n2,rad) पुस्तकालय के genSphere(n1,n2,rad) का उपयोग करके एक गोले को आकर्षित कर सकते हैं, लेकिन हमें स्वयं सिलेंडर खींचना होगा। ऐसा करने का सबसे आसान तरीका सिलेंडर की साइड सतह को जुड़े हुए त्रिकोणों से भरना है:

 function drawCylinder(R, H, n, flags){ var v = [], norm = []; var C = new $W.Object($W.GL.TRIANGLE_STRIP, flags); C.vertexCount = n * 2+2; for(var i = -1; i < n; i++){ var a = _2PI/n*i; var cc = Math.cos(a), ss = Math.sin(a); v = v.concat([R*cc, R*ss,0.]); v = v.concat([R*cc, R*ss,H]); norm = norm.concat([-cc, -ss, 0.]); norm = norm.concat([-cc, -ss, 0.]); } C.fillArray("vertex", v); C.fillArray("normal", norm); return C; } 

यह विधि, जैसा कि आप बाद में देखेंगे, बल्कि आदिम है: इस तथ्य के कारण कि हम सिलेंडर की सतह पर इसके सिरों के बीच में वर्टिकल नहीं रखते हैं, इसके लिए प्रकाश की गणना गलत तरीके से की जाती है: यदि "दीपक" सिलेंडर की सतह के बीच में केवल रोशनी डालता है, तो इसके सिरों को पकड़े बिना। प्रदर्शित नहीं किया गया। सिलेंडर को सही ढंग से खींचने के लिए, आपको अतिरिक्त मध्यवर्ती कोने जोड़ने और त्रिकोण के सही प्रदर्शन के लिए सूचकांकों की एक सरणी में भरने की आवश्यकता है। एक अन्य विकल्प कई आयतों से एक ऑब्जेक्ट कंपाउंड (बच्चे की वस्तुओं के साथ) खींचना है, जिनमें से प्रत्येक में त्रिकोण का एक सेट होता है।

हम फ़ंक्शन का उपयोग करके मंडलियां बनाएंगे

 function drawCircle(R, n, w, flags){ var v = []; var C = new $W.Object($W.GL.LINE_LOOP, flags); C.vertexCount = n; for(var i = 0; i < n; i++){ var a = _2PI/n*i; v = v.concat([R*Math.cos(a), R*Math.sin(a),0.]); } C.fillArray("vertex", v); if(typeof(w) != "undefined") C.WD = w; else C.WD = 1.; C.draw = function(){ //       var oldw = $W.GL.getParameter($W.GL.LINE_WIDTH); $W.GL.lineWidth(this.WD); this.drawAt( this.animatedPosition().elements, this.animatedRotation().matrix(), this.animatedScale().elements ); $W.GL.lineWidth(oldw); }; return C; } 

लाइनों की मोटाई को बदलने में सक्षम होने के लिए जिसके साथ हलकों को खींचा जाता है, हमें इस ऑब्जेक्ट के draw() फ़ंक्शन को फिर से परिभाषित करने की आवश्यकता होगी (चूंकि फ़ंक्शन $W.GL.lineWidth(w) विश्व स्तर पर लाइन की मोटाई सेट करता है - जब तक कि इस फ़ंक्शन पर अगली कॉल नहीं होती)। यदि आप $W.GL.LINE_LOOP को इस ऑब्जेक्ट के लिए $W.GL.POINTS , तो मंडलियों को डॉट्स के साथ खींच लिया जाएगा। अंक का आकार इस तथ्य के कारण ऑब्जेक्ट की WD संपत्ति पर निर्भर करेगा कि हम इसके लिए "सामग्री" बिंदुओं का उपयोग करते हैं, जो इंगित करता है

  gl_PointSize = WD; 

यहां आप अलग-अलग आकारों के बिंदुओं को प्रदर्शित करने के लिए टुकड़ा shader कोड देख सकते हैं, और यहां - शीर्ष shader।

इसलिए, हमने वस्तुओं का निर्माण किया। प्रकाश व्यवस्था की गणना करने के लिए शेड बनाने की बारी थी। कई स्रोतों द्वारा प्रकाशित किए जाने पर किसी शीर्ष के अंतिम रंग की गणना के लिए किसी भी OpenGL हैंडबुक में, आप निम्न सूत्र पा सकते हैं:

  result_Color = mat_emission + lmodel_ambient * mat_ambient Sum_i(D * S * [l_ambient * mat_ambient + max{dot(L,n),0}*l_diffuse*mat_diffuse + max{dot(s,n),0}^mat_shininess * l_specular * mat_specular ) 

यहां

• result_Color - शीर्ष रंग का अंतिम रंग,
• मैट_एक्स - सामग्री गुण,
• l_X - i-th प्रकाश स्रोत के गुण
• एक्स:
  • उत्सर्जन - उत्सर्जित प्रकाश (यानी सामग्री एक प्रकाश स्रोत है),
  • lmodel_ambient - प्रकाश मॉडल का कुल परिवेशीय प्रकाश (स्रोतों से स्वतंत्र, यानी यह पृष्ठभूमि प्रकाश है)
  • परिवेश - पृष्ठभूमि प्रकाश (प्रकाश स्रोतों के बाहर सामग्री का रंग, इथ प्रकाश स्रोत के विसरित प्रकाश घटक)
• डी - प्रकाश क्षीणन गुणांक, डी = 1 / (kc + kl * d + kq * d ^ 2),)
  • d स्रोत से शिखर तक की दूरी है,
  • केसी - निरंतर क्षीणन गुणांक ("ग्रे फिल्टर"),
  • kl रैखिक क्षीणन गुणांक है,
  • kq द्विघात क्षीणन गुणांक है,
• एस - स्पॉटलाइट प्रभाव, निम्नानुसार गणना:
  = 1, अगर प्रकाश स्रोत एक स्पॉटलाइट नहीं है (असीम रूप से दूर समानांतर बीम),
  = 0, यदि स्रोत एक सर्चलाइट है, लेकिन शीर्ष विकिरण विकिरण शंकु के बाहर है,
  = max {dot (v, dd), 0} ^ GL_SPOT_EXPONENT अन्य मामलों में, यहाँ v स्पॉटलाइट (GL_POSITION) से वर्टेक्स तक सामान्यीकृत वेक्टर है, dd (GL_SPOT_DIRECTION) स्पॉटलाइट का ओरिएंटेशन है।
• L = -v (शीर्ष से स्रोत तक सामान्यीकृत वेक्टर),
• n शीर्ष पर सामान्य है,
• फैलाना - विसरित प्रकाश, घटना / प्रतिबिंब के कोण पर निर्भर नहीं करता है,
• s सामान्यीकृत वेक्टर है जो L के योग के बराबर है और वेक्टर शीर्ष से आंख तक,
• चमक - चमक की डिग्री (0 से 128 तक, और अधिक, "चमकदार" सतह है)
• स्पेक्युलर - दर्पण घटक का रंग।

हम इस सूत्र को सरल कर सकते हैं यदि हम इस तथ्य को ध्यान में रखते हैं कि आमतौर पर सामग्री मैच के फैलाना और पृष्ठभूमि के रंग, स्पॉटलाइट का पृष्ठभूमि रंग सामान्य पृष्ठभूमि प्रकाश के फैलने वाले रंग से मेल खाता है, और निरंतर और रैखिक क्षीणन गुणांक छोड़ा जा सकता है। नतीजतन, हम इस तरह के एक टुकड़े shader मिलता है। वर्टेक्स डिस्प्ले के निर्देशांक की गणना करने के अलावा, वर्टेक्स शेडर को पुनर्गणना भी करनी होगी, जो वर्तमान मॉडल-विशिष्ट मैट्रिक्स के आधार पर, स्पेस में वर्टेक्स की स्थिति और उसके सामान्य के अभिविन्यास (यह किया जाना चाहिए: हम प्रत्येक वस्तु को स्थानांतरित, स्केल और घुमा सकते हैं)।

अब यह हमारे लिए हमारे "टॉर्च" के गुणों को निर्धारित करने के लिए बनी हुई है:

  light = { position: [0.,2.,1.5], target: [0.,0.,-2.], color: [1.,.5,0.,1.], fieldAngle: 60., exponent: 5., distanceFalloffRatio: .02 }; 

setUniformAction(…) का उपयोग करके setUniformAction(…) "लालटेन" गुणों और ऑब्जेक्ट गुणों को shader चरों के साथ संबद्ध करें और इस "सामग्री" का उपयोग करके प्रत्येक ऑब्जेक्ट के लिए अलग-अलग गुण सेट करें।

हम यह सब करने के बाद, $W.start(T); फ़ंक्शन का उपयोग करके दृश्य को चेतन करते हैं $W.start(T); जहां T दृश्य रेंडरिंग के बीच न्यूनतम अंतराल है। यदि हमारा दृश्य बहुत जटिल है, तो हमें $W.util.defaultUpdate(); फ़ंक्शन का उपयोग करके मैन्युअल रूप से प्रत्येक परिवर्तन के बाद इसे खींचना होगा $W.util.defaultUpdate(); और $W.util.defaultDraw(); । ये फ़ंक्शन शेड्स के संकलन को प्रभावित नहीं करते हैं (जो कि खुद ही शेड्स में बड़े पैमाने पर बदलाव करते हुए किया जाना चाहिए), इसलिए हमारा दृश्य केवल प्रारंभिक लोडिंग के समय (इनिशियलाइज़ेशन के दौरान) "फ्रीज" करेगा, और खिड़की के आकार बदलने पर थोड़ा धीमा भी होगा।

अंत में, मैं कहूंगा कि वेबग्लू से दृश्य को घुमाने का कार्य (अधिक सटीक रूप से, कैमरे के चारों ओर घूमना) बहुत सुविधाजनक नहीं है, इसलिए आपको अपने स्वयं के कार्य को परिभाषित करना चाहिए। यहां (बहुत शुरुआत में संकेतित उदाहरण पते पर भी) आप देख सकते हैं कि अंतिम एचटीएमएल-फाइल कैसा दिखता है।



यह लेख काफी बड़ा निकला, इस तथ्य के बावजूद कि मैंने चयन बफर के साथ काम करने का उल्लेख नहीं किया था (यदि हमें माउस क्लिक के साथ वस्तुओं की पहचान करने की आवश्यकता है), वस्तुओं को मिलाते समय प्रदर्शित करना (जो वस्तु के रंग में पारदर्शिता घटक का उपयोग करना आवश्यक है), और "बैक" को क्लिप करना। सतह के आकार और बहुत कुछ। मुझे उम्मीद है कि WebGL पर मेरा यह लेख अंतिम नहीं है (या शायद कोई और मेरा उपक्रम जारी रखेगा)।





UPD: एक विकल्प प्रदान करने के लिए, मैंने getObjectIDAt का उपयोग करने और पागलों की तरह काम करने का उपयोग करने की कोशिश की। हालांकि, ये प्रयास असफल रहे: पुस्तकालय नम है। इसलिए, फ़ंक्शन स्वतंत्र रूप से लिखा गया था।

तो, चयन बफर को लागू करने के लिए क्या आवश्यक है।

सबसे पहले, हम $W.start(p) फ़ंक्शन का उपयोग नहीं कर सकते हैं, अन्यथा हम चयन बफर पर लिखते समय एक टाइमर छवि अपडेट के "रनिंग इन" का जोखिम चलाते हैं। इसलिए, हमें स्वयं इसमें प्रत्येक परिवर्तन के बाद दृश्य को प्रस्तुत करने का ध्यान रखना चाहिए।

दूसरे, हमें चयन बफर के लिए "वैश्विक सामग्री" ( MatPick ) बनाने और इसे आरंभ करने की आवश्यकता है, साथ ही बफर को भी आरंभ करना होगा:

  //  ""    MatPick = new $W.Material({path:$W.paths.materials + "pick.json"}); MatPick.setUniformAction('pickColor', function(uniform, object, material){ var colr = [0.,0.,0.,0.]; var id = object.id; for(var i = 0; i < 4; i++){ colr[i] = (id & 0xff)/256.; id >>= 8; } $W.GL.uniform4fv(uniform.location, colr); } ); //    try{ $W.pickBuffer = new $W.Framebuffer(); $W.pickBuffer.attachTexture($W.GL.RGBA, $W.canvas.width, $W.canvas.height, $W.GL.COLOR_ATTACHMENT0); $W.pickBuffer.attachRenderbuffer($W.GL.DEPTH_COMPONENT16, $W.canvas.width, $W.canvas.height, $W.GL.DEPTH_ATTACHMENT); }catch (e) { console.error(e); } 

हम मानक योजना के अनुसार विकल्प बनाते हैं: ऑब्जेक्ट आइडेंटिफ़ायर (एक 32-बिट पूर्णांक, अधिमानतः सकारात्मक, नकारात्मक, लेकिन -1 के बराबर नहीं) बाइट्स में विभाजित होता है, जो फ़्लोटिंग-पॉइंट नंबर में बदल जाते हैं - ऑब्जेक्ट का रंग घटक। फ्लोट गारंटी देता है कि राउंडिंग त्रुटियां यादृच्छिक त्रुटियों (जब पहचानकर्ता को ± 1 में परिवर्तित किया जाता है) की अनुमति नहीं देगा। चयन बफ़र प्रदर्शित करने के लिए शेड्स इतने सरल हैं कि मैंने उन्हें यहां भी नहीं दिया।

तीसरा, आपको ऑब्जेक्ट्स फ़ाइल के कोड (डिफ़ॉल्ट रूप से पहचानकर्ताओं को आरंभ करने के लिए), साथ ही Util.js (स्क्रीन पर इसकी सामग्री प्रदर्शित करने के बाद ड्राइंग बफर की सामग्री को बचाने के लिए, अन्यथा विकल्प काम नहीं करेगा) के कोड को थोड़ा संशोधित करने की आवश्यकता है।

और अंत में, हमें एक चयन फ़ंक्शन लिखना होगा जो ऑब्जेक्ट्स को चयन बफर में आकर्षित करेगा और कर्सर के नीचे रंग मान प्राप्त करेगा। ऐसा करने के लिए, सभी वस्तुओं को प्रदर्शित करने के बाद, हम उनकी "सामग्री" को oldmat सरणी में oldmat , और जब चयन बफर खींचते हैं, तो अस्थायी रूप से सभी "सामग्रियों" को हमारे MatPick बदल MatPick , बफर भरें और सही बिंदु पर रंग मान प्राप्त करें। और पहले से ही रंग मूल्य से, हम ऑब्जेक्ट की पहचानकर्ता (या अनुपस्थिति, अगर आईडी == - 1) निर्धारित करते हैं:

 function pick(X,Y){ //  var ccolr = $W.GL.getParameter($W.GL.COLOR_CLEAR_VALUE); var blend = $W.GL.getParameter($W.GL.BLEND); if(blend) $W.GL.disable($W.GL.BLEND); $W.GL.clearColor(1., 1., 1., 1.); //    "-1" $W.pickBuffer.bind(); //  ""  $W.util.defaultUpdate(); $W.util.clear(); $W.util.setupMatrices(); for (var i = 0; i < $W.objects.length; i++) { $W.objects[i].material = MatPick; //  "" } $W.util.defaultDraw(); //   for (var i = 0; i < $W.objects.length; i++) { $W.objects[i].material = oldmat[i]; //  "" } var pix = new Uint8Array(4); $W.GL.readPixels(X,$W.canvas.height-Y,1,1,$W.GL.RGBA, $W.GL.UNSIGNED_BYTE, pix); $W.pickBuffer.unbind(); //   if(blend) $W.GL.enable($W.GL.BLEND); $W.GL.clearColor(ccolr[0],ccolr[1],ccolr[2],ccolr[3]); var id = pix[0]+(pix[1]<<8)+(pix[2]<<16)+(pix[3]<<24); delete pix; var str = "X=" + X + ", Y=" + Y+ ", ID="+id; alert(str); } </code> <br><br>   :           . <br><br> :  google-chrome     (     ).