用三角形绘制一个圆WebGL [英] Drawing a circle with triangles WebGL

问题描述

我是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）]; //建立原点
  

然后用这个for循环绘制圆圈。

$ b $ （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））））;

$ / code>

问题在于我实际上再次推入第二点当我增加这是我不想做的。

另外，下面的图是绘制的：/
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）
））; 
 
 
 
 
 
 $ b 
另外，如果你想绘制一个球体，你通常可以绘制一个三角形或gl .point并丢弃片段着色器中不在圆圈内的像素。
 
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 :/
解决方案
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.

                        
这篇关于用三角形绘制一个圆WebGL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！