挑战任务:使用索引绘制四边形

使用 gl.ELEMENT_ARRAY_BUFFER 和 gl.drawElements() 绘制四边形,对比 drawArrays() 方案。

实现与比较说明

  • 顶点数组只保存 4 个不重复顶点(v0 左上、v1 左下、v2 右上、v3 右下);索引数组保存 6 个索引,组成 2 个三角形:(0,1,2) 和 (1,3,2)。
  • 与 drawArrays() 方案的区别:drawArrays 下四边形必须提供 6 个顶点数据(两个三角形各自写 3 个,共用顶点要重复写),GPU 对每个顶点都执行一次顶点着色器;而 drawElements() 方案中,共享顶点(v1、v2)在显存里只存一份,通过索引重复引用,顶点着色器只需执行 4 次,既节省存储,又避免重复计算。
你的浏览器不支持 HTML5 canvas。
等待运行...