ParaViewWeb used with vtk.js for server-side rendering

Web Support
1

Hello,

I am looking into building a web-based viewer for Electronmicroscopy data with server side rendering and have been experimenting with the capacity of both vtk.js and ParaViewWeb to do so.

From what I understand, vtk.js uses a function called ImageStream to be compatible with remote-side rendering, creating a second overlay in the browser, which the user then moves, and ImageStream sends that mouse movement to the server, which moves the server-rendered cone. There is an example of this functionality here.

ParaViewWeb has a class RemoteRenderer which reads mouse movements in the browser, renders frames, and then sends the rendered frames to browser when they are ready to be viewed.

So first, is my understanding of what each of these softwares is doing accurate?

Additionally, ParaViewWeb has it’s own function called WSLinkImageStream, but I haven’t found documentation on what WSLinkImageStream does or how it is similar/different/compatible with vtk.js’s ImageStream.

Ultimately our team would like to be able to use both ParaViewWeb’s capacity for server-side rendering, and vtk.js’s capacity for minimal representation overlays in browser in an EM viewer. How can we go about integrating these softwares?

Best, GM

2

Hi Georgia,

You definitely have the big picture on how things works. Except that the RemoteRenderer in ParaViewWeb is actually something similar to the ImageStream in vtk.js. Both are JS libs that talk to the same server in the same fashion. The vtk.js is more recent, and I will go with it.

You can find an example here.

Recently I’ve added that class in vtk.js that helps the remote rendering usage and setup. I don’t think we actually have a public example of its usage yet, but it is used across 3 of our commercial ones. Although that new class won’t be convenient if you want to blend remote and local rendering like the example is doing.

Regarding the wsLink part, just ignore it as it is the library that deal with the network layer underneath. We just specialized our implementation for VTK or ParaView on top of it.

Hopefully the template example will give you enough background to move forward and experiment such client/server integration.

HTH,

Seb

3

Hi Georgia,

Recently I’m just about to begin similar things as you are doing right now. I’m starting with ParaViewWeb, but don’t have a clear clue how to customize it to fit in our requirement. Would you please enlight me a little bit if you have already figured it out?

4

Those simple examples might provide some clue on how to create a web application with ParaViewWeb.

5

HI Sebastien,

thanks a lot~ I will start from there. but I still got confused about the difference about paraview web and vtk.js. Are they supposed to be applied under different scenarios?

Actually, I’m trying to setup a 3D web viewer which supports zoom, pan, rotate, and in the meantime, clip with user-specified implicit function… When I see paraview, I feel like it is a great tool to accomplish those functions, but then I see vtk.js, so I get confused. would you please suggest either paraview web or vtk.js?

6

ParaViewWeb (aka pvw) is what you are looking for. But vtk.js is a JavaScript library that allow 3D local rendering but also provides components to enable remote rendering via ParaView or VTK.

7

Hi Sebastien,

Thanks a lot for your quick reply.

So ParaViewWeb seems handy to get started.

8

Hi Sebastien and Ryan,

Thanks both of you for your replys.

My team decided to move forward with ParaViewWeb for the moment. We’re working on implementing loading capacity for png and obj file types at the moment, and then will be working on selecting/zooming/etc. on the rendered objects. So my follow-up would actually be: What’s the best way to make selections in paraviewweb?

We intend to return to vtk.js integration eventually, and I think the vue-vtkjs-pvw-template will be really helpful. Thanks for that!

Best, GM

9

With something like that on the server side

# ParaViewWeb
from wslink import register as exportRpc
from paraview import simple, servermanager
from paraview.web import protocols as pv_protocols

# Picking
from vtkmodules.vtkCommonCore import vtkCollection
from vtkmodules.vtkPVClientServerCoreRendering import vtkPVRenderView


class MyProtocol(pv_protocols.ParaViewWebProtocol):

    def __init__(self):
      self.view = simple.Render()
      
      # Selection part
      self.selection = simple.ExtractSelection()
      self.extractSelection = simple.MergeBlocks(Input=self.selection)


    @exportRpc("your.own.rpc.endpoint")
    def pickPoint(self, x, y):
      output = {}
      selectedRepresentations = vtkCollection()
      selectionSources = vtkCollection()
      found = self.view.SelectSurfacePoints([int(x), int(y), int(x), int(y)], selectedRepresentations, selectionSources)
      if selectedRepresentations.GetNumberOfItems() == selectionSources.GetNumberOfItems() and selectionSources.GetNumberOfItems() == 1:
        # We are good for selection
        representation = servermanager._getPyProxy(selectedRepresentations.GetItemAsObject(0))
        selection = servermanager._getPyProxy(selectionSources.GetItemAsObject(0))
        self.selection.Input = representation.Input
        self.selection.Selection = selection
        self.extractSelection.UpdatePipeline()
        selectedDataSet = self.extractSelection.GetClientSideObject().GetOutput()
        selectedData = selectedDataSet.GetPointData()
        nbArrays = selectedData.GetNumberOfArrays()
        for i in range(nbArrays):
          array = selectedData.GetAbstractArray(i)
          output[array.GetName()] = array.GetValue(0)

        # Add picked point world coordinates
        output['worldPosition'] = selectedDataSet.GetPoints().GetPoint(0)


        return output

      return None
1 Like