用三角形繪製圓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

回答

相關問題