用三角形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的答案，但我认为他丢失了一件作品。这是我最终使用他的例子的方式

    <div id="divContent" style="display:none;" >
    </div>
<button onclick="unhideDiv()">Click This </button>

否则，如果在循环开始时提供的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)中添加计算，则这些点都是相同的值，从而产生一条线。

Answer 3

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const circle = { x: 100, y: 100, r: 75 }

ctx.moveTo(circle.x, circle.y + circle.r)

for (let i = 0; i <= circle.r; i++) {
  ctx.lineTo(
    circle.x + circle.r * Math.sin(i * 2 * Math.PI / circle.r),
    circle.y + circle.r * Math.cos(i * 2 * Math.PI / circle.r)
  )
}

ctx.stroke()

<canvas id="myCanvas" width="200" height="200"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

Answer 4

拉米尔和尼克斯的回答都对我有很大帮助，我想在这里补充一点。

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

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]的最后一个值