Can I plot a mesh using VtkMesh?

[mmoelle1]

I followed the trame-cookiecutter approach to created a default application. In this application I would like to create and visualize a simple 2d mesh. To this end I have created this function

from trame.app import TrameApp
from trame.decorators import change, controller
from trame.ui.vuetify3 import SinglePageWithDrawerLayout
from trame.widgets import vuetify3, vtk

from vtkmodules.vtkCommonCore import vtkPoints
from vtkmodules.vtkCommonDataModel import vtkStructuredGrid

class MyTrameApp(TrameApp):
   [...]
   
   def create_2d_grid(self, nx, ny):
        grid = vtkStructuredGrid()
        points = vtkPoints()
        for y in range(ny):
            for x in range(nx):
                points.InsertNextPoint(x, y, 0)
        grid.SetDimensions(nx, ny, 1)
        grid.SetPoints(points)
        return grid

   [...]
   
   def _build_ui(self, *args, **kwargs):
        with SinglePageWithDrawerLayout(self.server) as self.ui:
        
        # Main content
        with self.ui.content:
            with vuetify3.VContainer(
                    fluid=True,
                    classes="pa-0 fill-height"
            ):

                with vtk.VtkView(v_show="dimension == '2d' && mode == 'grid'") as vtk_view:
                    vtk.VtkMesh(self.create_2d_grid(8, 6), color=(1, 0, 0))

However, no grid is visible. Any help on this issue is highly appreciated.

[jourdain]

You need a representation. You technically have to reproduce the pipeline using vue component hierarchy.

Also VtkMesh needs to be used differently, like in that example.

[mmoelle1]

Thank you @jourdain. I could reproduce the example. Could you please hint me to an example or a documentation of how to reproduce the pipeline using vue component hierarchy?

[jourdain]

Before going down that path, may I ask why you want to use vtk.js in that way rather than using a VtkLocalView or VtkRemoteView?

[mmoelle1]

What I want to develop is a UI with multiple tabs/vies as a front-end to a python code that produces a sequence of vti files. The UI should visualize this sequence but also provide another tab/view in which I can place objects (boxes) in a structured rectangular grid.

[jourdain]

Based on what you are describing, it seems that you can use either method. Are you planning to do any processing? If so either VtkRemoteView or VtkLocalView would be much better.

Are you doing volume rendering with the vti? If you do not do processing on the server side, why not use vtk.js directly?

[jourdain]

FYI, what I'm trying to identify is what rendering strategy match your needs since trame give you access to a couple but your choice will impact deeply the way you will code. And the VtkView is very different than the rest of the options which allow you to switch the strategy with only 1 line...

[jourdain]

Here is an example that implement the 3 types of views.

But the reason why we use it in the cookiecutter is because it does not require VTK and yet allow you to see an interactive visualization.

[jourdain]

Look at that example, you can see the difference in code across the 3 paths.

[mmoelle1]

I am now experimenting with the VtkLocalView approach. From what I understand from the documentation the VtkRemoteView requires a paraview instance to run on the server. That is not what I want since, in the long run, this app should be deployed as a web-based service with an arbitrary number of users doing independent visualizations. How much work would it be to create a simple example based on this code ``` from vtkmodules.vtkRenderingCore import ( vtkActor, vtkDataSetMapper, vtkRenderer, vtkRenderWindow, vtkRenderWindowInteractor, ) class renderWindow: """ Helper class that make it easier to handle renderWindows """ def __init__(self): self.renderer = vtkRenderer() self.renderer.SetBackground(0.8, 0.8, 0.8) self.renderWindow = vtkRenderWindow() self.renderWindow.AddRenderer(renderer) self.renderWindowInteractor = vtkRenderWindowInteractor() self.renderWindowInteractor.SetRenderWindow(renderWindow) self.renderWindowInteractor.GetInteractorStyle().SetCurrentStyleToTrackballCamera() ``` and the following snippet in the main app ``` # Main content with self.ui.content: with vuetify3.VContainer( fluid=True, classes="pa-0 fill-height" ): with vtk.VtkLocalView(self.renderWindow) as view: self.ctrl.view_update = view.update self.ctrl.view_reset_camera = view.reset_camera ``` that populates the renderView with a) a 2d structured grid and b) a hard-coded vti file?

…

On 5 Dec 2025, at 17:20, Sebastien Jourdain (Kitware) ***@***.***> wrote: FYI, what I'm trying to identify is what rendering strategy match your needs since trame give you access to a couple but your choice will impact deeply the way you will code. And the VtkView is very different than the rest of the options which allow you to switch the strategy with only 1 line... — Reply to this email directly, view it on GitHub <https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FKitware%2Ftrame%2Fdiscussions%2F834%23discussioncomment-15174529&data=05%7C02%7Cm.moller%40tudelft.nl%7C533bd36161764258dbe808de341a345b%7C096e524d692940308cd38ab42de0887b%7C0%7C0%7C639005484379673605%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=Mpe1vkux4YT8SDMaOjQk2G6E6RHIRtdAmkA2OpUVGAY%3D&reserved=0>, or unsubscribe <https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAAPGPI3KSOWVRWWJEDZIMML4AGWEXAVCNFSM6AAAAACN7DHS2CVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMJXGQ2TEOI&data=05%7C02%7Cm.moller%40tudelft.nl%7C533bd36161764258dbe808de341a345b%7C096e524d692940308cd38ab42de0887b%7C0%7C0%7C639005484379703691%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=PiGZJnLqeH3EeVeg6i%2F8jl5nEzfNDfDI54dN3KYYL3U%3D&reserved=0>. You are receiving this because you authored the thread.

[jourdain]

VtkRemoteView requires a paraview instance to run on the server.

Not accurate. VtkRemoteView and VtkLocalView require either VTK or ParaView on the server.

On the other end, VtkView do not require VTK on the server, but you may use it for processing and let you encode your rendering logic on the client. (so you don't need VTK on the server). But if you have VTK or ParaView on the server, VtkLocalView would be simpler to manage.

in the long run, this app should be deployed as a web-based service with an arbitrary number of users doing independent visualizations.

Then if you don't need server compute capabilities, trame is not the right solution. VTK.wasm or vtk.js with plain web app development is a better path forward.

[mmoelle1]

On the other end, VtkView do not require VTK on the server, but you may use it for processing and let you encode your rendering logic on the client. (so you don't need VTK on the server). But if you have VTK or ParaView on the server, VtkLocalView would be simpler to manage.

Understood. Then I will probably go for this solution. Just one question about VtkLocal/RemoteView. Can a single preview instance handle multiple different web queries simultaneously or can all users only see the same scene? Related to this question, would a VtkView based solution allow to handle multiply independent user requests simultaneously? That is what I understood from this.

Then if you don't need server compute capabilities, trame is not the right solution. VTK.wasm or vtk.js with plain web app development is a better path forward.

I opted for trame because it requires only very little coding to get a visually appealing UI.

[jourdain]

Trame handle multi-users by starting a new process (when deploying with docker) for each users. So on a single machine you can run out of memory with a lot of concurrent users but each session will then be independent. Using GoogleCloudRun can scale that beyond one machine easily. After that you can use Kubernetes to also allocate your processed across a cluster.

Another solution that is "not for production", you can use the serve tool. Instead of a process, each user get an async task within the same process.

[jourdain]

Then if you don't need server compute capabilities, trame is not the right solution. VTK.wasm or vtk.js with plain web app development is a better path forward.

I opted for trame because it requires only very little coding to get a visually appealing UI.

I love that and thanks for sharing why trame was appealing to you.

[mmoelle1]

I love that and thanks for sharing why trame was appealing to you. Then you might love this even more. We are developing classical CFD solutions but also quantum CFD (https://github.com/QCFD-Lab/qlbm) :-) — Reply to this email directly, view it on GitHub<#834 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAPGPI2BRTBVCJVJKMGC76D4AHQC5AVCNFSM6AAAAACN7DHS2CVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKMJXGYYTEMI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[mmoelle1]

May I ask you for some help on the following problem? I have created a class that produces a vtkCube and I want to be able to interact with it from the frame app

from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkDataSetMapper,
    vtkRenderer,
    vtkRenderWindow,
    vtkRenderWindowInteractor,
)

from vtkmodules.vtkCommonCore import vtkCommand
from vtkmodules.vtkCommonTransforms import vtkTransform
from vtkmodules.vtkFiltersSources import vtkCubeSource
from vtkmodules.vtkInteractionWidgets import vtkBoxWidget, vtkBoxWidget2, vtkBoxRepresentation
from vtkmodules.vtkRenderingCore import vtkPolyDataMapper

from trame.widgets import vtk

class vtkCube:
    """
    Helper class that makes it easier to handle vtkCube pipelines
    """

    def __init__(self):
        self.cube = vtkCubeSource()
        self.cube.SetXLength(1)
        self.cube.SetYLength(1)
        self.cube.SetZLength(1)
        self.cube.Update()
        
        self.mapper = vtkPolyDataMapper()
        self.mapper.SetInputConnection(self.cube.GetOutputPort())
        
        self.actor = vtkActor()
        self.actor.SetMapper(self.mapper)

        self.renderer = vtkRenderer()
        self.renderer.AddActor(self.actor)
        self.renderer.SetBackground(0.1, 0.2, 0.4)

        self.renderWindow = vtkRenderWindow()
        self.renderWindow.AddRenderer(self.renderer)
        
        self.renderWindowInteractor = vtkRenderWindowInteractor()
        self.renderWindowInteractor.SetRenderWindow(self.renderWindow)

        self.boxRep = vtkBoxRepresentation()
        self.boxRep.SetPlaceFactor(1.0)
        self.boxRep.PlaceWidget(self.cube.GetOutput().GetBounds())
        
        self.boxWidget = vtkBoxWidget2()
        self.boxWidget.SetInteractor(self.renderWindowInteractor)
        self.boxWidget.SetRepresentation(self.boxRep)
        #self.boxWidget.SetPlaceFactor(1.0)
        #self.boxWidget.SetProp3D(self.actor)
        #self.boxWidget.PlaceWidget()

        #self.boxWidget.SetTranslationEnabled(False)
        #self.boxWidget.SetScalingEnabled(True)
        #self.boxWidget.SetRotationEnabled(False)
        
        self.boxWidget.AddObserver(vtkCommand.InteractionEvent, self.on_interact)

        self.renderWindowInteractor.Initialize()
        self.boxWidget.On()

class MyTrameApp(TrameApp):
    def __init__(self, server=None):
        super().__init__(server, client_type="vue3")

        # --hot-reload arg optional logic
        if self.server.hot_reload:
            self.server.controller.on_server_reload.add(self._build_ui)

        # VTK setup
        self.cube = vtkCube()
        
        # Build ui
        self._build_ui()

        def _build_ui(self, *args, **kwargs):
            with SinglePageWithDrawerLayout(self.server) as self.ui:
              with self.ui.content:
                with vuetify3.VContainer(
                        fluid=True,
                        classes="pa-0 fill-height"
                ):
                    with vtk.VtkLocalView(self.cube.renderWindow, ref="view") as view:                        
                        # get interactor from VtkLocalView
                        iren = view.interactor
    
                        # attach the box widget to VtkLocalView's interactor
                        self.cube.boxWidget.SetInteractor(iren)
    
                        # optional: update render when interaction occurs
                        self.cube.boxWidget.AddObserver(vtkCommand.InteractionEvent, self.cube.on_interact)

                        self.ctrl.view_update = view.update
                        self.ctrl.view_reset_camera = view.reset_camera

The cube shows up and I can rotate and translate it but the on_interact callback function is never called. I assume that something must be conceptually wrong.

[jourdain]

Indeed VtkLocalView use vtk.js which does not implement the widgets that exists in VTK/C++. Also the point of doing local rendering with vtk.js is to offload the rendering and interaction to the client side. You will need to do some extra work to enable client/server synchronization.

If you are looking at using 3D widgets with a VTK server, you should look at trame-vtklocal which use WASM and enable such a thing. You can see simple examples here for trame.

[mmoelle1]

Okay, I start to get it. A follow-up question on the simple example: can I add multiple vtk.vtkConeSource objects to the same mapper and actor or do I need one mapper/actor per object. That is, assume I am creating an array of cubes, do I also need an array of mappers and actors?

[jourdain]

No you need one mapper/actor per object/data. Unless you use a GlyphMapper which will take 2 inputs. The locations of all the objects (as a polydata), and the object (cube) to clone visually.

[jourdain]

See https://kitware.github.io/vtk-js/examples/Glyph3DMapper.html for some context.

[mmoelle1]

Great. Thank you very much.

[mmoelle1]

May I once more ask for your help? I managed to put together some prototype app. I still have problems with the vtkBoxWidget or its newer counterpart vtkBoxWidget. As you can see in the screenshot below, the widget is visible but I cannot interact with it.

I am attaching all code files for completeness. The relevant code snippets are

self.boxWidget = vtk.vtkBoxWidget()
self.boxWidget.SetPlaceFactor(1.0)
self.boxWidget.SetInputData(self.cube.GetOutput())
        
# Connect interactor if provided
if self.interactor:
    self.boxWidget.SetInteractor(self.interactor)

# Connect renderer if provided
if self.renderer:
    self.boxWidget.SetDefaultRenderer(self.renderer)
    self.boxWidget.SetCurrentRenderer(self.renderer)

# Callback for interaction
def on_box_interaction(widget, event=None):
    print("on_box_intertaction")
    transform = vtk.vtkTransform()
    widget.GetTransform(transform)
    self.actor.SetUserTransform(transform)
                
self.boxWidget.AddObserver("InteractionEvent", on_box_interaction)
            
self.boxWidget.PlaceWidget()            
self.boxWidget.On()

in the constructor of the QLBMCuboid class. The vtkRenderer and vtkRenderWindowInteractor are passed as arguments to the cuboid object during its construction and are the ones of the QLBMGrid class. I have the impression that at least the interactor should come from the view. Any advice is highly appreciated.

I am attaching the complete source code below:
qlbmCore.py
qlbmVtk.py
qlbmGrid.py
core.py
main.py

[jourdain]

Interactive widgets don't work with local view.