为什么用单个 bufferData 调用替换这些矩阵转换要慢得多？

Question

I'm trying to optimize my shader that draws sprites and I originally had something like this:

// this matrix will convert from pixels to clip space
var matrix = m3.projection(this.camera.viewportWidth / this.camera.scale, this.camera.viewportHeight / this.camera.scale);

// this matrix will translate our quad to dstX, dstY
matrix = m3.translate(matrix, dstX, dstY);

// this matrix will scale our 1 unit quad
// from 1 unit to texWidth, texHeight units
matrix = m3.scale(matrix, dstWidth, dstHeight);

gl.uniformMatrix3fv(attribs.matrixLocation, false, matrix);

The above code is inspired from this tutorial: https://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html

Which worked, but I already have my camera matrix transformation saved, so I wanted to avoid having to do all of those matrix transformations each frame. Each of those m3.whatever calls allocates a new array, so I thought to replace it with the following:

gl.bindBuffer(gl.ARRAY_BUFFER, attribs.positionBuffer);

attribs.positionsQuad[0] = dstX;
attribs.positionsQuad[1] = dstY + dstHeight;
attribs.positionsQuad[2] = dstX;
attribs.positionsQuad[3] = dstY;
attribs.positionsQuad[4] = dstX + dstWidth;
attribs.positionsQuad[5] = dstY + dstHeight;

attribs.positionsQuad[6] = dstX + dstWidth;
attribs.positionsQuad[7] = dstY + dstHeight;
attribs.positionsQuad[8] = dstX;
attribs.positionsQuad[9] = dstY;
attribs.positionsQuad[10] = dstX + dstWidth;
attribs.positionsQuad[11] = dstY;

gl.bufferData(gl.ARRAY_BUFFER, attribs.positionsQuad, gl.DYNAMIC_DRAW);
gl.vertexAttribPointer(attribs.positionLocation, 2, gl.FLOAT, false, 0, 0);

gl.uniformMatrix3fv(attribs.matrixLocation, false, camera.ClipTransform);

Which also works, but now my frame-rate is very spikey. Does anyone know why this is? I tried profiling it and it indeed says that my image drawing shader is now slower, but I'm not sure how this could be. I replaced a bunch of matrix allocations and transformations with writing to a single pre-allocated array and then transferring that, and now it's much slower?

It seems that a lot of the frame rate jumps may be due to the garbage collector running, but even this doesn't make sense to me. With the initial solution, there should have been so much more garbage, considering I'm allocating and throwing away a ton of arrays each frame with all those matrix transformations. And now I'm not allocating at all, so why would GC usage spike now?

Is there a better way to accomplish this? I've uploaded my entire shader here for reference: https://pastebin.com/tdCYpDqv

Answer 1

For most graphics API commands what happens is that the command is encoded in a command-buffer, at some point (asynchronously) those buffers are synchronized to the GPU by the graphics driver. For a command buffer to be predictable all data needs to be copied to be put into the buffer.

Now one problem with your code is that you're setting the data and immediately ask the GPU to draw from it, requiring a hard sync of the complete buffer. The driver expects uniforms to need syncing but not necessarily array buffers, the usage hints ( DYNAMIC , STREAM and STATIC draw) don't really do much about that (actually in most cases STATIC_DRAW is faster even for dynamic data).

When these hard syncs happen you're almost always stalling the pipeline, meaning the GPU needs to wait for all the data to be transferred before it can continue doing whatever it was doing. You can avoid this by utilizing double or even triple buffering (write data for the next frame but render current one etc.).

However with all this being said, trying to optimize the draw of 6 quads is very problematic as (in this context) we're talking about immeasurable differences here, changing one thing over the other might change the frame-time but it doesn't say anything about scalability as you're really just measuring the (often static) overhead rather than the actual performance.