Is there a working sample for using VtkWebXRHelper?

[FireDragonGameStudio]

Hi, I've stumbled over trame recently and wanted to adapt the tutorial sample for using with XR. Unfortunately I'm not familiar enough with trame (yet?) to make it work. Is there a sample, where I can learn from on how to use trame with XR? I attached my adapted sample code, from the cone tutorial. Maybe someone can point me into the right direction :)

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkPolyDataMapper,
    vtkRenderer,
    vtkRenderWindow,
    vtkRenderWindowInteractor,
)

# Required for interactor initialization
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa

# Required for rendering initialization, not necessary for
# local rendering, but doesn't hurt to include it
import vtkmodules.vtkRenderingOpenGL2  # noqa

from trame.widgets.vtk import VtkWebXRHelper

# -----------------------------------------------------------------------------
# Globals
# -----------------------------------------------------------------------------

DEFAULT_RESOLUTION = 6

# -----------------------------------------------------------------------------
# VTK pipeline
# -----------------------------------------------------------------------------

renderer = vtkRenderer()
renderWindow = vtkRenderWindow()
renderWindow.AddRenderer(renderer)

renderWindowInteractor = vtkRenderWindowInteractor()
renderWindowInteractor.SetRenderWindow(renderWindow)
renderWindowInteractor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()

cone_source = vtkConeSource()
mapper = vtkPolyDataMapper()
mapper.SetInputConnection(cone_source.GetOutputPort())
actor = vtkActor()
actor.SetMapper(mapper)

renderer.AddActor(actor)
renderer.ResetCamera()

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
state, ctrl = server.state, server.controller

# -----------------------------------------------------------------------------
# Functions
# -----------------------------------------------------------------------------


@state.change("resolution")
def update_resolution(resolution, **kwargs):
    cone_source.SetResolution(resolution)
    ctrl.view_update()


def reset_resolution():
    state.resolution = DEFAULT_RESOLUTION


def on_xr_enter(**kwargs):
    print(">>> XR session started")

def on_xr_exit(**kwargs):
    print("<<< XR session ended")

# Programmatic XR controls with explicit session types
def start_vr():
    ctrl.webxr_start_xr("immersive-vr")

def start_ar():
    ctrl.webxr_start_xr("immersive-ar")

def stop_xr():
    ctrl.webxr_stop_xr()

# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

with SinglePageLayout(server) as layout:
    layout.title.set_text("Hello trame")

    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="pa-0 fill-height",
        ):
            view = vtk.VtkLocalView(renderWindow)
            ctrl.view_update = view.update
            ctrl.view_reset_camera = view.reset_camera

           # Create WebXR object
            webxr = vtk.VtkWebXRHelper(view, show_button=True, show_controller=True)

            # Bind events
            webxr.enterXR = on_xr_enter
            webxr.exitXR = on_xr_exit

            # Expose webxr start/stop to controller so toolbar buttons can call them
            ctrl.webxr_start_xr = webxr.start_xr
            ctrl.webxr_stop_xr = webxr.stop_xr

    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VSlider(
            v_model=("resolution", DEFAULT_RESOLUTION),
            min=3,
            max=60,
            step=1,
            hide_details=True,
            dense=True,
            style="max-width: 300px",
        )
        with vuetify.VBtn(icon=True, click=reset_resolution):
            vuetify.VIcon("mdi-restore")

        vuetify.VDivider(vertical=True, classes="mx-2")

        vuetify.VSwitch(
            v_model="$vuetify.theme.dark",
            hide_details=True,
            dense=True,
        )
        with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera):
            vuetify.VIcon("mdi-crop-free")

        # XR control buttons
        with vuetify.VBtn(click=start_vr, color="primary"):
            vuetify.VIcon("mdi-vr")
            vuetify.VTooltip(bottom=True, v_slots=[{"name": "activator", "variable": "tooltip"}])
        with vuetify.VBtn(click=start_ar, color="success"):
            vuetify.VIcon("mdi-augmented-reality")
        with vuetify.VBtn(click=stop_xr, color="error"):
            vuetify.VIcon("mdi-close")
# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

if __name__ == "__main__":
    server.start()

[jourdain]

Here is an example that was WIP until vtk.js was getting updated to properly support it in trame.

@munozco should know better on the status of it though...

[munozco]

Hi,
VtkWebXRHelper doesn't take a view in its parameters. In your example, the view is read as the positional ref argument, you should remove it. To make the VtkWebXRHelper aware of which view it should use, you must use the with syntax like so:

view = vtk.VtkLocalView(renderWindow)
with view:
    webxr = vtk.VtkWebXRHelper(show_button=True, show_controller=True)

[FireDragonGameStudio]

Worked like a charm, thank you :)