挑战任务:使用索引绘制四边形
使用 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 次,既节省存储,又避免重复计算。
等待运行...