返回

图元重启：WebGL 2.0 的利器

前端


    WebGL 2.0 的图元重启功能是一个非常有用的工具，可以用来创建各种各样的特殊效果。它可以用来创建间断的线段，绘制具有不同材质的物体，或者创建具有洞的物体。

    图元重启的实现方式很简单。只需要在需要重新开始一个新的图元的地方，调用 `gl.primitiveRestartIndex()` 函数即可。这个函数的参数是一个索引值，表示新的图元从这个索引开始。

    例如，以下代码绘制了一个间断的线段：

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

    // 创建一个顶点缓冲区
    const vertices = new Float32Array([
      0, 0, 0, // 第一个顶点
      1, 0, 0, // 第二个顶点
      2, 0, 0, // 第三个顶点
      3, 0, 0, // 第四个顶点
    ]);

    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // 创建一个索引缓冲区
    const indices = new Uint16Array([
      0, 1, 2,  // 第一个三角形
      2, 3, 0,  // 第二个三角形
      3, 4, 0,  // 第三个三角形
    ]);

    const indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    // 启用顶点属性
    const positionAttribute = gl.getAttribLocation(program, 'position');
    gl.enableVertexAttribArray(positionAttribute);
    gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);

    // 启用图元重启
    gl.enable(gl.PRIMITIVE_RESTART);
    gl.primitiveRestartIndex(2);

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

    这段代码首先创建了一个 WebGL 2.0 上下文，然后创建了顶点缓冲区和索引缓冲区。接下来，启用了顶点属性和图元重启。最后，调用 `gl.drawElements()` 函数绘制图形。

    在上面的代码中，图元重启索引设置为 2。这意味着当索引值为 2 时，WebGL 会重新开始一个新的图元。因此，第一个三角形是 (0, 1, 2)，第二个三角形是 (2, 3, 0)，第三个三角形是 (3, 4, 0)。

    图元重启功能非常强大，可以用来创建各种各样的特殊效果。它在游戏开发、三维建模和科学可视化等领域都有广泛的应用。