Databases
StackOverflow2013
Postsdbo
POOpenGL iOS - apply blur on finger touch on image does not work
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOpenGL iOS - apply blur on finger touch on image does not work
    primarykey
    data
    text
    <p>I have been developing iOS app which applies blur on finger touch on image. I use OpenGL for that. I have written vertex &amp; Fragment shader to apply Gaussian blur. When I pass entire image rectangle coordinates (0-1) into vertex shader it applies blur to entire image without any issue. Now, the same thing I am trying to do on finger touch. I capture touch points, converts into 0-1 range and pass that point into shaders. But it does not blur and rather it disturbs original image. Below is main code which is executed @ touch moved:</p> <pre><code>-(void)setupVBOsBlur:(CGPoint)start For:(CGPoint)end { static GLfloat* vertexBuffer = NULL; static NSUInteger vertexMax = 64; NSUInteger vertexCount = 0, count, i; // Convert locations from Points to Pixels CGFloat scale = self.contentScaleFactor; start.x *= scale; start.y *= scale; end.x *= scale; end.y *= scale; // Allocate vertex array buffer if(vertexBuffer == NULL) vertexBuffer = malloc(vertexMax * 2 * sizeof(GLfloat)); // Add points to the buffer so there are drawing points every X pixels count = MAX(ceilf(sqrtf((end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y))) , 1); for(i = 0; i &lt; count; ++i) { if(vertexCount == vertexMax) { vertexMax = 2 * vertexMax; vertexBuffer = realloc(vertexBuffer, vertexMax * 2 * sizeof(GLfloat)); } vertexBuffer[2 * vertexCount + 0] = start.x + (end.x - start.x) * ((GLfloat)i / (GLfloat)count); vertexBuffer[2 * vertexCount + 1] = start.y + (end.y - start.y) * ((GLfloat)i / (GLfloat)count); vertexCount += 1; } GLuint vb; glGenBuffers(1, &amp;vb); glBindBuffer(GL_ARRAY_BUFFER, vb); glBufferData(GL_ARRAY_BUFFER, vertexCount*2*sizeof(GLfloat), vertexBuffer, GL_DYNAMIC_DRAW); glEnableVertexAttribArray(ATTRIB_VERTEX); glVertexAttribPointer(ATTRIB_VERTEX, 2, GL_FLOAT, GL_FALSE, 0, 0); GLKMatrix4 projectionMatrix = GLKMatrix4MakeOrtho(0, backingWidth, 0, backingHeight, -1, 1); GLKMatrix4 modelViewMatrix = GLKMatrix4Identity; // this sample uses a constant identity modelView matrix mvpMatrix = GLKMatrix4Multiply(projectionMatrix, modelViewMatrix); [self compileShadersForFingerBlur]; //set MVP glUniformMatrix4fv(mvpMatrixSlot, 1, GL_FALSE, mvpMatrix.m); //glUniform2f(myTextCoordSlot, start.x/320.0, ( self.bounds.size.height - start.y)/480.0); glUniform2f(myTextCoordSlot, start.x/320.0, ( self.bounds.size.height - start.y)/480.0); glUniform1i(amount, 0); /* glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, textureHandle); glUniform1i(textureUniformSlot, 0); */ glEnable(GL_POINT_SMOOTH); glEnable(GL_BLEND); glDrawArrays(GL_POINTS, 0, vertexCount); [eaglContext presentRenderbuffer:GL_RENDERBUFFER]; } </code></pre> <p>And below are my vertex and fragment shaders: Vertex Shader (Horizontal Blur):</p> <pre><code> /* HBlurVertexShader.glsl */ attribute vec4 Position; uniform mat4 MVP; uniform vec2 myTextCoord; varying vec2 v_texCoord; varying vec2 v_blurTexCoords[14]; void main() { gl_PointSize = 5.0; gl_Position = MVP * Position; v_texCoord = myTextCoord; v_blurTexCoords[ 0] = v_texCoord + vec2(-0.028, 0.0); v_blurTexCoords[ 1] = v_texCoord + vec2(-0.024, 0.0); v_blurTexCoords[ 2] = v_texCoord + vec2(-0.020, 0.0); v_blurTexCoords[ 3] = v_texCoord + vec2(-0.016, 0.0); v_blurTexCoords[ 4] = v_texCoord + vec2(-0.012, 0.0); v_blurTexCoords[ 5] = v_texCoord + vec2(-0.008, 0.0); v_blurTexCoords[ 6] = v_texCoord + vec2(-0.004, 0.0); v_blurTexCoords[ 7] = v_texCoord + vec2( 0.004, 0.0); v_blurTexCoords[ 8] = v_texCoord + vec2( 0.008, 0.0); v_blurTexCoords[ 9] = v_texCoord + vec2( 0.012, 0.0); v_blurTexCoords[10] = v_texCoord + vec2( 0.016, 0.0); v_blurTexCoords[11] = v_texCoord + vec2( 0.020, 0.0); v_blurTexCoords[12] = v_texCoord + vec2( 0.024, 0.0); v_blurTexCoords[13] = v_texCoord + vec2( 0.028, 0.0); } </code></pre> <p>Vertex Shader (Vertical Blur)</p> <pre><code> /* VBlurVertexShader.glsl */ varying vec2 v_texCoord; varying vec2 v_blurTexCoords[14]; void main() { v_blurTexCoords[ 0] = v_texCoord + vec2(0.0, -0.028); v_blurTexCoords[ 1] = v_texCoord + vec2(0.0, -0.024); v_blurTexCoords[ 2] = v_texCoord + vec2(0.0, -0.020); v_blurTexCoords[ 3] = v_texCoord + vec2(0.0, -0.016); v_blurTexCoords[ 4] = v_texCoord + vec2(0.0, -0.012); v_blurTexCoords[ 5] = v_texCoord + vec2(0.0, -0.008); v_blurTexCoords[ 6] = v_texCoord + vec2(0.0, -0.004); v_blurTexCoords[ 7] = v_texCoord + vec2(0.0, 0.004); v_blurTexCoords[ 8] = v_texCoord + vec2(0.0, 0.008); v_blurTexCoords[ 9] = v_texCoord + vec2(0.0, 0.012); v_blurTexCoords[10] = v_texCoord + vec2(0.0, 0.016); v_blurTexCoords[11] = v_texCoord + vec2(0.0, 0.020); v_blurTexCoords[12] = v_texCoord + vec2(0.0, 0.024); v_blurTexCoords[13] = v_texCoord + vec2(0.0, 0.028); } </code></pre> <p>Fragment Shader:</p> <pre><code>precision mediump float; uniform sampler2D texture; uniform int amount; varying vec2 v_texCoord; varying vec2 v_blurTexCoords[14]; void main() { gl_FragColor = vec4(0.0); if(amount &gt; 6) { gl_FragColor += texture2D(texture, v_blurTexCoords[ 0])*0.0044299121055113265; gl_FragColor += texture2D(texture, v_blurTexCoords[ 1])*0.00895781211794; gl_FragColor += texture2D(texture, v_blurTexCoords[ 2])*0.0215963866053; gl_FragColor += texture2D(texture, v_blurTexCoords[ 3])*0.0443683338718; gl_FragColor += texture2D(texture, v_blurTexCoords[ 4])*0.0776744219933; gl_FragColor += texture2D(texture, v_blurTexCoords[ 5])*0.115876621105; gl_FragColor += texture2D(texture, v_blurTexCoords[ 6])*0.147308056121; gl_FragColor += texture2D(texture, v_texCoord)*0.159576912161; gl_FragColor += texture2D(texture, v_blurTexCoords[ 7])*0.147308056121; gl_FragColor += texture2D(texture, v_blurTexCoords[ 8])*0.115876621105; gl_FragColor += texture2D(texture, v_blurTexCoords[ 9])*0.0776744219933; gl_FragColor += texture2D(texture, v_blurTexCoords[10])*0.0443683338718; gl_FragColor += texture2D(texture, v_blurTexCoords[11])*0.0215963866053; gl_FragColor += texture2D(texture, v_blurTexCoords[12])*0.00895781211794; gl_FragColor += texture2D(texture, v_blurTexCoords[13])*0.0044299121055113265; } else gl_FragColor = texture2D(texture, v_texCoord); </code></pre> <p>}</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDavid Rönnqvist
    1. USengineer
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POOpenGL iOS - apply blur on finger touch on image does not work
      1. This table or related slice is empty.
      1. VTUpMod
    1. COhttp://stackoverflow.com/questions/14107979/how-can-i-make-specific-part-blur-of-an-image-rectangular-circular
      singulars
      1. POOpenGL iOS - apply blur on finger touch on image does not work
      1. USiPatel
    2. CO@David Thank you!
      singulars
      1. POOpenGL iOS - apply blur on finger touch on image does not work
      1. USengineer
    3. CO@iPatel - Thanks for pointing to it. I have visited it earlier but I want to do it with OpenGLES only, for performance reason.
      singulars
      1. POOpenGL iOS - apply blur on finger touch on image does not work
      1. USengineer
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload