本系列所有文章目錄

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

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

Triangles（三角形）

我們先來回顧一下三角形繪制的規(guī)則，我們需要為每一個三角形提供3個頂點。如果我們想要繪制一個四邊形，那么就需要2個三角形，一共6個頂點。下面是在本文例子中三角形繪制模式下構(gòu)建一個四邊形的代碼。我將makeBuffer做了修改，接受一個數(shù)組，返回WebGL的buffer。構(gòu)建結(jié)束后把頂點數(shù)目綁定到buffer上，方便繪制的時候使用。

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（三角帶）

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

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

var triangleStrip = [
    -0.5, -0.5, 0.0, // v1
    -0.5, 0.5, 0.0,  // v3
    0.5, -0.5, 0.0, // v2
    0.5, 0.5, 0.0, // v4
];
triangleStripBuffer = makeBuffer(triangleStrip);
triangleStripBuffer.vertexCount = 4;

TriangleFan（三角扇）

對應(yīng)繪制參數(shù)gl.TRIANGLE_FAN。三角扇正如其名可以很方便的繪制扇形，下面是本文例子繪制的扇形。

  var triangleFan = [];
  triangleFan.push(0);
  triangleFan.push(0);
  triangleFan.push(0);
  var vertexCount = 1;
  for (angle = 0; angle <= 280; angle += 1) {
    var x = Math.cos(angle / 180.0 * 3.14);
    var y = Math.sin(angle / 180.0 * 3.14);
    var z = 0.0;
    triangleFan.push(x);
    triangleFan.push(y);
    triangleFan.push(z);
    vertexCount++;
  }
  triangleFanBuffer = makeBuffer(triangleFan);
  triangleFanBuffer.vertexCount = vertexCount;

這是一個標準的扇形，你也可以修改x和y的賦值公式，構(gòu)造完全不同的扇形。比如替換成

var x = Math.cos(angle / 180.0 * 3.14) * angle / 360.0;
var y = Math.sin(angle / 180.0 * 3.14) * angle / 360.0;

效果就會變成

記得angle的范圍要變成0~360。

Lines（直線）

對應(yīng)繪制參數(shù)gl.LINES。直線的繪制規(guī)則和Triangles差不多，Triangles需要每個為每個三角形提供3個頂點，直線則是每條直線需要提供2個頂點。代碼如下。

var lines = [
    -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,

    0.5, -0.5, 0.0,
    -0.5, -0.5, 0.0,
];
linesBuffer = makeBuffer(lines);
linesBuffer.vertexCount = 8;

上面的代碼構(gòu)成了一個四邊形，所以一共8個頂點。效果如下。

LineStrip（直線帶）

對應(yīng)繪制參數(shù)gl.LINE_STRIP。直線帶其實和三角帶一樣，三角帶是共享邊，直線帶是共享點，兩條直線共用的點可以省略。代碼如下。

var lineStrip = [
    -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,
];
lineStripBuffer = makeBuffer(lineStrip);
lineStripBuffer.vertexCount = 5;

去掉共用的點，還剩下5個頂點，不過-0.5, -0.5, 0.0,出現(xiàn)了2次，為什么不能省略呢？因為這種共用是LineStrip處理不了的，如果想處理這種首尾共用的情況，得使用LineLoop。

LineLoop（直線環(huán)）

對應(yīng)繪制參數(shù)gl.LINE_LOOP。直線環(huán)可以更方便的描述閉合的形狀，比如上面的四邊形，用直線環(huán)就可以更簡潔的表達。

  var lineLoop = [
    -0.5, -0.5, 0.0,
    -0.5, 0.5, 0.0,
    0.5, 0.5, 0.0,
    0.5, -0.5, 0.0,
  ];
  lineLoopBuffer = makeBuffer(lineLoop);
  lineLoopBuffer.vertexCount = 4;

直線環(huán)會繪制一條直線自動閉合首尾的頂點。

Points （點）

對應(yīng)繪制參數(shù)gl.POINTS。點是最好理解的一種繪制模式，你提供幾個頂點，他就繪制幾個點。如果想要控制點的大小，可以在Vertex Shader中指定gl_PointSize = 具體大小;。WebGL繪制的點是正方形的，效果如下。

關(guān)于例子

本文的例子主要添加了select元素來選擇渲染模式，下面是選擇相關(guān)代碼。

function setupModeSelect() {
  currentDrawMode = gl.TRIANGLES;
  currentBuffer = triangleBuffer;
  var selectNode = document.getElementById("drawModeSelect");
  selectNode.onchange = function (evt) {
    switch (evt.target.value) {
      case 'triangles': 
        currentDrawMode = gl.TRIANGLES;
        currentBuffer = triangleBuffer;
        break;
      case 'triangle_strip': 
        currentDrawMode = gl.TRIANGLE_STRIP;
        currentBuffer = triangleStripBuffer;
        break;
      case 'triangle_fan': 
        currentDrawMode = gl.TRIANGLE_FAN;
        currentBuffer = triangleFanBuffer;
        break;
      case 'lines': 
        currentDrawMode = gl.LINES;
        currentBuffer = linesBuffer;
            break;
      case 'line_strip': 
        currentDrawMode = gl.LINE_STRIP;
        currentBuffer = lineStripBuffer;
        break;
      case 'line_loop': 
        currentDrawMode = gl.LINE_LOOP;
        currentBuffer = lineLoopBuffer;
        break;
      case 'point': 
        currentDrawMode = gl.POINTS;
        currentBuffer = triangleBuffer;
        break;
    }
  }
}

選擇后，通過currentDrawMode和currentBuffer控制當前的渲染過程。

gl.drawArrays(currentDrawMode, 0, currentBuffer.vertexCount);

這些繪制模式看起來簡單，卻是繪制復(fù)雜模型或者效果的基礎(chǔ)，掌握好它們，則會事半功倍。