android - GLSL Circle gets eliptical on Rendering on screen? -

i trying render circle on mobile uisng farment shader. followed this got best answer.

vertex shader:

attribute vec4 position;  attribute vec4 inputtexturecoordinate;   varying vec2 texturecoordinate;   void main()  {     gl_position = position;     texturecoordinate = inputtexturecoordinate.xy;  } 

fragment shader:

 varying highp vec2 texturecoordinate;   const highp vec2 center = vec2(0.5, 0.5);  const highp float radius = 0.5;   void main()  {      highp float distancefromcenter = distance(center, texturecoordinate);      lowp float checkforpresencewithincircle = step(distancefromcenter, radius);       gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0) * checkforpresencewithincircle;       } 

attribute vec4 position; passed -1 +1 , attribute vec4 inputtexturecoordinate; passed 0 1.

but while rendering ellipse on mobile screen? think might because of screen aspect ratio. how render perfect circle on screen?

i think might because of screen aspect ratio.

yes, problem.

the viewinf voulme iis [-1,1] in 3 dimensions. mapped viewport window space coordinates. since not use other transformations, direcly drawin in clip space, , clip space identical ndc space.

to right, have take aspect ratio account. can either directly change attribute values, or correct in vertex shader, or still draw full-screen quad , take account in fragment shader.

the latter 1 inefficient way. recommend adding 2d scale vector uniform vertex shader.

attribute vec4 position; attribute vec4 inputtexturecoordinate;  varying vec2 texturecoordinate;  uniform vec2 scale;  void main() {     gl_position = vec4(scale, 1.0, 1.0) * position;     texturecoordinate = inputtexturecoordinate.xy; } 

on client side, can set uniform (1.0/aspect_ratio, 1.0) if aspect_ratio >= 1.0, , (1.0, aspect_ratio) if below 1. way, no matter screen orientation use, circle circle , fit screen.