How does Skia or Direct2D render lines or polygons with GPU?
Asked Answered
S

1

7

This is a question to understand the principles of GPU accelerated rendering of 2d vector graphics.

With Skia or Direct2D, you can draw e.g. rounded rectangles, Bezier curves, polygons, and also have some effects like blur.

Skia / Direct2D offer CPU and GPU based rendering.

For the CPU rendering, I can imagine more or less how e.g. a rounded rectangle is rendered. I have already seen a lot of different line rendering algorithms.

But for GPU, I don't have much of a clue.

  • Are rounded rectangles composed of triangles?
  • Are rounded rectangles drawn entirely by wild pixel shaders?

Are there some basic examples which could show me the basic prinicples of how such things work?

(Probably, the solution could also be found in the source code of Skia, but I fear that it would be so complex / generic that a noob like me would not understand anything.)

Sharkskin answered 25/9, 2021 at 20:10 Comment(1)
Found something: reddit.com/r/GraphicsProgramming/comments/93t3a0/…Sharkskin
O
8

In case of direct2d, there is no source code, but since it uses d3d10/11 under the hood, it's easy enough to see what it does behind the scenes with Renderdoc.

Basically d2d tends to have a policy to minimize draw calls by trying to fit any geometry type into a single buffer, versus skia which has some dedicated shader sets depending on the shape type.

So for example, if you draw a bezier path, Skia will try to use tesselation shader if possible (which will need a new draw call if the previous element you were rendering was a rectangle), since you change pipeline state.

D2D, on the other side, tends to tesselate on the cpu, and push to some vertexbuffer, and switches draw call only if you change brush type (if you change from one solid color brush to another it can keep the same shaders, so it doesn't switch), or when the buffer is full, or if you switch from shape to text (since it then needs to send texture atlases).

Please note that when tessellating bezier path D2D does a very great work at making the resulting geometry non self intersecting (so alpha blending works properly even on some complex self intersecting path).

In case on rounded rectangle, it does the same, just tessellates into triangles.

This allows it to minimize draw calls to a good extent, as well as allowing anti alias on a non msaa surface (this is done at mesh level, with some small triangles with alpha). The downside of it is that it doesn't use much hardware feature, and geometry emitted can be quite high, even for seemingly simple shapes).

Since d2d prefers to use triangle strips instead or triangle list, it can do some really funny things when drawing a simple list of triangles.

For text, d2d use instancing and draws one instanced quad per character, it is also good at batching those, so if you call some draw text functions several times in a row, it will try to merge this into a single call as well.

Obvolute answered 10/11, 2021 at 9:51 Comment(1)
Wow! I'll accept this as answer since it has many detailled information in it. (I will have to do a little bit research regarding some terms, but this is a very good starting point) Thanks!Sharkskin

© 2022 - 2024 — McMap. All rights reserved.