Installing ParaViewWeb

Hi @olearypatrick thanks for prompt response. Came across trame before but skipped it. Actually, got confused between the selection of paraviewweb, vtkpython and trame. Right now we have an app in VTK-JS in which we are facing issues if the VTI file is greater than 700MB. So, exploring web side rendering. Can you please help me in selecting the right technology.

@olearypatrick I checked on trame. It looks like complete development framework to me. As I understood we have to develop whole application using python which will be deployed on server and accessed through browser. We already have developed our application using VTK-JS and in mid-way facing issue with bigger volume files. So we are looking for something which we can incorporate in our existing javascript libraries to handle huge data.

In which case, you will have to setup the network with wslink and a vtk server to enable remote rendering. You can find an example on how to do it using the vue framework in that demo project. This also provide the server side implementation for either VTK and ParaView.

The example provided above is technically the same thing as that trame example.

HTH

Hi @jourdain, I had tried that vue framework example but getting following error. Will try the trame example.

( 152.570s) [paraview ]vtkWin32OpenGLRenderWin:680 ERR| vtkWin32OpenGLRenderWindow (00000214AA6C4BB0): failed to get wglChoosePixelFormatARB
( 152.572s) [paraview ]vtkWin32OpenGLRenderWin:758 ERR| vtkWin32OpenGLRenderWindow (00000214AA6C4BB0): failed to get valid pixel format.
( 152.573s) [paraview ]vtkOpenGLRenderWindow.c:493 ERR| vtkWin32OpenGLRenderWindow (00000214AA6C4BB0): GLEW could not be initialized: Missing GL version

Where are you running your server? Do you have a GPU? Do you have the driver (for your GPU) installed? Is your server headless?

Currently I’m running it on my development machine only. It has a basic Nvidia Ge Force 210 512 MB graphic card. Drivers are installed for it.
I also tried trame framework. Able to run the local rendering example. But on running remote rendering example getting same error as for paraviewweb.


2022-03-24 18:22:42.889 (0.251s) [ ]vtkWin32OpenGLRenderWin:680 ERR| vtkWin32OpenGLRenderWindow (000001671DA21940): failed to get wglChoosePixelFormatARB
2022-03-24 18:22:42.906 (0.268s) [ ]vtkWin32OpenGLRenderWin:758 ERR| vtkWin32OpenGLRenderWindow (000001671DA21940): failed to get valid pixel format.
2022-03-24 18:22:42.909 (0.271s) [ ]vtkOpenGLRenderWindow.c:493 ERR| vtkWin32OpenGLRenderWindow (000001671DA21940): GLEW could not be initialized: Missing GL version

Hi @simplyvish ,

Please check that your graphic driver is working properly. Using glxinfo and sharing the results would be a first step.

Best,

Hi @mwestphal ,
I’m working on Windows-10 platform and glxgears is not present on it. I had used it in past on Cent OS. Checked for Windows but unable to find proper source for setting up.

You can use dxdiag for that on windows.

You can also use this technique:

1 Like

Hi @mwestphal ,

Please find attached screenshot.

Device Manager:
image

You are not using your GPU, that why paraview is not able to display anything

I’m getting same error in trame as well. However, I’m able to render images on browser using my VTK-JS application. Can you please explain the difference and suggest me some setting for that GPU uses ?

vtk.js use your browser to do the rendering. Your browser will provide the rendering API regardless of your hardware/software. VTK/ParaView/Trame require your system to have such rendering API available on your machine. This normally happen by installing the proper drivers for your GPU.

Also using Remote Display or VM can mess up access to what get exposed in term of rendering capabilities which will then prevent VTK/ParaView/Trame to produce any 3D rendering.

HTH

1 Like

Thanks @jourdain for the explanation. Will try for graphics settings suggested.

Hi,
I’m able to run the trame application. I tried the cone example and able to view it in browser. I also tried rendering vti file and loaded it successfully. But, on the browser I can only see a cuboid. I tried the settings done in my VTK-JS application but can’t find all corresponding functions in trame. Do we have some api docs similar to VTK-JS which can be referred. I’m attaching the code below for reference if anyone can suggest what am I missing.

from tkinter.tix import Tree
from pyparsing import Or
from trame.layouts import SinglePage
from trame.html import vtk, vuetify

from vtkmodules.vtkCommonColor import vtkNamedColors
from vtkmodules.vtkIOXML import vtkXMLImageDataReader
from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkDataSetMapper,
    vtkRenderer,
    vtkRenderWindow,
    vtkRenderWindowInteractor,
    vtkRenderedAreaPicker
)
from vtkmodules.vtkFiltersGeometry import vtkGeometryFilter
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleRubberBandPick, vtkInteractorStyleSwitch  # noqa
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa
import vtkmodules.vtkRenderingOpenGL2  # noqa

CURRENT_DIRECTORY = os.path.abspath(os.path.dirname(__file__))

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

renderer = vtkRenderer()
renderWindow = vtkRenderWindow()
renderWindow.AddRenderer(renderer)
renderWindow.SetWindowName('VTI Reader')

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

interactorTrackball = renderWindowInteractor.GetInteractorStyle()
interactorSelection = vtkInteractorStyleRubberBandPick()
areaPicker = vtkRenderedAreaPicker()
renderWindowInteractor.SetPicker(areaPicker)

vtiReader = vtkXMLImageDataReader()
vtiReader.SetFileName("head-ascii.vti")
vtiReader.Update()

vtiSource = vtiReader.GetOutput()
scalarRange = vtiSource.GetScalarRange()
sampleDistance = vtiSource.GetSpacing()

surfaceFilter = vtkGeometryFilter()
surfaceFilter.SetInputConnection(vtiReader.GetOutputPort())
surfaceFilter.SetPassThroughPointIds(True)

vtiMapper = vtkDataSetMapper()
vtiMapper.SetInputConnection(surfaceFilter.GetOutputPort())
vtiMapper.SetScalarRange(scalarRange)
vtiMapper.SetScalarVisibility(True)

vtiActor = vtkActor()
vtiActor.SetMapper(vtiMapper)
vtiActor.GetProperty().SetRepresentationToWireframe()
vtiActor.GetProperty().ShadingOn()
vtiActor.GetProperty().SetAmbient(0.2)
vtiActor.GetProperty().SetDiffuse(0.7)
vtiActor.GetProperty().SetSpecular(0.3)
vtiActor.GetProperty().SetSpecularPower(8.0)
vtiActor.GetProperty().SetOpacity(0.5)

colors = vtkNamedColors()

renderer.AddActor(vtiActor)
renderer.ResetCamera()
renderer.SetBackground(colors.GetColor3d('Wheat'))
renderer.ResetCameraClippingRange()
renderWindow.Render()

VTK_VIEW_SETTINGS = {
    "interactive_ratio": 1,
    "interactive_quality": 80,
}

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

#html_view = vtk.VtkLocalView(renderWindow)
html_view = vtk.VtkRemoteView(renderWindow)

layout = SinglePage("Volume Viewer", on_ready=html_view.update)
layout.title.set_text("VTI File Viewer")

layout.content.children += [
    vuetify.VContainer(
        fluid=True,
        classes="pa-0 fill-height",
        children=[html_view],
    )
]

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

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

The image that is visible on browser is:
image

You have the VTK example web site and more specifically the Python part, but the C++ ones will be similar too.

Then you have the free VTK Book.

1 Like

In your pipeline you ran a filter to extract the outer geometry rather than doing Volume rendering directly (assuming that is what you are trying to do).

Thanks @jourdain I’m referring the examples and the online VTK class reference and they are helpful. I started with VTK from VTK-JS and now exploring Trame. So was comparing VTK-JS functions available in Trame and facing some difficulty there. Exploring more in to it.

Initially I rendered the volume directly but was only able to see outside box. Then was trying to extract shape fr which that filter was included. Will check again if I can get it work.

Hi, just for update I was able to render the vti file in required representation after changing the mapper from vtkDataSetMapper to vtkFixedPointVolumeRayCastMapper.

1 Like