दो त्रिकोणों का क्षेत्र

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

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

और मुझे कहना होगा कि मैंने ऐसा किया। लेकिन पहले बातें पहले।

प्रक्रिया गणित

पहले, चलो वास्तविक कार्य पर निर्णय लेते हैं। स्क्रीन पर प्रत्येक बिंदु के लिए, हमारे पास कार्टेशियन समन्वय प्रणाली में दो स्क्रीन निर्देशांक हैं, और हमें इसके लिए गोलाकार निर्देशांक (वास्तव में, अक्षांश और देशांतर) खोजने की आवश्यकता है, जो कि वास्तव में ग्रह के नक्शे के लिए बनावट निर्देशांक हैं।

So. कार्टेशियन एक गोलाकार समन्वय प्रणाली से संक्रमण समीकरणों की एक प्रणाली ( विकिपीडिया से लिया गया) द्वारा परिभाषित किया गया है:


और रिवर्स संक्रमण - निम्नलिखित समीकरणों के साथ:


हम आसानी से त्रिज्या को जानते हुए, X और Y से Z समन्वय प्राप्त कर सकते हैं और हम त्रिज्या को एकता के बराबर ले जा सकते हैं।
भविष्य में, हम इस बात पर सहमत होंगे कि हम Y की अवधारणाओं (हम एक स्क्रीन लंबवत होंगे) और Z (यह दृश्य की गहराई होगी) को बदलकर उपरोक्त समीकरणों को थोड़ा बदल देंगे।

तकनीकी हिस्सा है

विचार के कार्यान्वयन के लिए हमें क्वाड को लागू करने की आवश्यकता होगी (मैंने पहले ही लिखा था कि इसका उपयोग कैसे करना है, इसलिए मैंने इसे दोहराया नहीं, खासकर जब से परियोजना के पूर्ण स्रोत कोड का लिंक नीचे दिया गया है), साथ ही दो बनावट: ग्रह के वास्तविक नक्शे (मैंने पृथ्वी के आकार की बनावट का उपयोग किया था) 2048x1024) और बनावट नक्शे का समन्वय करते हैं। दूसरी बनावट उत्पन्न करने के लिए कोड, कार्टेशियन निर्देशांक से गोलाकार में परिवर्तन के गणित को दोहराता है:

int texSize = 1024; double r = texSize * 0.5; int[] pixels = new int[texSize * texSize]; for (int row = 0, idx = 0; row < texSize; row++) { double y = (r - row) / r; double sin_theta = Math.sqrt(1 - y*y); double theta = Math.acos(y); long v = Math.round(255 * theta / Math.PI); for (int col = 0; col < texSize; col++) { double x = (r - col) / r; long u = 0, a = 0; if (x >= -sin_theta && x <= sin_theta) { double z = Math.sqrt(1 - y*y - x*x); double phi = Math.atan2(z, x); u = Math.round(255 * phi / (2 * Math.PI)); a = Math.round(255 * z); } pixels[idx++] = (int) ((a << 24) + (v << 8) + u); } } GLES20.glGenTextures(1, genbuf, 0); offsetTex = genbuf[0]; if (offsetTex != 0) { GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, offsetTex); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_NONE); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_NONE); GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, texSize, texSize, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, IntBuffer.wrap(pixels)); } 

ध्यान दें कि निर्देशांक X और Y को रेंज [0..texSize] से रेंज [-1..1] में ट्रांसफर किया जाता है, और बनावट U और V को कोर्डिंस से रेंज [0..255] में ट्रांसफर किया जाता है, जिसके बाद वे क्रमशः लाल रंग में लिखे जाते हैं। और 32-बिट बनावट के हरे रंग के घटक। अल्फा चैनल का उपयोग "गहराई" ( Z निर्देशांक) को संरक्षित करने के लिए किया जाता है, जबकि ब्लू चैनल अभी अप्रयुक्त है। बिलिनियर फ़िल्टरिंग को बंद करना भी आकस्मिक नहीं है: इस स्तर पर यह कोई प्रभाव नहीं देता है (किसी भी मामले में पड़ोसी बिंदुओं में समान मूल्य हैं, बल्कि तेज छलांग के साथ), लेकिन मैं आगे क्या दिखाने जा रहा हूं, यह पूरी तरह से होगा। हानिकारक। लेकिन इसके बारे में अधिक नीचे।

दोनों बनावट एक साधारण पिक्सेल shader (यहाँ और नीचे, चित्र क्लिक करने योग्य हैं) के इनपुट को खिलाया जाता है:

 private final String quadFS = "precision mediump float;\n" + "uniform sampler2D uTexture0;\n" + "uniform sampler2D uTexture1;\n" + "varying vec4 TexCoord0;\n" + "void main() {\n" + " vec4 vTex = texture2D(uTexture0, TexCoord0.xy);\n" + " vec3 vCol = texture2D(uTexture1, vTex.xy).rgb;\n" + " gl_FragColor = vec4(vCol, (vTex.w > 0.0 ? 1.0 : 0.0));\n" + "}\n"; 

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

यह पहले से ही बहुत अच्छी तरह से निकला, लेकिन किसी भी तरह सपाट, प्लस मैं अपनी धुरी के आसपास ग्रह के वास्तविक रोटेशन को जोड़ना चाहूंगा।

हम shader में एक और पैरामीटर शामिल करते हैं (हम इसे रेंज में समय के आधार पर बदल देंगे [0..1]), प्लस "गहराई" (अल्फा चैनल से मूल्य द्वारा रंग को गुणा करना) जोड़ें:

 private final String quadFS = "precision mediump float;\n" + "uniform sampler2D uTexture0;\n" + "uniform sampler2D uTexture1;\n" + "uniform float uOffset;\n" + "varying vec4 TexCoord0;\n" + "void main() {\n" + " vec4 vTex = texture2D(uTexture0, TexCoord0.xy);\n" + " vTex.x += uOffset;\n" + " vec3 vCol = texture2D(uTexture1, vTex.xy).rgb;\n" + " gl_FragColor = vec4(vCol * vTex.w, (vTex.w > 0.0 ? 1.0 : 0.0));\n" + "}\n"; 

वैसे, इस क्षेत्र के बारे में कोई शिकायत नहीं है, लेकिन तस्वीर किसी भी तरह दिखती है ... आठ-बिट, या कुछ और। और कोई आश्चर्य नहीं: हमने बनावट को निर्देशांक [0..255] (साधारण रंग घटकों में हमारे लिए अधिकतम उपलब्ध) में दर्ज किया है, जिसका अर्थ है कि हमारी बनावट में 256 पिक्सेल से अधिक (और चौड़ाई 512, खाते में रोटेशन में नहीं) हो सकती है। पर्याप्त नहीं है, आपको कम से कम 10-बिट सटीकता की आवश्यकता है।

संकल्प बढ़ाएँ

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

तो, अब तक हमारे पास तीन में से दो रंग घटक हैं, अर्थात्। 24 में से 16 बिट्स। चलो, डेटा पैक करते हैं ताकि प्रत्येक बनावट के समन्वय में 12 बिट्स का आकार हो, जो हमें ऊंचाई में 4096 पिक्सल तक बनावट के साथ काम करने की अनुमति देगा! ऐसा करने के लिए, हम सचमुच कार्यक्रम में तीन पंक्तियों को बदलते हैं:

 ... long v = Math.round(4095 * theta / Math.PI); ... u = Math.round(4095 * phi / (2 * Math.PI)); ... pixels[idx++] = (int) ((a << 24) + (v << 12) + ((u & 15) << 8) + (u >> 4)); ... 

और 12-बिट एड्रेसिंग स्कीम को ध्यान में रखते हुए एक नया शेडर लिखें (यह इस जगह पर है कि बिलिनियर फ़िल्टर को निष्क्रिय किया जाना चाहिए!):

 private final String quadFS = "precision mediump float;\n" + "uniform sampler2D uTexture0;\n" + "uniform sampler2D uTexture1;\n" + "uniform float uOffset;\n" + "varying vec4 TexCoord0;\n" + "void main() {\n" + " vec4 vTex = texture2D(uTexture0, TexCoord0.xy);\n" + " vec3 vOff = vTex.xyz * 255.0 + vec3(0.5, 0.5, 0.5);\n" + " float hiY = floor(vOff.y / 16.0);\n" + " float loY = vOff.y - 16.0 * hiY;\n" + " vec2 vCoord = vec2(\n" + " (vOff.x * 16.0 + loY) / 4095.0 + uOffset,\n" + " (vOff.z * 16.0 + hiY) / 4095.0);\n" + " vec3 vCol = texture2D(uTexture1, vCoord).rgb;\n" + " gl_FragColor = vec4(vCol * vTex.w, (vTex.w > 0.0 ? 1.0 : 0.0));\n" + "}\n"; 

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

झुकाव

लेकिन तथ्य यह है कि इस योजना में ढलान को लागू करना अधिक कठिन है। वास्तव में, कार्य अघुलनशील नहीं है, और मैंने भी इसके साथ मुकाबला किया, लेकिन यह बारीकियों के बिना नहीं कर सका।

संक्षेप में, कार्य को ऑफसेट V को समन्वयित करना है, जबकि समन्वय U नहीं बदलता है: ऐसा इसलिए है क्योंकि हम एक्स अक्ष के चारों ओर रोटेशन जोड़ते हैं। योजना यह है: हम बनावट निर्देशांक को स्क्रीन में परिवर्तित करते हैं (रेंज [-1..1]), क्षैतिज अक्ष के चारों ओर रोटेशन मैट्रिक्स को लागू करें (इसके लिए, एक नए यूटिल्ट में झुकाव के कोण के साइन और कोसाइन लिखें ), और फिर नए वाई समन्वय का उपयोग करें हमारे टेम्पलेट बनावट में नमूने के लिए। "घुमाया हुआ" Z समन्वय हमारे लिए भी उपयोगी है, इसकी मदद से हम गेंद की पीठ के लिए देशांतर को प्रतिबिंबित करते हैं)। स्क्रीन समन्वय Z को स्पष्ट रूप से गणना करना होगा ताकि एक ही बनावट से दो बनावट के नमूने न हों, साथ ही साथ यह इसकी सटीकता को बढ़ाएगा।

 private final String quadFS = "precision mediump float;\n" + "uniform sampler2D uTexture0;\n" + "uniform sampler2D uTexture1;\n" + "uniform float uOffset;\n" + "uniform vec2 uTilt;\n" + "varying vec4 TexCoord0;\n" + "void main() {\n" + " float sx = 2.0 * TexCoord0.x - 1.0;\n" + " float sy = 2.0 * TexCoord0.y - 1.0;\n" + " float z2 = 1.0 - sx * sx - sy * sy;\n" + " if (z2 > 0.0) {;\n" + " float sz = sqrt(z2);\n" + " float y = (sy * uTilt.y - sz * uTilt.x + 1.0) * 0.5;\n" + " float z = (sy * uTilt.x + sz * uTilt.y);\n" + " vec4 vTex = texture2D(uTexture0, vec2(TexCoord0.x, y));\n" + " vec3 vOff = vTex.xyz * 255.0 + vec3(0.5, 0.5, 0.5);\n" + " float hiY = floor(vOff.y / 16.0);\n" + " float loY = vOff.y - 16.0 * hiY;\n" + " vec2 vCoord = vec2(\n" + " (vOff.x * 16.0 + loY) / 4095.0,\n" + " (vOff.z * 16.0 + hiY) / 4095.0);\n" + " if (z < 0.0) { vCoord.x = 1.0 - vCoord.x; }\n" + " vCoord.x += uOffset;\n" + " vec3 vCol = texture2D(uTexture1, vCoord).rgb;\n" + " gl_FragColor = vec4(vCol * sz, 1.0);\n" + " } else {\n" + " gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n" + " }\n" + "}\n"; 

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

परिणामस्वरूप, आप Google धरती की तरह ही गेंद को ज़ूम और टर्न कर सकते हैं। इस अंतर के साथ कि यहां केवल दो त्रिकोण हैं।

और अंत में, वादा किया। प्रोजेक्ट के लिए सोर्स कोड GitHub पर उपलब्ध है ।
आप समाप्त .apk फ़ाइल भी डाउनलोड कर सकते हैं।

वैसे, मेरे पिछले पोस्ट के स्रोत वहां उपलब्ध हैं ।

अद्यतन: ऐसा लगता है कि मैं अभी भी सभी उपकरणों पर सटीक बनावट प्राप्त करने में कामयाब रहा, इसके लिए थोड़ा सा बदलाव की आवश्यकता थी, साथ ही पैटर्न बनावट के रंगों के गोलाई में थोड़ा समायोजन भी करना था। अब यहां तक ​​कि बलपूर्वक संकुचित बनावट को सामान्य रूप से कम या ज्यादा काम करना चाहिए। GitHub कोड अपडेट किया गया, नई .apk फाइलें अपलोड की गईं।

अद्यतन 2: फिर भी, गोलार्ध में कलाकृतियों को हराया गया था। स्रोत और तैयार .apk अपडेट किए गए
इसके अलावा, मैंने एक और बोनस जोड़ा: इस डेमो का वेबलॉग संस्करण यहां उपलब्ध है ।