WebGL：使用不同的程序渲染很多对象

Question

我正在学习WebGL。

我制作了一个包含10个三角形的简单场景，当我将三角形数量增加到1000个时，场景开始冻结。我使用3个着色器和2个程序（用于仿真真实环境）。我知道我应该从渲染循环主体中取出一些东西，但是我不知道是什么。

我的代码在下面：

function render() {
  requestAnimationFrame(render);

  context.clear(context.COLOR_BUFFER_BIT);

  for (let i = 0; i < 10; i++) {
    const currentProgram = i % 2 === 0 ? blueProgram : redProgram;
    context.useProgram(currentProgram);

    const a_Position = context.getAttribLocation(currentProgram, "a_Position");

    const triangleGeometry = getTriangleGeometry(); // returns Float32Array filled with randoms

    const buffer = context.createBuffer();
    context.bindBuffer(context.ARRAY_BUFFER, buffer);

    context.bufferData(context.ARRAY_BUFFER, triangleGeometry, context.STATIC_DRAW);
    context.enableVertexAttribArray(a_Position);
    context.vertexAttribPointer(
      a_Position,
      2,
      context.FLOAT,
      false,
      0,
      0,
    );

    context.drawArrays(context.TRIANGLES, 0, 3);
  }
}

requestAnimationFrame(render);

任何想法我可以为性能优化做些什么？

Answer 1

有很多方法可以优化绘图，但是由于yoi才刚刚开始，最重要的是，一般而言，设置缓冲区应该在初始化时间而不是渲染时间进行。

请参见Draw multiple models in WebGL

问题中的代码正在查找每个三角形的位置。它应该将位置查找为初始化时间。

该代码还在为每个三角形创建一个新的缓冲区。创建一个缓冲区并用新的三角形对其进行更新会更快。

const gl = document.querySelector('canvas').getContext('webgl');
const prg
function render() {
  requestAnimationFrame(render);

  context.clear(context.COLOR_BUFFER_BIT);

  for (let i = 0; i < 10; i++) {
    const currentProgram = i % 2 === 0 ? blueProgram : redProgram;
    context.useProgram(currentProgram);

    const a_Position = context.getAttribLocation(currentProgram, "a_Position");

    const triangleGeometry = getTriangleGeometry(); // returns Float32Array filled with randoms

    const buffer = context.createBuffer();
    context.bindBuffer(context.ARRAY_BUFFER, buffer);

    context.bufferData(context.ARRAY_BUFFER, triangleGeometry, context.STATIC_DRAW);
    context.enableVertexAttribArray(a_Position);
    context.vertexAttribPointer(
      a_Position,
      2,
      context.FLOAT,
      false,
      0,
      0,
    );

    context.drawArrays(context.TRIANGLES, 0, 3);
  }
}

requestAnimationFrame(render);

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

问题中的代码似乎正在使用2个程序，一个程序绘制蓝色，另一个程序绘制红色。使用统一的程序选择颜色可能会更快。

如果您在初始化时将所有三角形放在单个缓冲区中，以及在初始化时将每个三角形的顶点颜色放在缓冲区中，而在渲染时只用一次绘制调用，则绘制起来会更快。如果您希望每帧都有随机三角形，那么在初始化时创建一个缓冲区，将N个随机三角形填充到单个缓冲区中，然后在一次绘制调用中全部绘制它们，将会更快。