Lightcycle डेमो WebGL का उपयोग (भाग 0)

प्रविष्टि

मैं नई तकनीकों को सीखना पसंद करता हूं, उन चीजों को करना जो मैंने पहले नहीं किया था। मुझे भी TRON पसंद है। दोनों फिल्में, वैसे। मुझे याद है, इससे पहले कि मैं उन्हें देखता था, छात्र घने समय में, मैंने आर्मगेट्रॉन खेला और लाइट बाइक चलाने का प्रशंसक था। TRON: लिगेसी देखने के बाद, मैं अचानक अपने ट्रॉन को ग्रिड और आइसोमॉर्फ के साथ बनाना चाहता था। दो बार सोचने के बिना, मैंने अपना प्रिय विज़ुअल स्टूडियो एक्सप्रेस लॉन्च किया और सोचा - मेरा यह निर्माण सिंहासन के क्लोनों से कैसे अलग होगा? स्टूडियो आसानी से बंद हो गया, और मेरा उत्साह कुछ हद तक कम हो गया। ठीक उसी क्षण तक जब मैं WebGL के बारे में किसी लेख पर आया था। उसकी आँखें फिर से चमक उठीं और उसके हाथ संपादक के लिए पहुँच गए। यह किसी भी तरह मेरे दिमाग को पार नहीं करता है कि पिछली बार मैंने किसी विषय में ऑफसेट पर एक बटन क्लिक करने के लिए जावास्क्रिप्ट हैंडलर बनाया था।

तो, आज कार्यक्रम में:

• निम्न स्तर की वेबजीएल प्रोग्रामिंग।
• एक साधारण तीन आयामी वस्तु का प्रतिपादन।
• विकास प्रक्रिया पर विस्तृत टिप्पणी।
• बहुत सारे अक्षर और जावास्क्रिप्ट कोड।
• फ्री बूज़ और अच्छा संगीत।

यह लेख उन लोगों के लिए है, जिनके पास बस करने के लिए कुछ नहीं है और इस बारे में पढ़ना चाहते हैं कि दूसरे लोग गर्मी की तपती धूप में चलने के बजाय कंप्यूटर पर अपना समय कैसे बिताते हैं।

हम जो पाना चाहते हैं, उस पर और अधिक

परिणाम एक HTML पृष्ठ होना चाहिए, जिसे लोड करने पर उपयोगकर्ता को ग्रिड में कहीं अनंत विमान पर स्थित प्रकाश चक्र का नियंत्रण मिलेगा। प्रकाश चक्र को तेज, धीमा, सुचारू रूप से मोड़ने और प्रकाश की दीवार के पीछे छोड़ने में सक्षम होना चाहिए। मैं एक मसोकिस्ट नहीं हूं, इसलिए डेमो में एक फ़ाइल नहीं होगी। मार्कअप, स्क्रिप्ट, शेड्स, मॉडल - सब कुछ निर्देशिकाओं में डाल दिया जाएगा। यहां तक ​​कि एक छोटे सीएसएस चयनकर्ता के लिए, एक पूरी फ़ाइल का चयन किया जाएगा। मेरे पास अपना समर्पित सर्वर नहीं है, इसलिए डेमो को फ़ाइल होस्टिंग सेवा के माध्यम से संग्रह में वितरित किया जाएगा।

आर्किटेक्चर

इस लेख में मैं प्रतिपादन के लिए तैयार पुस्तकालयों का उपयोग नहीं करूंगा, क्योंकि नेफिग। लेकिन गंभीरता से, एक ही tdl.js , साथ ही किसी भी उद्देश्य के लिए किसी भी भाषा में किसी भी अन्य पुस्तकालय का प्रभावी ढंग से उपयोग करने के लिए, आपको पहले यह समझने की आवश्यकता है कि यह निचले स्तर पर कैसे काम करता है। हालांकि, लेख में स्पष्ट रूप से दिखाया जाएगा कि इस तरह के एक साधारण डेमो का विकास, जो मैं अंततः तीसरे पक्ष के पुस्तकालयों का उपयोग किए बिना एक व्यक्ति की ताकतों द्वारा करना चाहता हूं, जिससे कारण का खतरा पैदा होता है।

लॉजिक एक फाइल में होगा। इसमें मैं इंजन इनिशियलाइज़ेशन कोड रखूँगा, जिसमें लोडिंग रिसोर्स, कंपाइलिंग शेड्स और मेन लूप, साथ ही सीन रेंडरिंग फंक्शन होगा। मुख्य लूप से, जो वास्तव में लूप नहीं है, लेकिन रिक्वेस्टअनफ्रेम , गणना और रेंडरिंग का उपयोग करके कॉलबैक को बदले में बुलाया जाएगा (ठीक है, या तो रेंडरिंग और गणना, लगभग कोई अंतर नहीं है; लगभग;)।

रेंडरिंग में कई चरण शामिल हैं:

• पर्यावरण का प्रतिपादन, अर्थात्, वह मंजिल जिसके साथ हम ड्राइव करते हैं और, वैकल्पिक रूप से, आकाश जो हमारे ऊपर लटका हुआ है।
• एक प्रकाश चक्र का प्रतिपादन, जिसमें बदले में विभिन्न सामग्रियों के साथ भागों के प्रतिपादन के लिए कई विकल्प शामिल हैं।
• प्रकाश की एक पट्टी का प्रतिपादन एक प्रकाश चक्र के लिए पहुँच रहा है।

एक बार में सब कुछ क्यों नहीं खींचते, आप पूछते हैं? ओपनगेल पाइपलाइन की सुविधाओं के कारण। अधिक विवरण नीचे।

हम इस पर निर्माण करेंगे। इसे और अधिक विस्तार से वर्णन करने का कोई मतलब नहीं है, और कार्यान्वयन के बारे में कुछ लिखने का समय है।

वेबजीएल सामान्य रूप से क्या है और इसका उपयोग कैसे करें?

इस साइट पर एक शुरुआत के लिए बहुत सी उपयोगी जानकारी मिल सकती है। लेकिन यह लिंक वेबलॉग फ़ंक्शंस पर एक संकेत के साथ एक पेज की ओर जाता है।

संक्षेप में, WebGL जावास्क्रिप्ट के लिए OpenGL ES 2.0 बाइंडिंग का एक सेट है। यह तकनीक अभी भी सक्रिय रूप से विकसित की जा रही है, इसलिए अभी तक इस पर कोई ध्वनि और पूर्ण प्रलेखन नहीं है। लेकिन उत्साही लोग इसे मुख्य और मुख्य के साथ उपयोग कर रहे हैं।

इसका उपयोग करना बहुत सरल है। आपको बस HTML दस्तावेज़ के शरीर में <canvas /> टैग को ड्रॉप करना होगा, <canvas /> पर क्लिक करें। canvas.getContext("experimental-webgl") एलिमेंट canvas.getContext("experimental-webgl") निष्पादित करें और इस तरह canvas.getContext("experimental-webgl") को रेंडर करने के लिए उपयोग की जाने वाली ऑब्जेक्ट प्राप्त करें। कोड लिखना शुरू करते हैं।

इंजन इनिशियलाइजेशन

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

 $(function() { loadResources(); var gl = $("#viewport")[0].getContext("experimental-webgl"); engineStartup(gl); }); 

फिर हमें उन छायादार कार्यक्रमों को संकलित करने और बनाने की आवश्यकता है जो डेमो में उपयोग किए जाएंगे। निम्नलिखित कार्य यह करते हैं:

 function buildShaders(gl, count) { var shaders = []; for (var i = 0; i < 1; i++) { shaders[i] = composeProgram(gl, localStorage.getItem("step " + i + " vertex shader"), localStorage.getItem("step " + i + " fragment shader")); } return shaders; } //   http://www.guciek.net/webgl_shortest/en function composeProgram(gl, vertex_shader, fragment_shader) { var program = gl.createProgram(); var addShader = function(type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw "Could not compile " + (type == gl.VERTEX_SHADER ? "vertex" : "fragment") + " shader:\n\n" + gl.getShaderInfoLog(shader); } gl.attachShader(program, shader); }; addShader(gl.VERTEX_SHADER, vertex_shader); addShader(gl.FRAGMENT_SHADER, fragment_shader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { throw "Could not link the shader program."; } return program; } 

हां, हां, मैं स्थानीय मशीन से फ़ाइलों को डाउनलोड करने के लिए स्थानीय ब्राउज़र भंडारण का उपयोग करता हूं। यहाँ मैं एक ऐसा विकृत हूँ। वैसे, मेरे पसंदीदा क्रोम के लिए मुझे यह अनुमति देने के लिए, मुझे इसे इस तरह चलाना होगा:
"chrome --allow-file-access-from-files" ।

लेकिन बेहतर कोड के बारे में बात करते हैं और इसका क्या मतलब है। पहला कार्य, मुझे लगता है, किसी में कोई दिलचस्पी नहीं पैदा करेगा - shader कार्यक्रमों की एक सरणी इसमें संकलित है। लेकिन एक शेडर प्रोग्राम का निर्माण, जो दूसरे फ़ंक्शन में होता है, बहुत अधिक दिलचस्प है। सबसे पहले आपको यह समझने की जरूरत है कि WebGL में एक शेडर क्या है ।

एक शायर ऐसी चीज है ...

एक shader एक प्रोग्राम है जो फ्रेम प्रोसेसिंग के दौरान GPU पर चलता है। ओपनजीएल ईएस 2.0 में, दो प्रकार के शेड हैं - वर्टेक्स और पिक्सेल (क्रमशः शीर्ष और टुकड़ा)। ओपनजीएल पाइपलाइन में परिचालन के क्रम का विस्तार से वर्णन यहां किया गया है , हमें बस यह जानने की जरूरत है कि वर्कट शेल्डर पिक्सेल शेडर की तुलना में पहले चलता है और पाइप लाइन के सभी कोने से संचालित होता है। पिक्सेल shader पाइप लाइन में प्रत्येक पिक्सेल के लिए स्क्रीन पर प्रदर्शित होने से पहले लगभग चलता है और वर्टेकर shader द्वारा प्रेषित डेटा का उपयोग कर सकता है। इन दो शेड्स के संयोजन को शेडर प्रोग्राम कहा जाता है। उसी समय, ग्राफिक्स प्रोसेसर केवल एक shader प्रोग्राम को निष्पादित कर सकता है, लेकिन इसका मतलब यह बिल्कुल नहीं है कि हम सब कुछ के लिए दो shaders तक सीमित हैं। शेडर कार्यक्रमों को सभी बाद के आदिमों के प्रसंस्करण तर्क को बदलते हुए, प्रतिपादन के दौरान स्विच किया जा सकता है। इसे जल्दी से करने के लिए, आपको पहले उपयोग किए गए सभी शेड्स को संकलित करना होगा और उनसे शेडर प्रोग्राम बनाना होगा। कार्यक्रमों के भंडारण के लिए, मुझे एक सरणी से बेहतर कुछ नहीं मिला। एरे इंडेक्स रेंडरिंग स्टेप से मेल खाता है, जो शेडर प्रोग्राम का उपयोग करता है। हम कुछ समय के लिए स्वयं शेड्स लिखना स्थगित कर देंगे, लेकिन अब हम स्रोत कोड से एक शेडर प्रोग्राम बनाने के कार्य पर करीब से नज़र डालेंगे।

सबसे पहले, createProgram() फ़ंक्शन को बुलाया जाता है, जीएल को createProgram() कि हम एक shader प्रोग्राम बनाना चाहते हैं। फिर हम इस प्रोग्राम में वर्टेक्स और पिक्सेल शेड्स जोड़ते हैं। जोड़ना चार चरणों में होता है। सबसे पहले, shader के लिए एक ऑब्जेक्ट gl.createShader() का उपयोग करके बनाया जाता है, फिर shaderSource() फ़ंक्शन इसके स्रोत कोड को shaderSource() , जिसके बाद compileShader() संकलित किया जाता है और संकलित shader को attachShader() साथ प्रोग्राम में जोड़ा जाता है। दो फ़ंक्शन कॉल और एक shader प्रोग्राम में दो रेडी-टू-यूज़ शेड्स होते हैं। अब प्रोग्राम को linkProgram() का उपयोग करके बनाया जाना चाहिए - और आप इसका उपयोग कर सकते हैं।

मैं यहां संसाधन लोडिंग फ़ंक्शन और कुछ सहायक भूसी नहीं दिखाऊंगा - यह स्पष्ट रूप से उबाऊ है। बेहतर है आगे बढ़ो।

राइटिंग शेड्स

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

शेड्स सी जैसी भाषा में लिखे गए हैं। अधिक सटीक रूप से, दो समान भाषाएं - एक शीर्ष के लिए और एक पिक्सेल शेड के लिए। आप यहाँ से GLSL पर चश्मा पढ़ सकते हैं। मुख्य कार्यक्रम समान चरों का उपयोग करके मापदंडों को पारित कर सकता है। इन चर की मुख्य विशेषता यह है कि वे आदिम प्रसंस्करण के दौरान अपने मूल्य को बदल नहीं सकते हैं, जो उन्हें मुख्य कार्यक्रम और शेडर कार्यक्रम के बीच संचार का मुख्य तरीका बनाता है। एक शीर्ष shader विशेषता चर जो मुख्य कार्यक्रम में प्रत्येक शीर्ष के लिए सेट कर रहे हैं स्वीकार कर सकते हैं। वर्टेक्स और पिक्सेल शेड्स के बीच संवाद करने के लिए, अलग-अलग वेरिएबल्स का उपयोग किया जाता है, जिसे वर्टेक्स शेडर द्वारा आरम्भ किया जाता है, फिर पूरे प्रोसेस्ड आदिम के क्षेत्र पर प्रक्षेपित किया जाता है, और प्रक्षेपित मानों का उपयोग पिक्सेल शेडर द्वारा किया जा सकता है।

उदाहरण के लिए, मैं एक साधारण shader प्रोग्राम दूंगा जो सभी तीन प्रकार के चर का उपयोग करता है।

 // Vertex shader attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main() { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; } // Fragment shader #ifdef GL_ES precision highp float; #endif varying vec4 vColor; void main() { gl_FragColor = vColor; } 

परिणाम अनुमानित है - एक ढाल के साथ एक आदिम। चलो प्रसंस्करण प्रक्रिया में तल्लीन करते हैं।

डेटा प्रकार और चर में चर

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

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

मैट्रिसेस एक बहुत अधिक दिलचस्प डेटा प्रकार हैं। शायद आपने एक से अधिक बार सुना है कि मैट्रिक्स की गणना GPU द्वारा सार्वभौमिक लोगों की तुलना में तेजी से परिमाण का एक क्रम है? यह बात है। हम मैट्रीस का उपयोग बहुत गहनता से करेंगे। थोड़ा कम प्रतिपादन करने पर मैट्रिसेस और उनके प्रभावों के बारे में अधिक जानकारी। अब आपको केवल यह जानने की जरूरत है कि वर्टेक्स शेडर में उपयोग किए जाने वाले दो वर्टीकल शेड्स पर्सपेक्टिव और विस्थापन हैं। परिप्रेक्ष्य मैट्रिक्स कैमरे की स्थिति और देखने के कोण को निर्धारित करता है। विस्थापन मैट्रिक्स इंगित करता है कि शीर्ष को कहां ले जाना है। चूंकि शेड को आदिम के लिए निष्पादित किया जाता है, परिणामस्वरूप, पूरे आदिम को स्थानांतरित किया जाता है, वैकल्पिक रूप से किसी भी कोण पर घूमता है।

निश्चित रूप से आपने चर gl_Position और gl_FragColor ध्यान दिया है। Shader इन चरों में इसके निष्पादन का परिणाम रिकॉर्ड करता है। gl_Position तीन आयामी स्थान में शीर्ष की स्थिति निर्धारित करता है। gl_FragColor पिक्सेल का रंग सेट करता है जिसे हम स्क्रीन पर देखते हैं। याद रखें कि पिक्सेल शैडर में आने से पहले एकरूप चर पूरे आदिम में प्रक्षेपित होते हैं? इसीलिए आदिम पर एक ढाल उत्पन्न होती है। मुझे उम्मीद है कि सब कुछ कम या ज्यादा स्पष्ट है, क्योंकि डेमो में जिन शेड्स का उपयोग किया जाएगा, वे दिए गए उदाहरणों की तुलना में अधिक जटिल नहीं हैं।

रेंडरिंग, मैट्रिसेस और ऑल-ऑल

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

सिद्धांत

पहले आपको यह समझने की आवश्यकता है कि दृश्य का प्रक्षेपण कैसे बनाया गया है। अंग्रेजी में विवरण यहाँ हैं । मुख्य विचार यह है कि डिस्प्ले प्लेन पर एक बिंदु में मैट्रिक्स ऑपरेशन का उपयोग करके अंतरिक्ष में एक बिंदु का अनुमान लगाया जाता है (कन्वेयर का यह हिस्सा हमसे छिपा हुआ है और जीडी की महिमा;)। आप में से जो लोग संदर्भ द्वारा लेख को ध्यान से पढ़ते हैं, वे नाराज हो जाएंगे - वे कहते हैं, कैमरे के बारे में कुछ क्यों नहीं कहा गया है? तथ्य यह है कि ओपनजीएल में कैमरा हमेशा एक बिंदु पर होता है - मूल - और जेड अक्ष के नकारात्मक भाग के साथ गठबंधन किया जाता है। अब जब हर कोई पहले से ही टिप्पणी में लेखक को छोटे बहुभुज में फाड़ने के लिए अपनी उंगलियों को फ्लेक्स कर रहा है, तो मैं समझाने की जल्दी में हूं "फिर क्यों। क्या आप अपना सिर घुमा सकते हैं? ”। तथ्य यह है कि GPU के साथ काम करना आसान है - तीन-आयामी बिंदु को प्रोजेक्ट करने के सूत्र बहुत सरल हैं, और परिणामस्वरूप, आवश्यक गणनाओं की संख्या कम हो जाती है। ठीक है, या तो, ग्राफिक्स त्वरक के निर्माता प्रोग्रामर के जीवन को सरल बनाते हैं, जिससे उन्हें अपने कैमरे के कार्यान्वयन में पूर्ण स्वतंत्रता मिलती है। यही है, जब आप माउस को भूकंप में खींचते हैं, तो यह वास्तव में घूमता हुआ कैमरा नहीं है, लेकिन पूरा दृश्य जो मूल के आसपास घूमता है। जिज्ञासुओं को अच्छा लगा होगा। इसलिए परिप्रेक्ष्य मैट्रिक्स और विस्थापन मैट्रिक्स के बीच कोई अंतर नहीं है - वे दोनों अंतरिक्ष में बिंदु को स्थानांतरित करते हैं। लेकिन विस्थापन मैट्रिक्स केवल अंतरिक्ष में वस्तु को स्थानांतरित करने के लिए ऐसा करता है, और परिप्रेक्ष्य मैट्रिक्स परिणामी स्थान को बदलता है ताकि दृश्य का केवल आवश्यक हिस्सा फ्रेम में हो जाए। यह जानकर कि आपको अंतरिक्ष में एक आदिम प्रदर्शित करने के लिए दो मैट्रिसेस से पूछने की ज़रूरत है, आप एक प्रश्न पूछ सकते हैं - क्या इसका मतलब यह है कि अधिक जटिल मॉडल, उदाहरण के लिए, एक बार और फिर पूरी वस्तु को स्थानांतरित करने के लिए, बस मैट्रिस को पुन: प्राप्त करने के लिए बचाया जा सकता है? जवाब है हां। इसके अलावा, ओपनजीएल हमें वीडियो कार्ड मेमोरी में सीधे वर्टिकल बफ़र्स का उपयोग करके वीडियो कार्ड बस बैंडविड्थ को बचाने के लिए ऑब्जेक्ट वर्टिक्स के एक सेट को बचाने का अवसर देता है।

अभ्यास

और यहाँ हम आसानी से दृश्य प्रतिपादन की प्रक्रिया के विवरण के पास पहुंचे। उदाहरण के लिए, हम एक ढाल के साथ एक त्रिकोण और एक वर्ग लेते हैं, लेकिन हम ऐसा केवल स्क्रीन पर एक स्थिर चित्र प्रदर्शित करके नहीं करते हैं, बल्कि उपयोगकर्ता को कैमरा ले जाने देते हैं।

हम कुछ सरल और जटिल लेते हैं

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

बफ़र्स, बफ़र्स ...

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

  var buffers = []; buffers[0] = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffers[0]); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, -1.0, 0.0]), gl.STATIC_DRAW); buffers[0].itemSize = 3; buffers[0].itemCount = 3; buffers[0].attributeLocation = gl.getAttribLocation(shaders[0], "aVertexPosition"); gl.enableVertexAttribArray(buffers[0].attributeLocation); 

वैरिएबल itemSize का आकार परिवर्तन, itemCount और attributeLocation का उपयोग रेंडरिंग में किया जाता है। हम अभी उनके लिए ध्यान केंद्रित नहीं करेंगे। getAttribLocation() फ़ंक्शन का उपयोग करके, बाद में रेंडरिंग में उपयोग करने के लिए वर्टेकर शेडर की दो विशेषताओं के पदों को बचाया जाता है। enableVertexAttribArray() फ़ंक्शन ठीक वही करता है जो आप इससे उम्मीद करते हैं।

शायद हम पहले से ही कुछ आकर्षित करेंगे?

दरअसल, इस समय हमें केवल एक shader कार्यक्रम और दो बफ़र्स की आवश्यकता है - एक में आदिम के कोने की स्थिति है, और दूसरे में उनके रंग हैं RGBA float32 (मैं गलत नहीं था, एक 32-बिट फ़्लोटिंग-पॉइंट नंबर प्रति चैनल)। आप इन सभी मैट्रिसेस और व्यूपोर्ट पर स्कोर कर सकते हैं और एक त्रिकोण बना सकते हैं। परिणाम, निश्चित रूप से, इतना गर्म नहीं होगा।

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

फिर से मैट्रिसेस

मैट्रिसेस पर संचालन के लिए, मैं glMatrix.js लाइब्रेरी का उपयोग करता हूं , क्योंकि मैं मैट्रिक्स गणना में त्रुटियों को डीबग नहीं करना चाहता।

पहले आपको यह समझने की आवश्यकता है कि अंतरिक्ष में एक बिंदु का संचलन क्या है। उदाहरण के लिए, बिंदु A (1; 1; 1) को लें और Z अक्ष द्वारा इसे +1 करने का प्रयास करें। मेरे मन में कुछ गिनने के लंबे और दर्दनाक प्रयासों के बाद, मैंने एक कैलकुलेटर का उपयोग किया और बिंदु A (1; 1; 2) प्राप्त किया। यह एक बहुत ही सरल ऑपरेशन है, क्योंकि एक बिंदु को एक या कई अक्षों के साथ ले जाने पर, आपको बस बिंदु के संगत घटक में एक संख्या जोड़ने की आवश्यकता होती है। और अब आइए X अक्ष की सकारात्मक दिशा के सापेक्ष XY विमान में बिंदु A (1; 1; 0) 45 डिग्री को घुमाने का प्रयास करें। दर्दनाक तरीके से मस्तिष्क को शांत करते हुए, हम उच्च गणित से कुछ समान याद कर सकते हैं। प्रदान किए गए लिंक पर, quaternions और उनके आवेदन को पर्याप्त विवरण में वर्णित किया गया है, मैं उन्हें पढ़ने की सलाह देता हूं। अंग्रेजी पाठक विकिपीडिया पर और भी अधिक सिद्धांत जानने जा सकते हैं। लेकिन काम के लिए, हमें केवल यह जानना होगा कि 4x4 मैट्रिक्स में तीन अक्षों में से प्रत्येक के सापेक्ष एक बिंदु के रोटेशन और अंतरिक्ष में एक बिंदु के आंदोलन के बारे में जानकारी हो सकती है। हमें इससे अधिक की आवश्यकता नहीं है, इन चार परिवर्तनों के संयोजन से आप किसी भी बिंदु को स्थानांतरित कर सकते हैं जैसे हम चाहते हैं। और न केवल एक बिंदु, बल्कि एक संपूर्ण आदिम और एक वस्तु भी।

इसलिए हम अ-बदन बिंदु A (1; 1; 0) को चालू करते हैं, लेकिन इसे कोड में करते हैं। सबसे पहले आपको एक परिवर्तन मैट्रिक्स बनाने की आवश्यकता है। इस प्रक्रिया में कई चरण होते हैं। सबसे पहले, एक पहचान मैट्रिक्स बनाएं, जिसका अर्थ है कि बिंदु पर कोई परिवर्तन लागू नहीं किया जाएगा। इस मैट्रिक्स में मुख्य विकर्ण और शून्य अन्य पदों पर हैं। फिर, आवश्यक परिवर्तनों को पहचान मैट्रिक्स पर क्रमिक रूप से लागू किया जाना चाहिए - विस्थापन ( translate() फ़ंक्शन), रोटेशन ( rotate() फ़ंक्शन, क्रमशः) और स्केलिंग ( scale() फ़ंक्शन)। नतीजतन, हम इसे लागू किए गए सभी परिवर्तनों को मिलाकर एक मैट्रिक्स प्राप्त करते हैं। कोड में, यह इस तरह दिखता है:

  var matrix = mat4.create(); mat4.identity(matrix); matrix.rotate(matrix, Math.PI / 4, [1, 0, 0]); 

नतीजतन, हम एक मैट्रिक्स प्राप्त करते हैं जिसका वेक्टर वेक्टर द्वारा अंतरिक्ष में शुरुआती बिंदु का प्रतिनिधित्व करता है, जिसके परिणामस्वरूप वांछित बिंदु होगा। यह क्रिया शीर्ष की छाया में की जाती है, और यह दो संख्याओं को गुणा करने के समान सरल है। गंभीरता से, एक वेक्टर द्वारा एक मैट्रिक्स को गुणा करना (और मैट्रिक्स द्वारा मैट्रिक्स, और एक वेक्टर द्वारा वेक्टर भी) GLSL में सरल "*" ऑपरेटर द्वारा दर्शाया गया है:

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

यह मत भूलो कि परिवर्तन मैट्रिक्स को एक समान चर के रूप में वर्टेक्स शेडर को पास किया जाता है।

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

कैमरा विवरण

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

glMatrix.js कैमरे के लिए एक मैट्रिक्स बनाने में हमारी मदद करता है। वहाँ अलग अलग अनुमानों के लिए पहले से ही कई के रूप में तीन कार्य हैं: perspective(), ortho()और frustrum()। हम इसे अभी के लिए उपयोग करेंगे perspective()। लेकिन कोई भी मनमाने मापदंडों के साथ नियो और ट्रिनिटी के साथ आपके मैट्रिक्स को बनाने से मना करता है ।

और फिर भी वह घूमता है!

निम्नलिखित कोड हमारे त्रिकोण को घुमाएगा। हालांकि, आप देखेंगे कि यह कुछ हद तक छोटा हो गया है - यह परिप्रेक्ष्य का प्रभाव है।

 //  ,       , //        . //       . function drawFrame(gl, shaders, buffers, matrices) { gl.viewport(0, 0, gl.canvas.clientWidth, gl.canvas.clientHeight); gl.clearColor(0.0, 0.0, 0.0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(shaders[0]); mat4.perspective(75, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.1, 100.0, matrices[0]); mat4.rotate(matrices[1], Math.PI / 100, [1, 1, 1]); gl.bindBuffer(gl.ARRAY_BUFFER, buffers[0]); gl.vertexAttribPointer(buffers[0].attributeLocation, buffers[0].itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, buffers[1]); gl.vertexAttribPointer(buffers[1].attributeLocation, buffers[1].itemSize, gl.FLOAT, false, 0, 0); gl.uniformMatrix4fv(matrices[0].uniformLocation, false, matrices[0]); gl.uniformMatrix4fv(matrices[1].uniformLocation, false, matrices[1]); gl.drawArrays(gl.TRIANGLES, 0, buffers[0].itemCount); } 

प्रारंभिक क्रियाओं को पहले ही वर्णित किया जा चुका है, सिवाय एक के - एक getUniformLocation()समान चरों के स्थान को प्राप्त करने के लिए हमारे shader का उपयोग करते हुए , लेकिन चूंकि इसका अनुप्रयोग बहुत सरल है - हम धीमा नहीं करेंगे। स्रोत, वैसे, यहां ले जाया जा सकता है ।

कोड का विश्लेषण करते हैं। पहला फ़ंक्शन कॉल viewport()हमारे कैनवास पर छवि आउटपुट क्षेत्र का आकार निर्धारित करता है। फ़ंक्शंस clearColor()और clear()निर्दिष्ट रंग में आउटपुट क्षेत्र को साफ़ करें। मैट्रिसेस के साथ संचालन पहले वर्णित है, मैं कार्यों के मापदंडों का वर्णन नहीं करूंगा - वे लाइब्रेरी पेज पर पाए जा सकते हैं। जिस फ़ंक्शन से हम परिचित bindBuffer()हैं , उसका उपयोग करते हुए, हम कोने के निर्देशांक और रंगों के साथ सरणियों का चयन करते हैं, जो तब vertexAttribPointer()वर्टेकर छाया के विशेषता चर के स्रोत के रूप में सेट होते हैं । फिर दो कॉल फॉलो करते हैं।uniformMatrix4fv()जो शेड्स के लिए दो समान मेट्रिसेस को परिभाषित करते हैं: पहला कैमरा मैट्रिक्स है, दूसरा प्रिमिटिव ट्रांसफॉर्मेशन है। खैर, अंत में, drawArrays()हमारा त्रिकोण स्क्रीन पर प्रदर्शित होता है।

अंतिम राग

लेख गलती से मेरी अपेक्षा से कहीं अधिक बढ़ गया, इसलिए आपको इसे कम से कम दो भागों में विभाजित करना होगा। हालाँकि, ताकि पाठक अपना समय बर्बाद न करके OpenGL पर एक और घूर्णन त्रिकोण के बारे में पढ़े, अंत में एक प्रकाश चक्र का एक छोटा मॉडल स्क्रीन पर प्रदर्शित होगा।

ओपनजीएल में मॉडल का प्रतिनिधित्व

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

एक अनुभवी डेवलपर तुरंत दृष्टिकोण की एक खामी को इंगित करेगा - डुप्लिकेट वर्टीकल्स को स्टोर करने के लिए मेमोरी का अत्यधिक उपयोग। तथ्य यह है कि ओपनजीएल में मेमोरी के उपयोग को कम करने और आदिमों के उत्पादन को गति देने के दो तरीके हैं। प्राइमिटि को प्रदर्शित करने के लिए पहला कार्य दूसरा है -drawElements()। इसका मुख्य अंतर यह है कि यह न केवल कोने के निर्देशांक के साथ संचालित होता है, बल्कि वर्टेक्स सूचकांकों की एक सरणी और उचित कोने का एक सरणी के साथ संचालित होता है। इस प्रकार, दो त्रिभुजों को दो सामान्य आवृत्तियों के साथ आउटपुट करने के लिए, आपको पहले वीडियो कार्ड की मेमोरी में वर्टिकल की एक सरणी को संग्रहीत करने की आवश्यकता होगी, और फिर फ़ंक्शन के लिए drawElements()वर्टेक्स इंडेक्स के सरणी को पास करें जिसे हम आदिम प्रदर्शित करने के लिए उपयोग करना चाहते हैं। यह देखते हुए कि सूचकांक का आकार दो बाइट्स जितना हो सकता है, मेमोरी की खपत कम हो जाएगी। यह विधि अच्छी है, लेकिन केवल विभिन्न मॉडलों में बहुत अधिक संख्या में डुप्लिकेट वर्टिकल के लिए। हमारे मामले में, कॉल के TRIANGLE_STRIPबजाय पैरामीटर का उपयोग करना सबसे अच्छा होगाTRIANGLESdrawArrays()। त्रिकोण की पट्टी एक नियमित सरणी है जिसमें कोने हैं, लेकिन इसकी व्याख्या अलग तरह से की जाती है। पहले त्रिकोण में सूचकांकों के साथ [0,1,2] होते हैं, जैसा कि इस मामले में है TRIANGLES। हालांकि, दूसरे त्रिकोण के कोने [1,2,3] होंगे, जबकि TRIANGLESदूसरे त्रिकोण के मामले में , सूचकांकों के साथ कोणों को परिभाषित किया गया है [3,4,5]। साथ ही अच्छी मेमोरी सेविंग भी। मैं जिस मॉडल का उपयोग कर रहा हूँ (वैसे, यहाँ से लिया गया है ) में पहले सरणी में सूचक द्वारा संबोधित किए जा रहे त्रिकोण के शीर्ष के साथ कोने की एक पंक्ति और त्रिकोण की एक सरणी होती है। इसलिए, सबसे सही विकल्प drawElements()एक पैरामीटर के साथ उपयोग करना होगा TRIANGLES। कार्य को सरल बनाने के लिए, मैं त्रिकोणों को नहीं छाँटूंगा ताकि वे एक पट्टी बना सकें, लेकिन भविष्य में यह आवश्यक है।

मॉडल रेंडरिंग

JSON प्रारूप में मॉडल में वर्टिकल की एक सरणी, सूचकांकों की एक सरणी, कोने की संख्या और त्रिकोण की संख्या होती है। पार्सिंग jQuery द्वारा की जाती है। रेंडरिंग कोड में बहुत बदलाव नहीं हुआ है, अंतर केवल बहुत अंत में है - जब ऑब्जेक्ट प्रदर्शित किया जाता है। शेडर्स बिल्कुल नहीं बदले।

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers[2]); gl.drawElements(gl.TRIANGLES, buffers[2].itemCount, gl.UNSIGNED_SHORT, 0); 

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

दुर्भाग्य

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

यदि विषय एक हब्र के लिए दिलचस्प है, तो मैं निरंतरता लिखूंगा। यह संभव है कि जल्द ही नहीं - अब मेरे पास शौक के लिए बहुत खाली समय नहीं है - लेकिन मैं लिखूंगा। अगली श्रृंखला में:

• गहराई बफर और स्टैंसिल बफर।
• प्रतिबिंब और बनावट।
• प्रबंधन।
• WebGL के लिए एक उच्च-स्तरीय लाइब्रेरी की खोज करना।

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

उपयोग की जाने वाली सामग्रियों के लिए कोई लिंक नहीं होगा, क्योंकि वे लेख के शरीर में हैं, और यह बाहर खींचने के लिए बहुत आलसी है।