एक कण प्रणाली के साथ एक चंचल पाठ ड्रा।

पिछले साल के मेरे लेख में , Android के लिए OpenGL टूल का उपयोग करके पोस्टकार्ड बनाने के लिए समर्पित, मैंने "हम बाद में बधाई पाठ जोड़ देंगे" वाक्यांश छोड़ दिया। इसलिए, अब समय आ गया है।

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

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

वास्तव में पाठ

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

बिटमैप उत्पन्न करें:

int width = screenWidth, height = screenHeight, fontSize = (int) (screenHeight / 8); // Create an empty, mutable bitmap Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444); // get a canvas to paint over the bitmap Canvas canvas = new Canvas(bitmap); bitmap.eraseColor(Color.BLACK); // Draw the text Paint textPaint = new Paint(); textPaint.setTextSize(fontSize); textPaint.setAntiAlias(false); textPaint.setARGB(0xff, 0xff, 0xff, 0xff); textPaint.setTextAlign(Paint.Align.CENTER); textPaint.setTypeface(Typeface.SANS_SERIF); // draw the text centered canvas.drawText(",", width / 2, height / 4, textPaint); canvas.drawText("!", width / 2, height / 2, textPaint); int[] pixels = new int[width * height]; bitmap.getPixels(pixels, 0, width, 0, 0, width, height); bitmap.recycle(); 

यहाँ, स्क्रीनविद और स्क्रीनहाइट तर्क से निकले हैं, जो रेंडरर वर्ग के वंशज के ऑनरफेसचेंज फ़ंक्शन के लिए हैं। कोड के इस टुकड़े में मौजूद पेनोल्टिमेट लाइन को पैक्ड पूर्णांकों के रूप में पिक्सेल की एक सरणी मिली। काले डॉट्स (पृष्ठभूमि) इसमें 0xff000000 हैं, सफेद 0xffffffff (उच्चतम बाइट अल्फ़ा अल्फा है)।

वैसे, यदि हम इस पाठ को एक बनावट पर फैलाना चाहते थे, तो हम इसे जोड़कर करेंगे, उदाहरण के लिए, बिटमैप.क्रील () को कॉल करने से पहले ऐसी पंक्तियाँ:

  GLES20.glGenTextures(1, textures, 0); GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[0]); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT); // Use the Android GLUtils to specify a two-dimensional texture image from our bitmap GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0); 

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

  private final int mParticles = 1200; private int glParticleVB; ... int colored = 0; float[] cx = new float[width * height]; float[] cy = new float[width * height]; for (int y = 0, idx = 0; y < height; y++) for (int x = 0; x < width; x++) if ((pixels[idx++] & 0xffffff) != 0) { cx[colored] = x / (float)width; cy[colored] = y / (float)height; colored++; } float[] particleBuf = new float[3 * mParticles]; for (int i = 0, idx = 0; i < mParticles; i++, idx += 3) { int n = (int) (Math.random() * colored); particleBuf[idx + 0] = cx[n] * 2 - 1; particleBuf[idx + 1] = 1 - cy[n] * 2; particleBuf[idx + 2] = (float) Math.random(); } glParticleVB = createBuffer(particleBuf); 

कणों की संख्या आंख द्वारा चुनी जाती है। जैसा कि ऊपर उल्लेख किया गया है, प्रत्येक कण में केवल निर्देशांक की एक जोड़ी और एनीमेशन के लिए एक "चरण बदलाव" होता है। यह ध्यान देने योग्य है कि Y- समन्वय उलटा है, क्योंकि OpenGL में स्क्रीन के नीचे समन्वय "-1" है और शीर्ष "+1" है, जबकि बिटमैप में चित्र का शीर्ष "0" है और नीचे "ऊंचाई" है। ।

कण बनावट

अब कण बनावट को लोड करें। मैंने ऐसी तस्वीर का लाभ उठाया (मैंने इसे अलग से उत्पन्न किया), हालांकि किसी भी अन्य का उपयोग किया जा सकता है, अगर केवल यह अंतिम परिणाम के अनुरूप होगा। हमने फ़ाइल को चित्र के साथ रखा (उदाहरण के लिए, इसे प्रोजेक्ट के Res / drawable फ़ोल्डर में particle.png कहा जाता है), जिसके बाद हम संसाधन से बनावट लोड करने के लिए कोड लिखते हैं:

  private int particleTex; ... public static int loadTexture(final Context context, final int resourceId) { final int[] textureHandle = new int[1]; GLES20.glGenTextures(1, textureHandle, 0); if (textureHandle[0] != 0) { final BitmapFactory.Options options = new BitmapFactory.Options(); options.inScaled = false; // No pre-scaling // Read in the resource final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId, options); // Bind to the texture in OpenGL GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle[0]); // Set filtering 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); // Load the bitmap into the bound texture. GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0); // Recycle the bitmap, since its data has been loaded into OpenGL. bitmap.recycle(); } return textureHandle[0]; } ... particleTex = loadTexture(mContext, R.drawable.particle); 

यहाँ यह माना जाता है कि हमने रेंडरर वर्ग की तात्कालिकता के समय mContext को बचाया था।

shaders

मैं निम्नलिखित प्रभाव पैदा करना चाहता था: प्रत्येक कण को ​​"स्पंदित" होना चाहिए, अर्थात चक्रीय रूप से वृद्धि और अनुबंध, और प्रत्येक को स्वतंत्र रूप से बढ़ना चाहिए। परिणाम को देखते हुए, मैंने एक और सुधार जोड़ा: जब कण का आकार अधिकतम 3/4 तक पहुंच जाता है, तो इसका रंग सफेद होना शुरू हो जाता है (और अधिकतम बिंदु पर ऐसा हो जाता है)।

  private final String particleVS = "precision mediump float;\n" + "attribute vec4 vPosition;\n" + "attribute float vSizeShift;\n" + "uniform float uPointSize;\n" + "uniform float uTime;\n" + "uniform vec4 uColor;\n" + "varying vec4 Color;\n" + "void main() {\n" + " float Phase = abs(fract(uTime + vSizeShift) * 2.0 - 1.0);\n" + " vec4 pColor = uColor;\n" + " if (Phase > 0.75) {\n" + " pColor.y = (Phase - 0.75) * 4.0;\n" + " };\n" + " Color = pColor;\n" + " gl_PointSize = uPointSize * Phase;\n" + " gl_Position = vPosition;\n" + "}\n"; private final String particleFS = "precision mediump float;\n" + "uniform sampler2D uTexture0;\n" + "varying vec4 Color;\n" + "void main()\n" + "{\n" + " gl_FragColor = texture2D(uTexture0, gl_PointCoord) * Color;\n" + "}\n"; 

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

यह केवल शेड्स लोड करने के लिए बनी हुई है (फिर से, मूल पोस्ट में संकलन फ़ंक्शन देखें):

  private int mPProgram; private int maPPosition; private int maPSizeShift; private int muPPointSize; private int muPTime; private int muPTexture; private int muPColor; ... mPProgram = Compile(particleVS, particleFS); maPPosition = GLES20.glGetAttribLocation(mPProgram, "vPosition"); maPSizeShift = GLES20.glGetAttribLocation(mPProgram, "vSizeShift"); muPPointSize = GLES20.glGetUniformLocation(mPProgram, "uPointSize"); muPTime = GLES20.glGetUniformLocation(mPProgram, "uTime"); muPTexture = GLES20.glGetUniformLocation(mPProgram, "uTexture0"); muPColor = GLES20.glGetUniformLocation(mPProgram, "uColor"); 

और सब कुछ आकर्षित।

प्रस्तुत करना

हमारे लिए सब कुछ तैयार है, यह केवल स्थिरांक स्थापित करने और ड्रॉ फ़ंक्शन को कॉल करने के लिए बनी हुई है।

  private void DrawText() { GLES20.glUseProgram(mPProgram); GLES20.glDisable(GLES20.GL_DEPTH_TEST); GLES20.glActiveTexture(GLES20.GL_TEXTURE0); GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, particleTex); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, glParticleVB); GLES20.glEnableVertexAttribArray(maPPosition); GLES20.glVertexAttribPointer(maPPosition, 2, GLES20.GL_FLOAT, false, 12, 0); GLES20.glEnableVertexAttribArray(maPSizeShift); GLES20.glVertexAttribPointer(maPSizeShift, 1, GLES20.GL_FLOAT, false, 12, 8); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0); GLES20.glUniform1f(muPPointSize, 12); GLES20.glUniform4f(muPColor, 1, 0, 1, 1); GLES20.glUniform1i(muPTexture, 0); GLES20.glUniform1f(muPTime, (SystemClock.uptimeMillis() % 1000) / 1000.0f); GLES20.glDrawArrays(GLES20.GL_POINTS, 0, mParticles); GLES20.glDisableVertexAttribArray(maPPosition); GLES20.glDisableVertexAttribArray(maPSizeShift); } 

परिणाम

निष्कर्ष

इस पर, एंड्रॉइड पर OpenGL ES 2.0 ट्यूटोरियल की मेरी श्रृंखला समाप्त हो रही है, और मैं एक सप्ताह के लंबे ब्रेक की घोषणा कर रहा हूं, जिसके बाद मैं एक .apk फ़ाइल पोस्ट कर सकता हूं जो मुझे अपने डिवाइस पर परिणाम का मूल्यांकन करने और प्रदर्शन की तुलना करने की अनुमति देगा। हालांकि, इस समय के दौरान, यह संभव है कि नए लेख दिखाई देंगे यदि मैं कार्ड में कुछ अन्य विशेष प्रभाव जोड़ना चाहता हूं।