user3295674 - 4 years ago 411
Javascript Question

# Drawing a circle with triangles WebGL

I'm new to WebGL and was trying to draw a circle with triangle_fan.

I set up the variables

``````var pi = 3.14159;
var x = 2*pi/100;
var y = 2*pi/100;
var r = 0.05;

points = [ vec2(0.4, 0.8) ]; //establish origin
``````

And then drew the circle using this for loop.

``````for(var i = 0.4; i < 100; i++){
points.push(vec2(r*Math.cos(x*i), r*Math.sin(y*i)));
points.push(vec2(r*Math.cos(x*(i+1)), r*Math.sin(y*(i+1))));
}
``````

The issue is that I am actually pushing in the second point again when i increases which I don't want to do.

Also, the image below is that is drawn :/

Using triangle fan you don't need to duplicate vertices. WebGL will form ABC, ACD and ADE triangles from [A,B,C,D,E] array with TRIANGLE_FAN mode.

Also, you don't take into account center of your sphere. And i can't get why i = 0.4.

Here is corrected version of your code:

``````vec2 center = vec2(cX, cY);

points.push(center);
for (i = 0; i <= 100; i++){
points.push(center + vec2(
r*Math.cos(2*Math.PI/200),
r*Math.sin(2*Math.PI/200)
));
}
``````

Also if you want to draw a sphere you could often draw one triangle or gl.point and discard pixels which are out of circle in fragment shader.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download