用三角形绘制一个圆形WebGL

Question

我是WebGL的新手，正试图用triangle_fan画一个圆。

我设置了变量

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

然后使用此for循环绘制圆。

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))));
}

问题是我实际上在增加第二点时实际上又在推动第二点，我不想这样做。

此外，下面的图像是绘制的：/

Answer 1

使用三角形风扇，您不需要复制顶点。 WebGL将以TRIANGLE_FAN模式从[A，B，C，D，E]数组中形成ABC，ACD和ADE三角形。

而且，您也不考虑球体的中心。而且我不明白为什么i = 0.4。

这里是代码的正确版本：

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) 
    ));
}

此外，如果您想绘制一个球体，通常可以绘制一个三角形或gl.point并丢弃片段着色器中非圆形的像素。

Answer 2

我没有足够的声誉来评论mlkn的答案，但我认为他缺少了一件。这是我最后以他的示例为例的结果

vec2 center = vec2(cX, cY); 

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

否则，如果在循环开始时提供的200是计算中给出的200的分数（r*Math.cos(i*2*Math.PI/200)），则将仅绘制圆的一部分。同样，在循环中不将i添加到计算中，这些点都是相同的值，从而形成一行。

Answer 3

Ramil和Nicks的回答都对我很有帮助，我想在这里补充一点。

对于有些人可能会感到困惑，为什么几乎每一代人都在处理此步骤

i*2*Math.PI/200 --->(i*2*Math.PI/someNumber)

并且循环从0 to 200---> again 0 to someNumber开始，这是它的工作原理，因为一个完整的圆从0 to 2*Math.PI跨过，并按点画一个圆，我们可能希望有更多的点，否则圆点之间会有些间隙边，我们将其按一定数量划分为有效间隔，从而有效地绘制更多点。说我们需要将0到2 * PI的间隔划分为800个点，我们通过

const totalPoints=800;

for (let i = 0; i <= totalPoints; i++) {
   const angle= 2 * Math.PI * i / totalPoints;
   const x = startX + radius * Math.cos(angle);
   const y = startY + radius * Math.sin(angle);
   vertices.push(x, y);
}

由于循环从0到800，最后一个值将等于2*Math.PI*800/800，给出间隔[0,2*PI]的最后一个值>>

Answer 4