WEBGL - 七种基本图形的绘制

ゞ浴缸里的玫瑰 2022-10-22 06:26 188阅读 0赞

通过`gl.drawArrays(mode, girst,count)`方法，可以绘制七种基本图形，如下表所示

<table> 
 <thead> 
  <tr> 
   <th>基本图形</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>点</td> 
   <td><code>gl.POINTS</code></td> 
   <td>一系列的点，绘制在&nbsp;<code>v0 ,v1,v2....</code></td> 
  </tr> 
  <tr> 
   <td>线段</td> 
   <td><code>gl.LINES</code></td> 
   <td>一系列单独的线段，绘制在<code>(v0, v1),(v2,v3)...</code>，若点个数使奇数，则最后一个点被忽略</td> 
  </tr> 
  <tr> 
   <td>线条</td> 
   <td><code>gl.LINE_STRIP</code></td> 
   <td>一系列连接的线段，绘制在<code>(v0,v1),(v1,v2)...</code>最后一个点使一条线段的终点</td> 
  </tr> 
  <tr> 
   <td>回路线条</td> 
   <td><code>gl.LINE_LOOP</code></td> 
   <td>一系列连接的线段，与<code>gl.LINE_STRIP</code>相比，最后一个点会与开始的点相连接<code>(vn,v0)</code>,线段会闭合</td> 
  </tr> 
  <tr> 
   <td>三角形</td> 
   <td><code>gl.TRIANGLES</code></td> 
   <td>一系列单独的三角形，绘制在<code>(v0, v1, v2),(v3, v4, v5)...</code>，点个数若不是3的倍数，则剩下的被忽略</td> 
  </tr> 
  <tr> 
   <td>三角带</td> 
   <td><code>gl.TRIANGLE_STRIP</code></td> 
   <td>一些列条带状的三角形，前三个点构成第一个三角形，从第二个点开始的三个点构成第二个三角形，以此类推…，<code>(v0,v1,v2),(v2,v1,v3),(v2,v3,v4)...</code></td> 
  </tr> 
  <tr> 
   <td>三角扇</td> 
   <td><code>gl.TRIANGLE_FAN</code></td> 
   <td>一系列三角形组成的类似扇形的图形，前三个点构成第一个三角形，接下来的一个点和前一个三角形的最后一条边组成接下来的一个三角形，被绘制在<code>(v0, v1, v2),(v0, v2, v3),(v0, v3, v4)...</code></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][c582b0696e5eb92d0aa241e262dbad36.png]

2、绘制一个矩形

使用三角形的绘制方法`gl.TRIANGLE_STRIP`来通过4个点绘制两个三角形，实现绘制一个矩形

下面是四个点的位置  
![在这里插入图片描述][90dcf8861a95466fe40c553a19eebac7.png]

*  `v0(-0.5, 0.5)`
 *  `v1(-0.5, 0.5)`
 *  `v2(0.5, 0.5)`
 *  `v3(0.5, -0.5)`

使用三角带`gl.TRIANGLE_STRIP`这种绘图模式组成的第一个三角形是`(v0, v1, v2)`第二个是`(v2, v1, v3)`

var vertices = new Float32Array([
        -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
    ]);
    
    var n = vertices.length / 2;

*  1
 *  2
 *  3
 *  4
 *  5

此时的`n`值是`4`，也就是4个顶点，调用`gl.drawArrays()`

gl.drawArrays(gl.TRIANGLE_STRIP,0, n);

[c582b0696e5eb92d0aa241e262dbad36.png]: /images/20221022/3fd40d7d6b8747abbd1522914e2e5de7.png
[90dcf8861a95466fe40c553a19eebac7.png]: /images/20221022/1e14e50f3e994be48f79db15db37a13a.png