绘制带三角形的圆 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 将从 [A,B,C,D,E][=23= 形成 ABC、ACD 和 ADE 三角形] 数组 TRIANGLE_FAN 模式。

此外，您没有考虑球体的中心。我不明白为什么 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) )); }

此外，如果您想绘制一个球体，您通常可以绘制一个三角形或 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 并且要按点绘制圆，我们可能需要更多点，否则圆点将沿着边缘在它们之间有一些间隙，我们将它分成一些间隔，有效地给 plot.Say 更多的点，我们需要将 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]

绘制带三角形的圆 WebGL

Drawing a circle with triangles WebGL

javascript

geometry

for-loop

draw

webgl