0

Im calculating a circle around a point in the fragment shader.The problem is that the part of the texture that is change is not a circle, Its an oval. The form actually depends on the texture's form.If the texture were to be a perfect square I would get a perfect circle but when its a rectangle I get an oval. This is the current fragment shader:

varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;

uniform highp vec2 center;
uniform highp float radius;
uniform highp float scale;


void main()
{
   highp vec2 textureCoordinateToUse = textureCoordinate;
   highp float dist = distance(center, textureCoordinate);
   textureCoordinateToUse -= center;
   if (dist < radius)
   {
     highp float percent = 1.0 - ((radius - dist) / radius) * scale;
     percent = percent * percent;

     textureCoordinateToUse = textureCoordinateToUse * percent;
     textureCoordinateToUse += center;

     gl_FragColor = texture2D(inputImageTexture, textureCoordinateToUse );
   }

   textureCoordinateToUse += center;
   gl_FragColor = texture2D(inputImageTexture,textureCoordinate);   
}

UPDATE SHADER CODE:

highp float aspectRatio = 854.0 / 480.0;
     //highp vec2 textureCoordinateToUse = textureCoordinate;
     highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y *    aspectRatio + 0.5 - 0.5 * aspectRatio));
   highp float dist = distance(center, textureCoordinateToUse);
   textureCoordinateToUse -= center;
   if (dist < radius)
   {
     highp float percent = 1.0 - ((radius - dist) / radius) * scale;
     percent = percent * percent;

     textureCoordinateToUse = textureCoordinateToUse * percent;
     textureCoordinateToUse += center;

     gl_FragColor = texture2D(inputImageTexture, textureCoordinateToUse );
     return;
   }

   textureCoordinateToUse += center;
   gl_FragColor = texture2D(inputImageTexture,textureCoordinate);
Sol
  • 87
  • 3
  • 10
  • Can you put some comments into your code? What is scale and what is percent = 1.0 - ((radius - dist) / radius) * scale; supposed to represent? – Matic Oblak Aug 24 '12 at 11:56
  • The question is how to get a circle and not an oval. Scale is 1. Percent affects the content of the circle/oval but not its form so dont pay attention to it – Sol Aug 27 '12 at 03:01

1 Answers1

1

I see you're trying to use my bulge distortion fragment shader. While you haven't actually asked a question, I think I might know what you want here.

If you provide your texture coordinates in normalized 0.0 - 1.0 ranges for a rectangular input texture, the above will operate over an elliptical area rather than a circular one. That's because the above calculations work in texture coordinate space, not the image coordinate space.

To correct for this, you can do one of two things. First, you could provide texture coordinates that account for the aspect ratio of the image (have one of them not max out at 1.0).

Second, you could do what I do in this answer and feed in the aspect ratio of the image as a uniform and use that to correct for the rectangular nature of the image. If you provided an aspectRatio uniform to the shader with the ratio between the width and height of the image, you could replace the first line in the body of your shader with 

 highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y * aspectRatio + 0.5 - 0.5 * aspectRatio));

and it would operate over a circular area.

Community
  • 1
  • 1
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
  • Brad Larson to the rescue. Thank you for your replay and thanks for the GPUImage. As you said this code is from the bulge shader. I edit my post with the new code.I got the circle but the bulge effect is not applied to the right texture coordinates. Any help? thanks – Sol Aug 27 '12 at 03:04
  • I forgot to tell you I input the center uniform with the user touch on the screen. With your line applied(current code updated in this post) now the bulge effect only gets applied to the 1 by 1 square center of the screen. So when I touch the bottom left of the screen the bulge effect appears in the bottom left corner of that 1 by 1 square centered on the screen. Very bad explanation but I hope you understood my problem. Thank you – Sol Aug 28 '12 at 00:40