绘制矩形

矩形由两个三角形拼成，但只需要四个顶点：一条索引缓冲让 0 与 2 号顶点被两个三角形共用。 这是索引绘制最小的完整例子。

说明

索引写成 [0, 1, 2, 0, 2, 3]，六个索引覆盖两个三角形。 顶点只有四个，所以 vertexCount 是 4、indexCount 是 6， 绘制时按索引取顶点，重复的角不会被重复上传。

「切换长宽比」只改写顶点坐标缓冲，索引、着色器与缓冲区布局都不动。 索引描述的是拓扑关系，几何形状变化不影响它。

索引缓冲怎么挂上去

const idxBuffer = device.createBuffer({
  data: new Uint16Array([0, 1, 2, 0, 2, 3]),
  usage: Buffer.INDEX,
  indexType: 'uint16'
});

const model = new Model(device, {
  topology: 'triangle-list',
  vertexCount: 4,
  indexCount: 6,
  indexBuffer: idxBuffer,
  attributes: { positions: posBuffer, colors: colBuffer },
  bufferLayout: [
    { name: 'positions', stepMode: 'vertex', format: 'float32x3' },
    { name: 'colors', stepMode: 'vertex', format: 'float32x3' }
  ],
  vs: vsSource,
  fs: fsSource
});

索引类型由 indexType 声明，也可以从数组类型推断。 顶点数超过 65535 时必须改成 uint32，否则索引会截断成错误的值。

顶点数与索引数别写反

vertexCount 是缓冲区里的顶点个数，indexCount 是索引个数。 只写 vertexCount 而绑定了索引缓冲时，绘制数量会按顶点数取， 结果是矩形只画出前两个三角形的一部分。判断依据很简单：画面上少了一角，先查这两个数。

GIS 里的对应场景

面要素的三角化结果天然带索引：一个多边形的顶点表只存一份，三角形表按索引引用。 同一套索引还能复用于描边与填充，只是 topology 与着色器不同。