用三角形绘制圆WebGL

我是WebGL的新手，试图用triangle_fan绘制圆。用三角形绘制圆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)))); 
}

的问题是，我居然在第二点推当我再次增加我不想做的事。

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

来源

2015-09-25 user3295674

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

此外，你不考虑你的球体的中心。我不明白为什么我= 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并放弃其超出圆圈的片段着色器像素。

来源

2015-09-25 12:55:05 mlkn

在WebGL和ES2.0中，您总是必须使用自定义着色器。没有自定义着色器（除了清除），没有办法在这些API中绘制任何东西。最重要的是（a）'gl.POINTS'绘制正方形而不是圆圈，（b）WebGL/ES2.0只需要MAX_POINT_SIZE为1.0，因此不能保证您可以绘制任意大小的点。 – gman

谢谢澄清！编辑答案。通过非自定义着色器，我的意思是由外部库为用户生成的着色器作为材质的一部分。 – mlkn

我没有足够的声望来评论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是在计算（r*Math.cos(i*2*Math.PI/200)）给出的200的一小部分，那么只有圆的一小部分会画。另外，如果不在i中加入循环中的计算，则所有点都是相同的值，从而产生一条线。

来源

2017-02-02 01:08:09

用三角形绘制圆WebGL

回答

相关问题