What is best way to implement controls that render very fast?
-
Hi,
I'm considering to create our own QML controls like dials and sliders etc.
Because I want to create UIs with hundreds of dials and sliders they need to render fast. All controls may be automated and thus move in real time. So again, rendering must be fast.What is the best way to create these controls? There seem to be many ways and I'm fairly new to QML.
To name a few methods (as far as I know):
- QQuickPaintedItem (CPU based, thus probably to slow)
- QQuickItem + QSGGeometryNode
- QQuickItem + custom shaders
- QSGRenderNode / QRhi (probably overkill)
Are there any other (more suitable?) methods?
I guess best is to inherit from Control? If so, can I still use the QQuickItem + QSGGeometryNode or QQuickItem + custom shaders implementation methods for the drawing?
What is the best way to support styles? Should/can I use the QML Style system?
Is there a tutorial or demo (video) explaining how to deal with mouse control for QQuickItem + QSGGeometryNode or QQuickItem + custom shaders implementation methods?Our final app should run on Windows, Mac and preferable mobile.
-
@Simmania said in What is best way to implement controls that render very fast?:
QQuickPaintedItem (CPU based, thus probably to slow)
QQuickItem + QSGGeometryNode
QQuickItem + custom shaders
QSGRenderNode / QRhi (probably overkill)These are all solutions that use low-level C++ code.
I suggest writing some solutions in high-level QML first, as a way to get familiarized with QML and Qt Quick. This familiarity will help if you later decide you still need a solution written in C++.
But before you go down the C++ route, ensure that you benchmark your QML solution. If you're not actually hitting any bottlenecks, there's no need for low-level coding.
Notes:
- QML-defined components are automatically GPU-accelerated
- You can add custom sharers in QML too
What is the best way to support styles? Should/can I use the QML Style system?
Have a look at the new QML StyleKit:
@JKSH said in What is best way to implement controls that render very fast?:
QQuickPaintedItem
I already tried the QML-only and QQuickPaintedItem options. Both are to slow for me.
So I now choosed for QQuickItem + QSGGeometryNode. Not to complicated and hopefully fast enough.
-
======From Gemini:
Rendering hundreds of real-time animated controls requires minimizing GPU draw calls, avoiding offscreen framebuffers, and keeping memory bandwidth low.The Best Rendering Approaches
For a large UI with real-time updates, QQuickItem + QSGGeometryNode or SDF (Signed Distance Field) Custom Shaders are the best approaches.QQuickItem + QSGGeometryNode (Recommended)
Why: You build custom vertex geometry directly on CPU/GPU buffers. Because Qt’s scene graph automatically batches nodes that share materials and textures, rendering 100+ dials/sliders can be compressed into very few draw calls.
When to use: Great for sharp, vector-like geometry (e.g., dial ticks, slider tracks, simple needles).
-
======From Gemini:
Rendering hundreds of real-time animated controls requires minimizing GPU draw calls, avoiding offscreen framebuffers, and keeping memory bandwidth low.The Best Rendering Approaches
For a large UI with real-time updates, QQuickItem + QSGGeometryNode or SDF (Signed Distance Field) Custom Shaders are the best approaches.QQuickItem + QSGGeometryNode (Recommended)
Why: You build custom vertex geometry directly on CPU/GPU buffers. Because Qt’s scene graph automatically batches nodes that share materials and textures, rendering 100+ dials/sliders can be compressed into very few draw calls.
When to use: Great for sharp, vector-like geometry (e.g., dial ticks, slider tracks, simple needles).
@JoeCFD I am not sure how that helps. Are you knowledgable enough to confirm that the answer is correct? Gemini uses the right words, but I don't have enough knowledge to know if this is the right answer. The forum can only survive when it provides better answers than AI. If you cannot vouch for the answer (which cannot be gained from your post if you can), this answer is useless.
That being said: I haven't used QML myself, so I cannot really answer the question. But here are a few general guidelines: Only redraw the things that are changing. However, you already mentioned that everything might be animated at the same time, so this advice does not help much. Other than that, you should only render the things that are visible on the screen. Especially with mobile platforms I expect some UI elements to be off the screen. Scene graphs are really helpful to automatically handle this.
One last thing that has been discussed multiple times on this forum: Don't redraw too often! Some people try to redraw every time there is new data. However, redrawing at 'only' 60Hz is totally sufficient. Every change in between that is not noticable. Try to batch your redraw calls based on an elapsed timer or something similar.
-
Hi,
I'm considering to create our own QML controls like dials and sliders etc.
Because I want to create UIs with hundreds of dials and sliders they need to render fast. All controls may be automated and thus move in real time. So again, rendering must be fast.What is the best way to create these controls? There seem to be many ways and I'm fairly new to QML.
To name a few methods (as far as I know):
- QQuickPaintedItem (CPU based, thus probably to slow)
- QQuickItem + QSGGeometryNode
- QQuickItem + custom shaders
- QSGRenderNode / QRhi (probably overkill)
Are there any other (more suitable?) methods?
I guess best is to inherit from Control? If so, can I still use the QQuickItem + QSGGeometryNode or QQuickItem + custom shaders implementation methods for the drawing?
What is the best way to support styles? Should/can I use the QML Style system?
Is there a tutorial or demo (video) explaining how to deal with mouse control for QQuickItem + QSGGeometryNode or QQuickItem + custom shaders implementation methods?Our final app should run on Windows, Mac and preferable mobile.
@Simmania said in What is best way to implement controls that render very fast?:
QQuickPaintedItem (CPU based, thus probably to slow)
QQuickItem + QSGGeometryNode
QQuickItem + custom shaders
QSGRenderNode / QRhi (probably overkill)These are all solutions that use low-level C++ code.
I suggest writing some solutions in high-level QML first, as a way to get familiarized with QML and Qt Quick. This familiarity will help if you later decide you still need a solution written in C++.
But before you go down the C++ route, ensure that you benchmark your QML solution. If you're not actually hitting any bottlenecks, there's no need for low-level coding.
Notes:
- QML-defined components are automatically GPU-accelerated
- You can add custom sharers in QML too
What is the best way to support styles? Should/can I use the QML Style system?
Have a look at the new QML StyleKit:
-
@Simmania said in What is best way to implement controls that render very fast?:
QQuickPaintedItem (CPU based, thus probably to slow)
QQuickItem + QSGGeometryNode
QQuickItem + custom shaders
QSGRenderNode / QRhi (probably overkill)These are all solutions that use low-level C++ code.
I suggest writing some solutions in high-level QML first, as a way to get familiarized with QML and Qt Quick. This familiarity will help if you later decide you still need a solution written in C++.
But before you go down the C++ route, ensure that you benchmark your QML solution. If you're not actually hitting any bottlenecks, there's no need for low-level coding.
Notes:
- QML-defined components are automatically GPU-accelerated
- You can add custom sharers in QML too
What is the best way to support styles? Should/can I use the QML Style system?
Have a look at the new QML StyleKit:
@JKSH said in What is best way to implement controls that render very fast?:
QQuickPaintedItem
I already tried the QML-only and QQuickPaintedItem options. Both are to slow for me.
So I now choosed for QQuickItem + QSGGeometryNode. Not to complicated and hopefully fast enough.
-
S Simmania has marked this topic as solved
-
@JKSH said in What is best way to implement controls that render very fast?:
QQuickPaintedItem
I already tried the QML-only and QQuickPaintedItem options. Both are to slow for me.
So I now choosed for QQuickItem + QSGGeometryNode. Not to complicated and hopefully fast enough.
@Simmania said in What is best way to implement controls that render very fast?:
So I now choosed for QQuickItem + QSGGeometryNode. Not to complicated and hopefully fast enough.
Please post your results from this try here once you have it working. Just in case someone stumbles across this thread in the future.
