👨‍👨‍👦 🤷🏽 ⭐️ पेश है WebGL 🤞🏾 🧑🏾 ☝🏿

परिचय

वेबजीएल तकनीक का उपयोग करके आधुनिक ब्राउज़र में 3 डी प्रदर्शित करने के लिए आवश्यक बुनियादी कदम दिखाने के लिए लेख बनाया गया था। लक्ष्य को प्राप्त करने के लिए, हम त्रि-आयामी अंतरिक्ष में कई लाइनों के निर्माण के कार्य पर विचार करते हैं।

काम की योजना:

कैनवास से WebGL संदर्भ प्राप्त करें।
शेडर प्रोग्राम डाउनलोड करें। अर्थात्:
- शेडर प्रोग्राम बनाएं;
- हमें शीर्ष और खंड शेड के लिए अलग से सोर्स कोड मिलता है;
- संकलनकर्ता shader कोड;
- कार्यक्रम में संलग्न करें;
- कार्यक्रम को सक्रिय करें।
हम दो मैट्रिक्स स्थापित करते हैं: मॉडल-दृश्य और प्रक्षेपण।
हम शीर्ष डेटा बफ़र्स को जगह देते हैं, भरते हैं, सक्रिय करते हैं।
हम ड्रा करते हैं।

1. वेबलॉग संदर्भ

एक WebGL संदर्भ कैनवास DOM तत्व से getContext ("प्रयोगात्मक-वेबल") विधि को कॉल करके प्राप्त किया जा सकता है। यह ध्यान दिया जाना चाहिए कि खरगोन समूह वेबलॉग संदर्भ प्राप्त करने के लिए निम्नलिखित विधि का उपयोग करने के लिए (https://www.khronos.org/webgl/wiki/FAQ) की सिफारिश करता है:

var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; gl = null; for (var ii = 0; ii < names.length; ++ii) { try { gl = canvas.getContext(names[ii]); } catch(e) {} if (gl) { break; } }

जब संदर्भ सफलतापूर्वक प्राप्त होता है, तो gl ऑब्जेक्ट में ऐसी विधियाँ होती हैं, जिनके नाम OpenGL ES के कार्यों के समान होते हैं। उदाहरण के लिए, WebGL के लिए स्पष्ट फ़ंक्शन (COLOR_BUFFER_BIT) gl.clear (gl.COLOR_BUFFER_BIT) होगा, जो बहुत सुविधाजनक है। लेकिन ध्यान रखें कि सभी WebGL फ़ंक्शंस OpenGL ES 2.0 फ़ंक्शंस के समान सिंटैक्स नहीं हैं।

2. शेड

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

वर्टेक्स shader

  attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 mvMatrix; uniform mat4 prMatrix; varying vec4 color; void main(void) { gl_Position = prMatrix * mvMatrix * vec4 ( aVertexPosition, 1.0 ); color = aVertexColor; }

घर्षण करने वाला

 #ifdef GL_ES precision highp float; #endif varying vec4 color; void main(void) { gl_FragColor = color; }

"वर्दी" के बाद जो परिभाषित किया गया है वह सभी कोने के लिए सामान्य है। यहां वे रूपांतरण मैट्रीस हैं: प्रजातियां और परिप्रेक्ष्य। प्रत्येक शीर्ष की गणना में विशेषता का उपयोग करने के बाद क्या परिभाषित किया गया है। यहां चोटी और उसके रंग की स्थिति है। "अलग-अलग" होने के बाद, हम उस चर को परिभाषित करते हैं जिसे शीर्ष से विखंडन करने वाले को स्थानांतरित किया जाएगा। हम वैरिएबल gl_Position को स्थिति गणना का परिणाम देते हैं, जो gl_FragColor को रंग देते हैं।

3. मॉडल-व्यू मैट्रिक्स और परिप्रेक्ष्य प्रक्षेपण मैट्रिक्स

दोनों मैट्रीस 4x4 आकार के हैं और दो-आयामी विमान पर तीन-आयामी वस्तुओं के प्रदर्शन की गणना करने के लिए उपयोग किए जाते हैं। उनका अंतर यह है कि प्रजाति मैट्रिक्स निर्धारित करता है कि ऑब्जेक्ट्स ऑब्जर्वर को कैसे देखेंगे, उदाहरण के लिए, जब उसकी स्थिति बदल रही है, और प्रोजेक्शन मैट्रिक्स शुरू में प्रोजेक्शन विधि को निर्धारित करता है।

हमारे कार्यक्रम में, प्रक्षेपण मैट्रिक्स के मूल्यों को सेट किया जाता है जब ग्लूपरस्पेक्टिव फ़ंक्शन को आरंभीकरण चरण में कहा जाता है, भविष्य में यह मैट्रिक्स अपने मूल्यों को नहीं बदलता है। GluPerspective फ़ंक्शन मानक नहीं है, हमने इसे स्वयं परिभाषित किया है। उसके तर्क हैं: प्रिय, पहलू, zNear, zFar। fovy - डिग्री में ऊर्ध्वाधर देखने के कोण का क्षेत्र; पहलू - ऊंचाई तक व्यूपोर्ट की चौड़ाई का अनुपात; zNear - निकट कतरन विमान की दूरी (सब कुछ करीब नहीं है); zFar - दूर क्लिपिंग प्लेन से दूरी (आगे सब कुछ खींचा हुआ नहीं है)।

मॉडल-विशिष्ट मैट्रिक्स के मूल्यों को निर्धारित करने के लिए कई दृष्टिकोणों का उपयोग किया जा सकता है। उदाहरण के लिए, gluLookAt फ़ंक्शन (CAMX, CAMY, CAMZ, tarX, tarY, tarZ, upX, upY, upZ) का उपयोग करें - OpenGL के लिए फ़ंक्शन का एक एनालॉग, जो कैमरा स्थिति, कैमरा लक्ष्य निर्देशांक और कैमरा अप-वेक्टर का समन्वय करता है। एक और तरीका है कि कार्यों को बनाने और उपयोग करने के लिए glTranslate, glRotate, glScale, जो पर्यवेक्षक (कैमरा) के सापेक्ष एक बदलाव, रोटेशन, स्केलिंग का उत्पादन करता है। आप कैमरे की स्थिति के प्रारंभिक निर्धारण के लिए gluLookAt का उपयोग कर सकते हैं, और बाद के रूपांतरणों के लिए glTranslate, glRotate, glScale का उपयोग कर सकते हैं। एक तरीका या दूसरा, ये फ़ंक्शन केवल एक ही मॉडल-विशिष्ट मैट्रिक्स के मूल्यों को बदलते हैं। मैट्रिसेस की गणना की सुविधा के लिए, आप sylvester.js लाइब्रेरी का उपयोग कर सकते हैं, जो हम करेंगे।

अब जब आपने दोनों मैट्रिस के मूल्यों को बदलने का एक तरीका खोज लिया है, तो शेडर प्रोग्राम में उनके स्थानांतरण पर विचार करें। मॉडल-व्यू मैट्रिक्स के लिए हमारे शीर्ष शेकर में, हम चर "mvMatrix" का उपयोग करते हैं। इस चर में मैट्रिक्स मानों को पारित करने के लिए, हमें सबसे पहले कार्यक्रम में इसका सूचकांक प्राप्त करना होगा। ऐसा करने के लिए, फ़ंक्शन लोक = gl.getUniformLocation (shaderProgram, name) का उपयोग करें, जो मानक है। जैसा कि आप अनुमान लगा सकते हैं, पहला तर्क शैडर प्रोग्राम की ओर इशारा करते हुए एक चर है, जो दूसरे चरण में प्राप्त किया गया था, और तर्क "नाम" उस चर का नाम है, जिसे हम मान लेना चाहते हैं, हमारे मामले में नाम = "mvatatrix"। अब जब हमारे पास इंडेक्स है, तो हम मैट्रिक्स चटाई के मूल्य को पास करने के लिए फंक्शन gl.uniformMatrix4fv (loc, false, new Float32Array (mat.flatten ())) का उपयोग करते हैं। इसी तरह, हम सूचकांक प्राप्त करते हैं और प्रक्षेपण मैट्रिक्स के लिए मूल्य निर्धारित करते हैं। यह याद रखना चाहिए कि शेडर प्रोग्राम में प्रजाति मैट्रिक्स को अपडेट करने की आवश्यकता होती है जब भी इसके मूल्य बदलते हैं ताकि वे प्रभावी हों।

4. डेटा बफ़र्स

WebGL में बफ़र्स का उपयोग करना आवश्यक है। प्रत्येक बिंदु की स्थिति और उसका रंग दो बफ़र्स में संग्रहीत किया जाएगा। उस कोड के एक टुकड़े पर विचार करें जो एक बफर के लिए सभी काम करता है जो बिंदुओं के निर्देशांक को संग्रहीत करता है जिसके बीच हम रेखाएं खींचेंगे।

  /*   */ vPosBuffer = gl.createBuffer(); /*  */ gl.bindBuffer(gl.ARRAY_BUFFER, vPosBuffer); /*      */ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticies), gl.DYNAMIC_DRAW); /* ,          3 floats   */ gl.vertexAttribPointer(vPosLoc, 3, gl.FLOAT, false, 0, 0); /*    */ gl.enableVertexAttribArray(vPosLoc);

यहां लंबवत रेखा बिंदुओं के निर्देशांक की एक सरणी है। निर्देशांक 6 टुकड़े हैं, जिनमें से पहले 3 अंत की पंक्ति के x-, y-, z- निर्देशांक हैं, क्रमशः, अंत के। vPosLoc shader प्रोग्राम में "aVertexPosition" विशेषता का सूचकांक है। क्योंकि हमारे कार्यक्रम में, सूचक स्पष्ट रूप से gl.bindAttribLocation (shaderProgram, loc, shadersAttrib) का उपयोग करके शेडर प्रोग्राम को इकट्ठा करने के चरण में सेट कर रहे थे, फिर आपको उन्हें फिर से प्राप्त करने की आवश्यकता नहीं है। यदि यह मामला नहीं था, तो आपको "vPosLoc = getAttribLocation (shaderProgram," aVertexPosition ") कमांड का उपयोग करके सूचकांक प्राप्त करना चाहिए।" इसी तरह की कार्रवाई दूसरे बफर के साथ की जाती है, डेटा अलग-अलग होगा (ऊर्ध्वाधर के बजाय रंगों की एक सरणी) और शेडर प्रोग्राम में सूचकांक (vPosLoc के बजाय)।

5. हम आकर्षित करते हैं

रंग बफ़र को साफ़ करना या, अधिक बस, पृष्ठभूमि सेट करना मानक कमांड का उपयोग करके किया जाएगा

 gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT);

अब चलो ड्रा

 gl.drawArrays(gl.LINES, drawArrayIndexStart, drawArrayLength);

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

 drawArrayLength = verticies.length / 3;

अगर लाइनें बदल गई हैं, तो हम चरण 4, 5 का पालन करते हैं। यदि हमने कैमरे की स्थिति बदल दी है, तो चरण 3 और चरण 5 का प्रदर्शन करें।

निष्कर्ष

सीधी लाइनों के निर्माण का कार्य छत से नहीं लिया गया था। एक ऐसा कार्यक्रम है जो विभेदक समीकरणों की एक प्रणाली को हल करता है और ओपनजीएल का उपयोग करके 3 डी में परिणाम बनाता है। वेबलॉग का उपयोग करके परिणाम को php और प्रदर्शित करने के लिए कार्यक्रम को पोर्ट करने का निर्णय लिया गया था। थ्री-डायमेंशनल स्पेस में सीधी रेखाओं की मैपिंग की समस्या को हल करने के लिए, सूची से आधुनिक इंजन (http://ru.wikipedia.org/wiki/WebGL) का अध्ययन किया गया: वेबग्लू, GLGE, C3DL, कॉपरलिच, स्पाइडरग्ल और सीनजेएस। इसके लिए, एक इंटरफ़ेस बनाया गया था जो तीसरे पक्ष के इंजन के साथ मुख्य कार्यक्रम के संचार को सार्वभौमिक बनाने की अनुमति देता है। परिणाम WebGLU, C3DL के साथ हासिल किए गए थे। दूसरों में, या तो लाइन बनाने का कोई सरल तरीका नहीं है, या यह इष्टतम नहीं है। उनमें से एक में, लाइन फ़ंक्शन को प्रलेखित किया गया है, लेकिन परियोजना मंच पर यह स्पष्ट किया गया था कि इसका उपयोग करना संभव नहीं होगा, और उन्होंने इसे बहुभुज के साथ खींचने का सुझाव दिया।

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

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

काम कर रहे संस्करण के लिए लिंक

rnix.dyndns.org/3dpr - अपने स्वयं के इंजन पर प्रदर्शन लाइनें।
rnix.dyndns.org/3dpr/c3dl.html - cd3l लाइब्रेरी का उपयोग कर
rnix.dyndns.org/3dpr/webglu.html - वेबलू लाइब्रेरी का उपयोग कर

संदर्भ

cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html - WebGL विनिर्देश, कमांड सिंटैक्स, OpenGL ES से अंतर,
step3d.narod.ru/tutorials/webgl-tutorial.html - बनावट और प्रकाश व्यवस्था सहित कई उदाहरणों का विस्तार से वर्णन किया गया है।
www.khronos.org/webgl/wiki/Demo_Repository - Google, Apple, Mozilla के कुछ उदाहरण हैं। आप यह सुनिश्चित कर सकते हैं कि तीनों लेखकों में से प्रत्येक के पास पूरे कार्यक्रम के अलग-अलग हिस्सों के लिए अपना दृष्टिकोण है।

पेश है WebGL