學習WebGL之繪製點線面

本文將詳細介紹WebGL三角形之外的其餘繪製模式，下面是運行截圖，通過下拉菜單可以選擇不同的繪製模式，可以前往我的博客查看代碼演示。

之前的文章中，我們主要使用了繪製三角形的方式來渲染物體。gl.drawArrays(gl.TRIANGLES, 0, 3);中的gl.TRIANGLES即是三角形繪製模式，除了三角形模式之外，還有很多其他的內置繪製模式。下面我將一一介紹。

Triangles（三角形）

var triangle = [ -0.5, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0, -0.5, 0.5, 0.0, 0.5, -0.5, 0.0, 0.5, 0.5, 0.0, ]; triangleBuffer = makeBuffer(triangle); triangleBuffer.vertexCount = 6;

TriangleStrip（三角帶）

對應繪製參數gl.TRIANGLE_STRIP。三角帶模式也是繪製三角形的一種模式，不過在特定情況下，它可以使用更少的頂點達到和三角形繪製模式一樣的效果。如果多個三角形之間每兩個共用一條邊，就可以使用三角帶模式。下圖是一個典型的例子，兩個三角形共用v3到v2的邊，因此可以用三角帶繪製。

代碼如下。頂點數目從6減到了4。要注意的是使用三角帶時要把共享邊的頂點數據放到其餘兩點數據之間，比如v3和v2就放到了v1和v4的中間。至於v3和v2的上下順序，會影響到Cull Face，不過本文還沒有激活這個功能，所以暫時不需要管這方面的問題。

TriangleFan（三角扇）

對應繪製參數gl.TRIANGLE_FAN。三角扇正如其名可以很方便的繪製扇形，下面是本文例子繪製的扇形。

要繪製扇形，首先給一個圓心點，然後依次給圓弧上的點，代碼如下。首先增加0，0，0點為中心點，然後依次按照角度angle計算頂點位置，全部推入頂點數組中即可。

var triangleFan = []; triangleFan.push(0); triangleFan.push(0); triangleFan.push(0); var vertexCount = 1; for (angle = 0; angle

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！