WebGL06

gl.drawArrays的不同mode和不同顶点组合绘制一些基本图形。

绘制LINE的组合图形

使用示例让我们了解关于不同mode绘制图形的效果。
确定绘制的顶点坐标。

const vertices = new Float32Array([
  -.5, .5, -.5, -.5,
  0., .5, 0., -.5,
  .5, .5, .5, -.5
])

关于LINES相关的mode

  1. gl.LINE —— 绘制单独的线段，两个点为一组。
  2. gl.LINE_STRIP —— 绘制连接的线段，但是收尾不相连
  3. gl.LINE_LOOP —— 绘制连接的线段，且首尾顶点相连。

定义顶点的顺序可能会影响最终的绘制结果，具体表现在点与点之间的连接顺序不同导致出现不同图形结果。

绘制TRIANGLE的组合图形

了解关于线的基本图形绘制，现在了解关于面的基本图形绘制。本质上就是使用三角形组合基本的二维图形。 关于TRIANGLE相关mode的区别：

  1. gl.TRIANGLES —— 绘制多个单独的三角形。（3个点为单独一组）
  2. gl.TRIANGLE_STRIP —— 绘制组合的三角形，从第二点开始，每三个点构成一个三角形。
  3. gl.TRIANGLE_FAN 绘制组合三角形（扇形）全部三角形都公用一个顶点。

三角形的绘制是按照缓冲区顶点坐标的顺序绘制。

写在最后

未完待续…
希望大家好好生活，健康快乐。