What are the quicker ways to draw graphs than by d

问题:

As of now I'm drawing my debug performance graphs with 1px rectangles stretched to necessary height, but drawing a lot of data this way causes significant performance loss.

Currently the logic is: collect all timings for current frame, place them into the Queue<float>s and draw a graph for each queue by drawing 300 stretched 1px sprites. There are 4 graphs, so it's 1200 sprites in debug overlay alone, which is resource consuming.

Is there a better way to draw graphs that at least won't require drawing so many sprites?

回答1:

Line List

You could use VertexPositionColor arrays to store individual graph values, then use GraphicsDevice.DrawUserIndexedPrimitives<VertexPositionColor> together with a defined line list (indices) to draw them with orthographic projection.

_{The .gif is resized 50% due to file size.}

I'm drawing these samples (4 graphs with 300 value points/pixels each) at 60fps.

---

Triangle Strip

If you need to fill the graphs below the line, you could draw a triangle strip instead (with points at bottom of the graph).

---

Line List Code

Here is the relevant code for the first graph rendered above:

Matrix worldMatrix;
Matrix viewMatrix;
Matrix projectionMatrix;
BasicEffect basicEffect;

VertexPositionColor[] pointList;
short[] lineListIndices;

protected override void Initialize()
{
    int n = 300;
    //GeneratePoints generates a random graph, implementation irrelevant
    pointList = new VertexPositionColor[n];
    for (int i = 0; i < n; i++)
        pointList[i] = new VertexPositionColor() { Position = new Vector3(i, (float)(Math.Sin((i / 15.0)) * height / 2.0 + height / 2.0 + minY), 0), Color = Color.Blue };

    //links the points into a list
    lineListIndices = new short[(n * 2) - 2];
    for (int i = 0; i < n - 1; i++)
    {
        lineListIndices[i * 2] = (short)(i);
        lineListIndices[(i * 2) + 1] = (short)(i + 1);
    }

    worldMatrix = Matrix.Identity;
    viewMatrix = Matrix.CreateLookAt(new Vector3(0.0f, 0.0f, 1.0f), Vector3.Zero, Vector3.Up);
    projectionMatrix = Matrix.CreateOrthographicOffCenter(0, (float)GraphicsDevice.Viewport.Width, (float)GraphicsDevice.Viewport.Height, 0, 1.0f, 1000.0f);

    basicEffect = new BasicEffect(graphics.GraphicsDevice);
    basicEffect.World = worldMatrix;
    basicEffect.View = viewMatrix;
    basicEffect.Projection = projectionMatrix;

    basicEffect.VertexColorEnabled = true; //important for color

    base.Initialize();
}

To draw it:

foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
    pass.Apply();
    GraphicsDevice.DrawUserIndexedPrimitives<VertexPositionColor>(
        PrimitiveType.LineList,
        pointList,
        0,
        pointList.Length,
        lineListIndices,
        0,
        pointList.Length - 1
    );
}

For the triangle strip graph, modify the code to display a triangle strip, and for each point in the graph curve put one on the bottom of the graph.