Javascript 使用三角形WebGL绘制圆

我是WebGL的新手，尝试用三角形画圈

我设置了变量

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

for（var i=0.4；i<100；i++）{
push（vec2（r*Math.cos（x*i），r*Math.sin（y*i））；
点推（vec2（r*Math.cos（x*（i+1）），r*Math.sin（y*（i+1））；
}

问题是，当我增加时，我实际上又在推第二个点，这是我不想做的

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

---

使用三角形扇形无需复制顶点。WebGL将使用三角形模式从[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(i * 2 * Math.PI / 200),
        r*Math.sin(i * 2 * Math.PI / 200) 
    ));
}

vec2中心=vec2（cX，cY）；
点。推（中心）；
对于（i=0；i我没有足够的声誉来评论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) 
    ));
}

vec2中心=vec2（cX，cY）；
点。推（中心）；
对于（i=0；iRamil和Nicks的答案对我帮助很大，我想在这里补充一点

对于一些可能会感到困惑的人来说，为什么几乎每一代人都要处理这一步骤

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

循环从
0到200--->再次从0到某个数字
，这是它的工作原理，因为一个完整的圆从
0到2*Math.PI
，要逐点绘制一个圆，我们可能需要更多的点，或者圆点之间沿边缘有一些间隙，我们将其按一些数字划分为间隔假设我们需要将0到2*PI的间隔除以800个点，我们这样做

const totalPoints=800；
对于（设i=0；在WebGL和ES2.0中，i必须始终使用自定义着色器。如果没有自定义着色器，则无法在这些API中绘制任何内容（清除除外）。除此之外，（a）
gl.点
绘制正方形而非圆形，以及（b）WebGL/ES2.0只要求最大点大小为1.0，因此不能保证您能够绘制任意大小的点。感谢您的澄清！编辑的答案。非自定义着色器是指外部库作为材质的一部分为用户生成的着色器。@RamilKudashev您好，请在这里更正我…因为完整的圆从θ=0-2*PI，为了生成多个点，我们必须将这个区间划分为200个点，例如将这个区间划分为200个点，我们将2*PI/200，因为范围是从0到2*PI，i（计数器变量）从0到200（总点数）？很好。我编辑了Ramil的评论。