WebGL 2.0进阶：揭秘图元重启（PRIMITIVE_RESTART_FIXED_INDEX）的妙用

前端

2022-11-10 11:39:03

图元重启：WebGL 2.0 的利器，赋能灵活的几何图形渲染

想象一下，在绘制图形时，你可以动态地重启图元，轻松实现曲面细分或渲染复杂的几何形状。WebGL 2.0 中的图元重启特性就是你的超级工具，它让这一切成为可能！

什么是图元重启？

图元重启是一种强大的技术，允许你在索引缓冲区中插入一个特殊值**（PRIMITIVE_RESTART_FIXED_INDEX）** ，当 GPU 遇到这个值时，它会立即结束当前图元并从下一个索引开始一个新的图元。

图元重启的应用场景

图元重启的应用场景无穷无尽，包括：

线框渲染： 轻松绘制线框，只需将线段端点的索引插入索引缓冲区并适当插入PRIMITIVE_RESTART_FIXED_INDEX 。
曲面细分： 通过将曲面控制点的索引插入索引缓冲区并适当插入PRIMITIVE_RESTART_FIXED_INDEX ，即可实现精细的曲面细分。
点云可视化： 渲染点云从未如此简单，只需将点云点的索引插入索引缓冲区并适当插入PRIMITIVE_RESTART_FIXED_INDEX 。

WebGL 2.0 的图元重启示例

让我们用一个实际的例子来说明图元重启的威力：

// 创建一个WebGL 2.0上下文
const gl = document.getElementById('canvas').getContext('webgl2');

// 创建索引缓冲区
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
const indices = new Uint16Array([
  0, 1, 2,     // 第一个三角形
  0, 2, 3,     // 第二个三角形
  PRIMITIVE_RESTART_FIXED_INDEX, // 重启图元
  4, 5, 6,     // 第三个三角形
  4, 6, 7      // 第四个三角形
]);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

// 创建顶点缓冲区
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
const vertices = new Float32Array([
  -1.0, -1.0, 0.0, // 顶点 0
  1.0, -1.0, 0.0, // 顶点 1
  1.0,  1.0, 0.0, // 顶点 2
  -1.0,  1.0, 0.0  // 顶点 3
]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 链接顶点属性
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttributeLocation);

// 绘制三角形
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);