Vg-renderer Usage Example/Documentation for BGFX.

[pranavgore]

Hello! Is there any working example/documentation/code sample for how to use this inside BGFX? I am new to BGFX, currently I a rendering the simple geometry using BGFX. If I want to use this renderer, how can I use this inside my sample code? I also tried to go through the previous issue regarding the example but was not able to make much out of it. Any help is appreciated.

• Thanks in advance! @jdryg

[jdryg]

I should probably write a simple bgfx example for vg-renderer at some point. Until then, here is a general overview on how to use it.

• During initialization, create a context using vg::createContext(). Pass a valid bx::AllocatorI and NULL as the config struct to use the default config.
• Each frame
  • For each bgfx view you want to use vg-renderer
    • Call vg::begin(vgCtx, viewID, frameBufferWidth, frameBufferHeight, 1.0f)
    • For each shape:
      • Call vg::beginPath(vgCtx)
      • Define shapes using vg::rect(), vg::circle(), etc.
      • Call vg::fillPath() and/or vg::strokePath() to generate shape geometry.
    • Call vg::end(vgCtx) to end drawing for this bgfx view (submit generated meshes to bgfx).
  • Call vg::frame(vgCtx) once at the end of the frame (reset buffer counters and font atlas textures).
• At shutdown, call bgfx::frame() at least twice before calling vg::destroyContext() to make sure all buffers won't be used by bgfx after being freed by vg-renderer.

NOTE: All bgfx views touched by vg-renderer should be set to bgfx::ViewMode::Sequential view mode.

There are a couple more stuff not covered in the above pseudocode such as command lists, fonts/text, images, gradients, etc. but this should be enough to draw something on screen.

[pranavgore]

Hello @jdryg!

Thanks a ton for the reply! As mentioned in the reply I tried this out in my sample code. Attached below is the screenshot for the same. While trying this out I noticed many other functions for clipping, text rendering, image rendering, gradient, command-list, etc. It would be more than helpful if you could provide the pseudocode for usage for all these functions.

Also, I noticed one more thing, when using vg renderer functions, non - vg renderer elements i.e. all other things are completely discarded and only elements rendered with the vg renderer are visible. Is this the intended behavior or is there any other way to render both vg render elements and other things simultaneously? And is object picking supported in vg-renderer?

[jdryg]

I noticed one more thing, when using vg renderer functions, non - vg renderer elements i.e. all other things are completely discarded and only elements rendered with the vg renderer are visible. Is this the intended behavior or is there any other way to render both vg render elements and other things simultaneously?

Unfortunately, I haven't tried this myself. If that is indeed the case, you can try using a separate/dedicated bgfx view for vg-renderer bound to the same framebuffer as your main view.

And is object picking supported in vg-renderer?

No. As mentioned in the Readme, you can try using the provided stroker and path structs in your code to generate triangle lists for your shapes and perform picking yourself (point in triangle tests).

[jdryg]

Hello again.

I've uploaded a bgfx example project into my own bgfx fork showcasing vg-renderer. It includes a very simple demo (draw a single shape) as well as the nanovg demo translated to vg-renderer. You can find it here: https://github.com/jdryg/bgfx/tree/xx-vg-renderer

Unfortunately I don't know when, if and in what form it will be merged into bgfx so you can clone/use this branch until then.

Things currently missing from the example project:

• Clip paths
• Command lists

[jdryg]

Just uploaded an extra demo (Chessboard) in the vg-renderer example project showcasing command lists, caching and clipping.

Hope it helps.