Why is drawing a circle procedurally slower than reading from a texture?

Question

I am making a app where i need to draw a lot of circles in the screen, so i had the idea of replacing the texture of the triangles i am using to draw the texture with a function to draw a circle. However after testing, it turned out to be slower than picking the values off a texture (although the quality is vastly superior). Is it a problem with the way i produce the circle, or reading from a texture is really a lot faster? (about twice as fast)

new code:

precision mediump float; 
uniform sampler2D u_Texture;
varying vec4 vColor; 
varying vec2 vTexCoordinate;
void main() {
  gl_FragColor = vec4(0, 0, 0, 0);
  mediump float thing = vTexCoordinate.x * vTexCoordinate.x + vTexCoordinate.y * vTexCoordinate.y;
  if(thing < 1.0 && thing > 0.9){
     gl_FragColor = vec4(0, 0, 0, 1);
  }
  if(thing < 0.9){
     gl_FragColor = vec4(1, 1, 1, 1) * vColor;
  }
};

old code:

gl_FragColor = texture2D(u_Texture, vTexCoordinate) * vColor;

obs: i didn't bother to rename vTexCoordinate, so it now have a value of [-1, 1] where it was [0, 1]

Answer 1

Conditional branches are really expensive on the GPU, since there's no branch prediction, and probably other reasons too. Also, texture lookups latency can often be hidden under shader processing overhead, so it might actually work faster in the end. So it's best to avoid branches and loops in GLSL if you can.