# VTK in QML

**URL:** <https://discourse.vtk.org/t/vtk-in-qml/7556>\
**Category:** Development\
**Created:** [January 4, 2022, 8:46am UTC](https://discourse.vtk.org/t/vtk-in-qml/7556 "2022-01-04T08:46:42Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![loiczimm](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/c6cbf5/32.png) [@loiczimm](https://discourse.vtk.org/u/loiczimm)\
**Post date:** [January 4, 2022, 8:46am UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/1 "2022-01-04T08:46:42Z")

</div>

Hello,

I’m trying to integrate VTK9.1 in a QML project. I’m using Qt6.2. The integration seems to be straight forward at first but then I realized that the VTK item is no drawn on the correct layer as it shoud in QML. VTK is always in the far background. I’m not able to draw any QML stuff on top of VTK. To illustrate this I modified TestQQuickVTKREnderItem.qml. I simply added a semi transparent magenta rectangle before the VTKRenderWindow. This way if it follow the QML standard, the magenta rectangle must be behind the VTK view. But it is display on top of VTK window.

Has anyone experienced this kind of issue. Is there any work around to avoid this isssue ? Am I missing something ?

Thanks a lot for your help…

Best regards and Happy new year !!!

Loic

The modification in TestQQuickVTKRenderItem.qml

```auto
  Text {
	  id: label
	  color: "white"
	  wrapMode: Text.WordWrap
	  text: "Custom QML\nrectangle &\ntext"
	  anchors.right: parent.right
	  anchors.left: parent.left
	  anchors.top: parent.top
	  anchors.margins: 10
	  width: 100
  }

+ Rectangle {
+ anchors.fill: parent
+ color: "magenta"
+ opacity: 0.2
+ }

  VTKRenderWindow {
	id: vtkwindow
	width: 400
	height: 400
  }

  VTKRenderItem {
	objectName: "ConeView"
	x: 200
	y: 200
	width: 200
	height: 200
	renderWindow: vtkwindow
	focus: true
  }
}

```

---

<div class="post-metadata">

**Author:** ![efc](https://discourse.vtk.org/user_avatar/discourse.vtk.org/efc/32/3202_2.png) [@efc](https://discourse.vtk.org/u/efc)\
**Post date:** [January 4, 2022, 9:27pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/2 "2022-01-04T21:27:53Z")

</div>

I believe you may not be declaring your rectangle at the right place in your QML. This is counter intuitive, but in QML, **a sibling declared below another sibling will be drawn on top**. From QML doc:

> Qt Quick items use a recursive drawing algorithm for determining which items are drawn on top in case of collisions. In general items are drawn on top of their parent items, **in the order they were created (or specified in the QML file)**.

This last bold part I take to mean that elements are drawn according to their order of declaration if they are located at the same level of the QML parent/child hierarchy.

If you look at the image provided in the [doc](https://doc.qt.io/qt-5/qtquick-visualcanvas-visualparent.html#stacking-order), you will see that the blue rectangle, declared at the bottom, is on top of the green rectangle, declared above.  
In the example you’re providing, you’re declaring your rectangle before the `VTKRenderItem`.

---

<div class="post-metadata">

**Author:** ![loiczimm](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/l/c6cbf5/32.png) [@loiczimm](https://discourse.vtk.org/u/loiczimm)\
**Post date:** [January 5, 2022, 8:00am UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/3 "2022-01-05T08:00:24Z")

</div>

Yes exactly, as the rectangle is declared before the VTKRenderWindow and VTKRenderItem, it should be behind VTK. But it result with a rectangle beeing on top of VTK. I would wait to get that result if the rectangle was declared after the VTK items.

---

<div class="post-metadata">

**Author:** ![csantiago](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/c/a3d4f5/32.png) [@csantiago](https://discourse.vtk.org/u/csantiago)\
**Post date:** [January 12, 2022, 6:11pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/4 "2022-01-12T18:11:08Z")

</div>

The same thing is happening to me. Also, if you put the VTKRenderItem inside a rectangle it happens the same. Any luck?

---

<div class="post-metadata">

**Author:** ![iwuwu](https://discourse.vtk.org/user_avatar/discourse.vtk.org/iwuwu/32/4550_2.png) [@iwuwu](https://discourse.vtk.org/u/iwuwu)\
**Post date:** [January 17, 2022, 2:00pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/5 "2022-01-17T14:00:32Z")

</div>

Yes, this is an obvious mistake. The current version of GUISupportQtQuick connects to a wrong signal. Instead of override updatePaintNode() provided by QQuickItem. VTK currently only draws at the bottom of the QT Scene Graph, which makes it difficult to use. You either wait for VTK to provide a new implementation, or refer to the documentation of the QT scene graph, inherit a QQuickItem yourself, override updatePaintNode() and render the vtkWindow into a QSGRenderNode.

---

<div class="post-metadata">

**Author:** ![John.Stone](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/a6a055/32.png) [@John.Stone](https://discourse.vtk.org/u/John.Stone)\
**Post date:** [December 10, 2022, 7:07am UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/6 "2022-12-10T07:07:36Z")

</div>

You can try the QQuickVTKItem[.cpp/.h] from here: [GitHub - john-stone-ics/QuickVtk: rewrite of https://github.com/qCring/QuickVtk](https://github.com/john-stone-ics/QuickVtk)

It works much better.

---

<div class="post-metadata">

**Author:** ![danlipsa](https://discourse.vtk.org/user_avatar/discourse.vtk.org/danlipsa/32/390_2.png) [@danlipsa](https://discourse.vtk.org/u/danlipsa)\
**Post date:** [December 12, 2022, 3:07pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/7 "2022-12-12T15:07:21Z")

</div>

Hi John, Can you summarize how is your version better than the VTK provided version?

I wanted to try your version however it works only for Qt 5.x. Any chance you are going to upgrade it to Qt 6.x.

Thanks,  
Dan

---

<div class="post-metadata">

**Author:** ![John.Stone](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/a6a055/32.png) [@John.Stone](https://discourse.vtk.org/u/John.Stone)\
**Post date:** [December 12, 2022, 9:04pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/8 "2022-12-12T21:04:23Z")

</div>

Okay, I wrote it for Qt 5.15.2 but haven’t checked Qt 6

My code is a true QQuickItem that can participate in all “normal” scene graph operations like rotate, transform, layers, etc.

It was designed similary to the QQuickBufferFrameBufferObject implemenation.

I’ll check out QT 6 and see if I can’t get it working there too.

---

<div class="post-metadata">

**Author:** ![danlipsa](https://discourse.vtk.org/user_avatar/discourse.vtk.org/danlipsa/32/390_2.png) [@danlipsa](https://discourse.vtk.org/u/danlipsa)\
**Post date:** [December 13, 2022, 2:53pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/9 "2022-12-13T14:53:27Z")

</div>

Great. One problem I had with the VTK version is that vtkHardwareSelector does not work when handling widget events similar with [https://gitlab.kitware.com/vtk/vtk/-/issues/18409](https://gitlab.kitware.com/vtk/vtk/-/issues/18409). Let me know of your progress. Thank you!

---

<div class="post-metadata">

**Author:** ![John.Stone](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/a6a055/32.png) [@John.Stone](https://discourse.vtk.org/u/John.Stone)\
**Post date:** [December 14, 2022, 4:52am UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/10 "2022-12-14T04:52:17Z")

</div>

Okay, a small change was needed to support hardware picking from user code.

Also, some modest changes to support QT6

Checkout the QML version of the VTK example HighlightPickedActor

> **[GitHub - john-stone-ics/QML-VTK-Examples: QML version of a selection of...](https://github.com/john-stone-ics/QML-VTK-Examples)**
>
> QML version of a selection of KitWare's examples. Contribute to john-stone-ics/QML-VTK-Examples development by creating an account on GitHub.

> <https://github.com/john-stone-ics/QML-VTK-Examples/blob/main/HighlightPickedActor/main.qml>

> <https://github.com/john-stone-ics/QML-VTK-Examples/blob/main/HighlightPickedActor/QQuickVtkItem.h>

---

<div class="post-metadata">

**Author:** ![John.Stone](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/a6a055/32.png) [@John.Stone](https://discourse.vtk.org/u/John.Stone)\
**Post date:** [December 16, 2022, 4:59pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/11 "2022-12-16T16:59:18Z")

</div>

[https://gitlab.kitware.com/vtk/vtk/-/merge\_requests/9763](https://gitlab.kitware.com/vtk/vtk/-/merge_requests/9763)

---

<div class="post-metadata">

**Author:** ![John.Stone](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/j/a6a055/32.png) [@John.Stone](https://discourse.vtk.org/u/John.Stone)\
**Post date:** [June 5, 2023, 9:26pm UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/12 "2023-06-05T21:26:10Z")

</div>

B.t.w, this above merge request has been approved and is now part of VTK.

---

<div class="post-metadata">

**Author:** ![devansan](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/d/50afbb/32.png) [@devansan](https://discourse.vtk.org/u/devansan)\
**Post date:** [April 12, 2024, 7:37am UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/14 "2024-04-12T07:37:49Z")

</div>

Hello @John.Stone,

I am currently developing a Windows application using Qt 6.6.1 and VTK 9.3.0, and have successfully integrated your QQuickVTKItem class into my project.  
However, I am encountering a challenge regarding the smoothness of screen transitions.  
There is noticeable stuttering when manipulating the camera.

I have also observed this issue in a modified version of an example you provided, which was simply designed to load a single PLY file.

When employing the deprecated QQuickVTKRenderItem and QQuickVTKRenderWindow in the same environment, the application operates smoothly without any stuttering.

Could you please let me know if you are aware of this issue?  
Additionally, I would be interested to know which version of Qt you used during your development.  
Any advice or suggestions you could provide on resolving this problem would be immensely appreciated.

Thank you very much for your time.

---

<div class="post-metadata">

**Author:** ![devansan](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/d/50afbb/32.png) [@devansan](https://discourse.vtk.org/u/devansan)\
**Post date:** [July 4, 2024, 12:21am UTC](https://discourse.vtk.org/t/vtk-in-qml/7556/15 "2024-07-04T00:21:16Z")

</div>

The issue was resolved in VTK 9.3.1. Please refer to the Git history for details.

[https://gitlab.kitware.com/vtk/vtk/-/commits/master/GUISupport/QtQuick/QQuickVTKItem.cxx](https://gitlab.kitware.com/vtk/vtk/-/commits/master/GUISupport/QtQuick/QQuickVTKItem.cxx)