user3295674 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 :/
Circle? drawn

Answer Source

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