एंड्रॉइड पर गाऊसी पर ग्लो ब्लर इफेक्ट

परिचय

यह महाकाव्य कार्य कई घटनाओं के कारण दिखाई दिया।

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

दूसरे, प्यारी पत्नी का जन्मदिन आ रहा है, और नए स्मार्टफोन या टैबलेट का सबसे अच्छा पूरक उसके लिए हाथ से लिखा पोस्टकार्ड कार्यक्रम होगा।

यह कहा जाता है - किया गया: हम एंड्रॉइड ट्यूटोरियल पर प्रोजेक्ट की रूपरेखा बनाते हैं, शेल्फ से पुरानी डायरेक्ट 3 डी परियोजनाओं को बाहर निकालते हैं। शेल्फ से 3 डी फ़ाइल डाउनलोड, रेंडर-टू-टेक्सचर और पैक ऑफ शेड्स का उपयोग करते हैं, इसे जावा और ओपनजीएल ईएस 2.0 में फिर से लिखते हैं, हमें वह मिलता है जो तस्वीर में है। । बधाई और पसंद का पाठ बाद में जोड़ा जाएगा।

एंड्रॉइड पर ओपनजीएल ईएस 2.0 का उपयोग करने पर सभी जानकारी बहुत ही खंडित हो गई, ज्ञान को थोड़ा-थोड़ा करके एकत्र किया गया था ... मुझे उम्मीद है कि यह पोस्ट उन लोगों की मदद करेगी जो भविष्य में मेरे जैसी ही कठिनाइयों का सामना करेंगे।

और अब और अधिक विस्तार से।

ट्रेनिंग

पहली बात यह है कि एमुलेटर में हार्डवेयर त्वरण सक्षम है। यह या तो AVD प्रबंधक के माध्यम से किया जाता है (स्क्रीनशॉट देखें; "हां" का मान सेट करना न भूलें), या "hw.gpu.enabled = हां फाइल में लाइन जोड़कर .android / avd / <your emulator-name> .avd / config.ini"। "। यहां एक सूक्ष्मता है: स्नैपशॉट के साथ हार्डवेयर त्वरण असंगत है। तदनुसार, हम इस डॉव को हटा देते हैं (या .ini फ़ाइल में लिखते हैं "स्नैपशॉट। प्रस्तुतीकरण = गलत")।



इसके बाद, ऊपर दिए गए ट्यूटोरियल का पालन करें जो आपको ज़रूरत है सब कुछ बनाने के लिए, विशेष रूप से रेंडरर वर्ग के वंशज।

आदर्श

यहां "मॉडल" शब्द से मेरा मतलब है कि यह बहुत गुलाब है। वास्तव में, आप किसी भी वस्तु या पूरे दृश्य का उपयोग कर सकते हैं, इससे कोई फर्क नहीं पड़ता।

यह समझा जाता है कि आगे का सभी कोड रेंडरर वर्ग से विरासत में मिली उसी कक्षा में स्थित है।

मॉडल डाउनलोड करें

मैं यहां .3ds फ़ाइल के लिए डाउनलोड कोड प्रदान नहीं करूंगा: लंबे समय तक, और पोस्ट उस बारे में नहीं है (सिद्धांत रूप में, यह एक अलग पोस्ट के लायक है), हालांकि, मैं मॉडल रेंडरिंग कोड दूंगा, क्योंकि, सबसे पहले, मैंने बहुत सारे रैक एकत्र किए थे जिस तरह से, दूसरी बात, इसमें लगभग पूरी तरह से gl * कॉल्स शामिल हैं, और तीसरे, नीचे कुछ कार्यों की आवश्यकता होगी। हालांकि, यदि केवल प्रभाव दिलचस्प है, तो इस अनुभाग को छोड़ दिया जा सकता है। तो, अंत में, ये सभी मॉडल इन संरचनाओं में फिट होते हैं:

class Light3D { public float[] pos; public float[] color; } class Material3D { public float[] ambient; public float[] diffuse; } class FaceMat { public Material3D material; public int faces; public short[] indexBuffer; public int bufOffset; } class Object3D { public ArrayList<FaceMat> faceMats; public int vertCount; public int indCount; public int glVertices; public int glIndices; public float[] vertexBuffer; } public class Scene3D { public ArrayList<Material3D> materials; public ArrayList<Object3D> objects; public ArrayList<Light3D> lights; public float[] ambient; } 

यहां, इस तरह की सूक्ष्मता और दिशात्मक प्रकाश स्रोत के रूप में सूक्ष्मता को जानबूझकर हटा दिया गया है: दृश्य पहले से ही प्रतिपादन के लिए काफी भारी होगा। ऑब्जेक्ट के कोने के सरणी में वास्तविक संख्या के 6 * (संख्याओं की संख्या) होती है: पंक्ति में दर्ज किए गए कोने और मानदंडों के निर्देशांक।

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

  int[] genbuf = new int[1]; private int createBuffer(float[] buffer) { FloatBuffer floatBuf = ByteBuffer.allocateDirect(buffer.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer(); floatBuf.put(buffer); floatBuf.position(0); GLES20.glGenBuffers(1, genbuf, 0); int glBuf = genbuf[0]; GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, glBuf); GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, buffer.length * 4, floatBuf, GLES20.GL_STATIC_DRAW); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0); return glBuf; } ... int i, num = scene.objects.size(); for (i = 0; i < num; i++) { Object3D obj = scene.objects.get(i); obj.glVertices = createBuffer(obj.vertexBuffer); GLES20.glGenBuffers(1, genbuf, 0); obj.glIndices = genbuf[0]; GLES20.glBindBuffer(GLES20.GL_ELEMENT_ARRAY_BUFFER, obj.glIndices); GLES20.glBufferData(GLES20.GL_ELEMENT_ARRAY_BUFFER, obj.indCount * 2, null, GLES20.GL_STATIC_DRAW); int k, mats = obj.faceMats.size(); for (k = 0; k < mats; k++) { FaceMat mat = obj.faceMats.get(k); ShortBuffer indBuf = ByteBuffer.allocateDirect(mat.indexBuffer.length * 2).order(ByteOrder.nativeOrder()).asShortBuffer(); indBuf.put(mat.indexBuffer); indBuf.position(0); GLES20.glBufferSubData(GLES20.GL_ELEMENT_ARRAY_BUFFER, mat.bufOffset * 2, mat.indexBuffer.length * 2, indBuf); } GLES20.glBindBuffer(GLES20.GL_ELEMENT_ARRAY_BUFFER, 0); } 

वर्टेक्स बफर पीढ़ी एक क्वाड बनाते समय इसका उपयोग करने के लिए एक अलग फ़ंक्शन है।

मॉडल के लिए शेड्स

दृश्य प्रस्तुत करने के लिए शेड बनाएँ:

  private final String vertexShaderCode = "precision mediump float;\n" + "uniform mat4 uMVPMatrix;\n" + "uniform mat4 uMVMatrix;\n" + "uniform mat3 uNMatrix;\n" + "uniform vec4 uAmbient;\n" + "uniform vec4 uDiffuse;\n" + "const int MaxLights = 8;\n" + "struct LightSourceParameters {\n" + " bool enabled;\n" + " vec4 color;\n" + " vec3 position;\n" + "};\n" + "uniform LightSourceParameters uLight[MaxLights];\n" + "attribute vec4 vPosition;\n" + "attribute vec3 vNormal;\n" + "varying vec4 FrontColor;\n" + "vec4 light_point_view_local(vec3 epos, vec3 normal, int idx);\n" + "void main() {\n" + " gl_Position = uMVPMatrix * vPosition;\n" + " vec4 epos = uMVMatrix * vPosition;\n" + " vec3 normal =uNMatrix * vNormal;\n" + " vec4 vcolor = uAmbient;\n" + " int i;\n" + " for (i = 0; i < MaxLights; i++) {\n" + " if (uLight[i].enabled) {\n" + " vcolor += light_point_view_local(epos.xyz, normal, i);\n" + " }\n" + " }\n" + " FrontColor = clamp(vcolor, 0.0, 1.0);\n" + "}\n" + "vec4 light_point_view_local(vec3 epos, vec3 normal, int idx) {\n" + " vec3 vert2light = uLight[idx].position - epos;\n" + " vec3 ldir = normalize(vert2light);\n" + " float NdotL = dot(normal, ldir);\n" + " vec4 outCol = vec4(0.0, 0.0, 0.0, 1.0);\n" + " if (NdotL > 0.0) {\n" + " outCol = uLight[idx].color * uDiffuse * NdotL;\n" + " }\n" + " return outCol;\n" + "}\n"; private final String fragmentShaderCode = "precision mediump float;\n" + "varying vec4 FrontColor;\n" + "void main() {\n" + " gl_FragColor = FrontColor;\n" + "}\n"; private int mProgram; private int maPosition; private int maNormal; private int muMVPMatrix; private int muMVMatrix; private int muNMatrix; private int muAmbient; private int muDiffuse; private int[] muLightOn = new int[8]; private int[] muLightPos = new int[8]; private int[] muLightCol = new int[8]; 

हम उन्हें संकलित करते हैं, विशेषताओं का स्थान निर्धारित करते हैं:

  private int loadShader(int type, String shaderCode) { int shader = GLES20.glCreateShader(type); GLES20.glShaderSource(shader, shaderCode); GLES20.glCompileShader(shader); Log.i("Shader", GLES20.glGetShaderInfoLog(shader)); return shader; } private int Compile(String vs, String fs) { int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vs); int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fs); int prog = GLES20.glCreateProgram(); // create empty OpenGL Program GLES20.glAttachShader(prog, vertexShader); // add the vertex shader to program GLES20.glAttachShader(prog, fragmentShader); // add the fragment shader to program GLES20.glLinkProgram(prog); // creates OpenGL program executables return prog; } ... mProgram = Compile(vertexShaderCode, fragmentShaderCode); // get handle to the vertex shader's vPosition member maPosition = GLES20.glGetAttribLocation(mProgram, "vPosition"); maNormal = GLES20.glGetAttribLocation(mProgram, "vNormal"); muMVPMatrix = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix"); muMVMatrix = GLES20.glGetUniformLocation(mProgram, "uMVMatrix"); muNMatrix = GLES20.glGetUniformLocation(mProgram, "uNMatrix"); muAmbient = GLES20.glGetUniformLocation(mProgram, "uAmbient"); muDiffuse = GLES20.glGetUniformLocation(mProgram, "uDiffuse"); int i; for (i = 0; i < 8; i++) { muLightOn[i] = GLES20.glGetUniformLocation(mProgram, String.format("uLight[%d].enabled", i)); muLightPos[i] = GLES20.glGetUniformLocation(mProgram, String.format("uLight[%d].position", i)); muLightCol[i] = GLES20.glGetUniformLocation(mProgram, String.format("uLight[%d].color", i)); } 

मैं इन शेड्स के काम पर ध्यान केंद्रित नहीं करूंगा: खंड एक पहले से ही तुच्छ है, और शीर्ष एक सर्वव्यापी प्रकाश स्रोतों के साथ सामान्य कार्य को लागू करता है।

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

यह माना जाता है कि हमारे पास पहले से ही परिवर्तन मेट्रिक्स मॉडल, व्यू और प्रोजेक्शन तैयार है (उदाहरण के लिए, मेरा रोसेट आसानी से घूमता है)। मॉडल-व्यू के काम से हम केवल रोटेशन का चयन करते हैं, यह मानदंडों के साथ काम करने के लिए आवश्यक है।

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

  private void DrawScene() { GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT); GLES20.glUseProgram(mProgram); GLES20.glEnable(GLES20.GL_CULL_FACE); GLES20.glEnable(GLES20.GL_DEPTH_TEST); Matrix.multiplyMM(mMVMatrix, 0, mVMatrix, 0, mMMatrix, 0); Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mMVMatrix, 0); // Apply a ModelView Projection transformation GLES20.glUniformMatrix4fv(muMVPMatrix, 1, false, mMVPMatrix, 0); GLES20.glUniformMatrix4fv(muMVMatrix, 1, false, mMVMatrix, 0); int i, j, num; for (i = 0; i < 3; i++) for (j = 0; j < 3; j++) mNMatrix[i*3 + j] = mMVMatrix[i*4 + j]; GLES20.glUniformMatrix3fv(muNMatrix, 1, false, mNMatrix, 0); num = min(scene.lights.size(), 8); float[] eyepos = new float[3]; for (i = 0; i < num; i++) { Light3D light = scene.lights.get(i); for (j = 0; j < 3; j++) { eyepos[j] = mVMatrix[4*3 + j]; for (k = 0; k < 3; k++) eyepos[j] += light.pos[k] * mVMatrix[k*4 + j]; } GLES20.glUniform1i(muLightOn[i], 1); GLES20.glUniform3fv(muLightPos[i], 1, eyepos, 0); GLES20.glUniform4fv(muLightCol[i], 1, light.color, 0); } for (i = num; i < 8; i++) GLES20.glUniform1i(muLightOn[i], 0); // Prepare the triangle data GLES20.glEnableVertexAttribArray(maPosition); GLES20.glEnableVertexAttribArray(maNormal); num = scene.objects.size(); for (i = 0; i < num; i++) { Object3D obj = scene.objects.get(i); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, obj.glVertices); GLES20.glVertexAttribPointer(maPosition, 3, GLES20.GL_FLOAT, false, 24, 0); GLES20.glVertexAttribPointer(maNormal, 3, GLES20.GL_FLOAT, false, 24, 12); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0); GLES20.glBindBuffer(GLES20.GL_ELEMENT_ARRAY_BUFFER, obj.glIndices); int mats = obj.faceMats.size(); for (j = 0; j < mats; j++) { FaceMat mat = obj.faceMats.get(j); for (int k = 0; k < 3; k++) mAmbient[k] = mat.material.ambient[k] * scene.ambient[k]; GLES20.glUniform4fv(muAmbient, 1, mAmbient, 0); GLES20.glUniform4fv(muDiffuse, 1, mat.material.diffuse, 0); GLES20.glDrawElements(GLES20.GL_TRIANGLES, mat.indexBuffer.length, GLES20.GL_UNSIGNED_SHORT, mat.bufOffset * 2); } GLES20.glBindBuffer(GLES20.GL_ELEMENT_ARRAY_BUFFER, 0); } GLES20.glDisableVertexAttribArray(maPosition); GLES20.glDisableVertexAttribArray(maNormal); } 

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

अब मज़ेदार भाग के लिए: इस दृश्य को एक बनावट में प्रस्तुत करें।

ट्रैक्टर

हमें पहले दृश्य के अंतिम "चमक" को लागू करने के लिए, एक गॉसियन कलंक को अग्रिम में प्रस्तुत करने के लिए, और दूसरे, एक क्वाड की आवश्यकता होगी।

क्वाड क्रिएशन

हम कोने और बनावट के निर्देशांक तैयार करते हैं, एक बफर बनाते हैं, शेडर को संकलित करते हैं - मॉडल के लिए सब कुछ समान है, सिवाय इसके कि शेडर्स और भी सरल हो गए हैं:

  private final String quadVS = "precision mediump float;\n" + "attribute vec4 vPosition;\n" + "attribute vec4 vTexCoord0;\n" + "varying vec4 TexCoord0;\n" + "void main() {\n" + " gl_Position = vPosition;\n" + " TexCoord0 = vTexCoord0;\n" + "}\n"; private final String quadFS = "precision mediump float;\n" + "uniform sampler2D uTexture0;\n" + "varying vec4 TexCoord0;\n" + "void main() {\n" + " gl_FragColor = texture2D(uTexture0, TexCoord0.xy);\n" + "}\n"; private int mQProgram; private int maQPosition; private int maQTexCoord; private int muQTexture; private int glQuadVB; ... final float quadv[] = { -1, 1, 0, 0, 1, -1, -1, 0, 0, 0, 1, 1, 0, 1, 1, 1, -1, 0, 1, 0 }; glQuadVB = createBuffer(quadv); mQProgram = Compile(quadVS, quadFS); maQPosition = GLES20.glGetAttribLocation(mQProgram, "vPosition"); maQTexCoord = GLES20.glGetAttribLocation(mQProgram, "vTexCoord0"); muQTexture = GLES20.glGetUniformLocation(mQProgram, "uTexture0"); 

बनावट बफ़र्स तैयार करना

हम एक बार में दो 256x256 बफ़र बनाते हैं, यह ऑनरफेसफैंग्ड फ़ंक्शन में किया जाना चाहिए।

  private int filterBuf1; private int filterBuf2; private int renderTex1; private int renderTex2; public int scrWidth; public int scrHeight; public int texWidth; public int texHeight; ... private int makeRenderTarget(int width, int height, int[] handles) { GLES20.glGenTextures(1, genbuf, 0); int renderTex = genbuf[0]; GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, renderTex); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR); IntBuffer texBuffer = ByteBuffer.allocateDirect(width * height * 4).order(ByteOrder.nativeOrder()).asIntBuffer(); GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, texBuffer); GLES20.glGenRenderbuffers(1, genbuf, 0); int depthBuf = genbuf[0]; GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, depthBuf); GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width, height); GLES20.glGenFramebuffers(1, genbuf, 0); int frameBuf = genbuf[0]; GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuf); GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, renderTex, 0); GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT, GLES20.GL_RENDERBUFFER, depthBuf); int res = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER); GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0); GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0); handles[0] = frameBuf; handles[1] = renderTex; return res; } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { ratio = (float) width / height; int[] handles = new int[2]; scrWidth = width; scrHeight = height; texWidth = 256; texHeight = 256; makeRenderTarget(texWidth, texHeight, handles); filterBuf1 = handles[0]; renderTex1 = handles[1]; makeRenderTarget(texWidth, texHeight, handles); filterBuf2 = handles[0]; renderTex2 = handles[1]; } 

प्रत्येक बनावट बफर के साथ दो चर जुड़े होते हैं: बनावट ही और फ्रेम बफर (मैं टेओटोलॉजी के लिए माफी चाहता हूं)।

/ से बनावट तक क्वेंडर का प्रतिपादन

बस कुछ ही फ़ंक्शन: एक वर्तमान स्रोत और रेंडरिंग का लक्ष्य निर्धारित करता है (0 हमारी स्क्रीन है, बाकी फ्रेम बफ़र्स पहले बनाया गया है), दूसरा एक क्वाड ड्रॉ करता है।

  private void setRenderTexture(int frameBuf, int texture) { if (frameBuf == 0) GLES20.glViewport(0, 0, scrWidth, scrHeight); else GLES20.glViewport(0, 0, texWidth, texHeight); GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuf); GLES20.glActiveTexture(GLES20.GL_TEXTURE0); GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texture); } private void DrawQuad() { GLES20.glUseProgram(mQProgram); GLES20.glDisable(GLES20.GL_DEPTH_TEST); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, glQuadVB); GLES20.glEnableVertexAttribArray(maQPosition); GLES20.glVertexAttribPointer(maQPosition, 3, GLES20.GL_FLOAT, false, 20, 0); GLES20.glEnableVertexAttribArray(maQTexCoord); GLES20.glVertexAttribPointer(maQTexCoord, 2, GLES20.GL_FLOAT, false, 20, 12); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0); GLES20.glUniform1i(muQTexture, 0); GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4); GLES20.glDisableVertexAttribArray(maQPosition); GLES20.glDisableVertexAttribArray(maQTexCoord); } 

चूंकि प्रभाव कई पासों में सुपरइम्पोज किया जाएगा, प्रदर्शन के कारणों के लिए, हमारे पास रिज़ॉल्यूशन टेक्सचर कम है, इसलिए इसे क्वाड पर रेंडर करने का नतीजा कुछ ऐसा ही होगा जैसा तस्वीर में दिखाया गया है।

ओह! बस थोड़ा सा बचा है: एक जोड़े और अधिक shaders और कोड के कुछ ब्लॉक!

गॉसियन ब्लर

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

प्रभाव दो चरणों में लागू किया जाता है: क्षैतिज और लंबवत। हमें पहले से कुछ गणना करने की आवश्यकता है।

गाऊसी समर्थन डेटा

 class FilterKernelElement { public float du; public float dv; public float coef; } ... float mOffsets[] = new float[4]; private float[] pix_mult = new float[4]; private FilterKernelElement[] mvGaussian1D = new FilterKernelElement[44]; private float mfPerTexelWidth; private float mfPerTexelHeight; ... float cent = (mvGaussian1D.length - 1.0f) / 2.0f, radi; for (int u = 0; u < mvGaussian1D.length; u++) { FilterKernelElement el = mvGaussian1D[u] = new FilterKernelElement(); el.du = ((float)u) - cent - 0.1f; el.dv = 0.0f; radi = (el.du * el.du) / (cent * cent); el.coef = (float)((0.24/Math.exp(radi*0.18)) + 0.41/Math.exp(radi*4.5)); } float rr = texWidth / (float) texHeight; float rs = rr / ratio; mfPerTexelWidth = rs / texWidth; mfPerTexelHeight = 1.0f / texHeight; 

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

गॉस शेड्स

  private final String gaussVS = "precision mediump float;\n" + "attribute vec4 vPosition;\n" + "attribute vec4 vTexCoord0;\n" + "uniform vec4 uTexOffset0;\n" + "uniform vec4 uTexOffset1;\n" + "uniform vec4 uTexOffset2;\n" + "uniform vec4 uTexOffset3;\n" + "varying vec4 TexCoord0;\n" + "varying vec4 TexCoord1;\n" + "varying vec4 TexCoord2;\n" + "varying vec4 TexCoord3;\n" + "void main() {\n" + " gl_Position = vPosition;\n" + " TexCoord0 = vTexCoord0 + uTexOffset0;\n" + " TexCoord1 = vTexCoord0 + uTexOffset1;\n" + " TexCoord2 = vTexCoord0 + uTexOffset2;\n" + " TexCoord3 = vTexCoord0 + uTexOffset3;\n" + "}\n"; private final String gaussFS = "precision mediump float;\n" + "uniform sampler2D uTexture0;\n" + "uniform vec4 uTexCoef0;\n" + "uniform vec4 uTexCoef1;\n" + "uniform vec4 uTexCoef2;\n" + "uniform vec4 uTexCoef3;\n" + "varying vec4 TexCoord0;\n" + "varying vec4 TexCoord1;\n" + "varying vec4 TexCoord2;\n" + "varying vec4 TexCoord3;\n" + "void main() {\n" + " vec4 c0 = texture2D(uTexture0, TexCoord0.xy);\n" + " vec4 c1 = texture2D(uTexture0, TexCoord1.xy);\n" + " vec4 c2 = texture2D(uTexture0, TexCoord2.xy);\n" + " vec4 c3 = texture2D(uTexture0, TexCoord3.xy);\n" + " gl_FragColor = uTexCoef0 * c0 + uTexCoef1 * c1 + uTexCoef2 * c2 + uTexCoef3 * c3;\n" + "}\n"; private int mGProgram; private int maGPosition; private int maGTexCoord; private int muGTexture; private int[] muGTexCoef = new int[4]; private int[] muGTexOffset = new int[4]; ... mGProgram = Compile(gaussVS, gaussFS); maGPosition = GLES20.glGetAttribLocation(mGProgram, "vPosition"); maGTexCoord = GLES20.glGetAttribLocation(mGProgram, "vTexCoord0"); muGTexture = GLES20.glGetUniformLocation(mGProgram, "uTexture0"); for (i = 0; i < 4; i++) { muGTexOffset[i] = GLES20.glGetUniformLocation(mGProgram, String.format("uTexOffset%d", i)); muGTexCoef[i] = GLES20.glGetUniformLocation(mGProgram, String.format("uTexCoef%d", i)); } 

गॉस ड्राइंग

यह फ़ंक्शन एक अक्ष पर धुंधला हो जाएगा: या तो क्षैतिज या लंबवत, और कई पास में। इसीलिए दो बनावट की आवश्यकता थी!

  private void DrawGauss(boolean invert) { GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT); GLES20.glUseProgram(mGProgram); GLES20.glDisable(GLES20.GL_DEPTH_TEST); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, glQuadVB); GLES20.glEnableVertexAttribArray(maGPosition); GLES20.glVertexAttribPointer(maGPosition, 3, GLES20.GL_FLOAT, false, 20, 0); GLES20.glEnableVertexAttribArray(maGTexCoord); GLES20.glVertexAttribPointer(maGTexCoord, 2, GLES20.GL_FLOAT, false, 20, 12); GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0); GLES20.glUniform1i(muGTexture, 0); int i, n, k; for (i = 0; i < mvGaussian1D.length; i += 4) { for (n = 0; n < 4; n++) { FilterKernelElement pE = mvGaussian1D[i + n]; for (k = 0; k < 4; k++) pix_mult[k] = pE.coef * 0.10f; GLES20.glUniform4fv(muGTexCoef[n], 1, pix_mult, 0); mOffsets[0] = mfPerTexelWidth * (invert ? pE.dv : pE.du); mOffsets[1] = mfPerTexelHeight * (invert ? pE.du : pE.dv); GLES20.glUniform4fv(muGTexOffset[n], 1, mOffsets, 0); } GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4); } GLES20.glDisableVertexAttribArray(maGPosition); GLES20.glDisableVertexAttribArray(maGTexCoord); } 

यह क्रमशः क्षैतिज और ऊर्ध्वाधर धब्बा के बाद परिणाम की तरह दिखेगा:

यह सब एक साथ रखना

अंतिम चरण: सभी प्रभावों के साथ पूरे फ्रेम को प्रस्तुत करने की प्रक्रिया। मॉडल को फिर से प्रस्तुत करना आवश्यक है, और फिर उस पर एक चमक डालें।

  @Override public void onDrawFrame(GL10 arg0) { setRenderTexture(filterBuf1, 0); DrawScene(); GLES20.glEnable(GLES20.GL_BLEND); GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE); setRenderTexture(filterBuf2, renderTex1); DrawGauss(false); setRenderTexture(filterBuf1, renderTex2); DrawGauss(true); GLES20.glDisable(GLES20.GL_BLEND); setRenderTexture(0, 0); DrawScene(); GLES20.glEnable(GLES20.GL_BLEND); GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE); setRenderTexture(0, renderTex1); DrawQuad(); GLES20.glDisable(GLES20.GL_BLEND); } 

कुल:
1. पहली बनावट में एक दृश्य बनाएं;
2. पहली बनावट के लिए, क्षैतिज धुंधला करें, दूसरे में परिणाम को बचाएं;
3. खड़ी दूसरी बनावट को धुंधला करें, पहले को बचाएं;
4. हम सामान्य मोड में एक दृश्य खींचते हैं;
5. एक क्वाड की मदद से दृश्य के शीर्ष पर पहली बनावट लागू करें;
6. हो गया!

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

वैसे, परिणामी कार्यक्रम एक अच्छा बेंचमार्क के रूप में कार्य करता है, हालांकि यह मुख्य रूप से फ़िल्रेट पर निर्भर करता है। केवल "लेकिन": यह क्वालकॉम प्रोसेसर (स्रोत दृश्य के shader के साथ किसी तरह की समस्या) पर बहुत अच्छी तरह से काम नहीं करता है, और मुझे अभी भी इसका कारण नहीं पता चल पाया है, क्योंकि मेरे पास अंत तक डिबग करने के लिए एक एकल एचटीसी डिवाइस नहीं है, लेकिन सब कुछ पूरी तरह से पावरवीआर 540 (पुराने गैलेक्सी एस पर), माली 400 (एस 2, टैब 7.7, नोट) और एमुलेटर में प्रदान किया गया है।

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

अपडेट 2: डाउनलोड करने के बारे में एक पोस्ट .3ds तैयार है।

अद्यतन 3: क्वालकॉम पर रेंडरिंग के मुद्दे को हल किया गया है: यह पता चला है कि यह लाइन छायादार में है

 for (i = 0; i < uLights; i++) 

ठीक से काम नहीं किया किसने सोचा होगा? ।।
शेड्स और बाकी सब कुछ अपडेट किया गया है, अब यह समस्या नहीं होगी।