Making a Hello World VTK.js Proxy (help!)

Web
1

I’ve been messing around with VTK.js proxies for quite some time and still don’t feel I have a great handle on them, so I decided to try making the world’s simplest proxy / proxymanager - unfortunately it doesn’t work. Hoping someone can give me a hand in getting this working. :slight_smile:

Repo:

Goal:
Render a simple cone using VTK.js proxies and a proxy manager.

Process
First I created a really simple cone without using proxies (this works).

Then I attempted to follow the instructions in this thread on VTK.js proxies on the current forum.

The instructions are:

  1. Create a proxy config (VolView/main/src/vtk/proxy.js)
  2. Try a single volume representation (this points to same file as above, specifically line 59):
    • Result: Remains the same as above
  3. Create a ProxyManager that consumes the config (paraview-medical/master/src/main.js)
    • This is a little hard to follow, the repository has been renamed from paraview-medical to VolView and line 28 is blank.
    • I went back through the git history and found a version from before the post was made, strangely this one’s line 28 doesn’t seem relevant either.
    • But I think it may be line 26 (in the old version) we want or line 43 (in the new version)
    • Result: main.js
  4. Need to add a vtkImageData to a TrivialProducer proxy.
    • Unfortunately the linked to file no longer exists. I think I found an equivalent old version.
    • But I’m not sure the code here is what we need, there is no reference to a TrivialProducer proxy.
  5. Create a ViewProxy: proxyMaager.createProxy('Views', 'View3D', { name: 'my3DView' })
  6. Create a representation of source proxy and add it to the view.

So I got stuck on step 4 but jumping ahead past step 6 I see that @Forrest provided some sample code but this still leaves me a bit confused. I’ve added the sample code into main.js.

But this doesn’t leave me quite with a finished product, I need to display the view.

The only example of using a proxy manager I can find is for the AnimationProxyManager and unfortunately it diverges enough due to the animation that I can’t translate it into something I can use.

So here is what I have: main.js

And here is what I think I still need:

  1. A way to create a cone using vtkGeometryRepresentationProxy instead of a straight non-proxy render as shown in index-geometry.js
  2. A way to actually render and display the view.

Any help is appreciated :slight_smile:

Thanks,
Dave

You can find the example in the vtk.js source code at Sources/Proxy/Animation/AnimationProxyManager/example. I don’t recommend trying to use the code presented on the VTK.js example page because it shows only the JS, it doesn’t include the also necessary controller.html and proxyConfiguration.js files.[1]

[1]: Note that you’ll have difficulty running this example outside of the VTK.js source as it imports directly from the source, not using node modules. You can fix it to work stand-alone by installing VTK.js (npm i @kitware/vtk.js) and changing the imports from the form:

import 'vtk.js/Sources/Rendering/Profiles/All'

to:

import '@kitware/vtk.js/Rendering/Profiles/All'

Essentially, prepending the import with @kitware and removing /Sources following vtk.js.

1 Like
2

Is there any reason that you want to create your cone at the Representations level rather than at the Sources?

Keep in mind of that split:

  • Sources: Thing that produce data (like a mesh)
  • Representations: Thing that will transform data into a representation into a given view (picture on screen)
  • Views: Thing that gather representation into something to display
1 Like
3

The other discourse thread I referenced above that had instructions on setting up a proxy referenced this file as an example of how to setup a proxy configuration and it has it in representations: VolView proxy.js.

Can I simply move the declaration from Representations to Sources? e.g.:

Sources: {
  TrivialProducer: createProxyDefinition(vtkSourceProxy),
  GeometryProducer: createProxyDefinition(vtkGeometryRepresentation)
}
4

No, you can not put a class that aim to “convert data into a graphical representation” and pretend it to “generate data”. Each of those groups imply a specific API.

5

Got it, but there doesn’t appear to be a vtkGeometrySourceProxy?

6

But you can easily create it. The default SourceProxy support dataset or algorithm as input.
You can create your own proxy class that inherit SourceProxy and bundle ConeSource while exposing all the ConeSource properties.
Then when you create that source from the proxymanager, and want to display it in a view, it will create its representation for you (Geometry).

1 Like
7

Do you happen to have an example I can see of someone creating their own proxy class that inherits from SourceProxy?

8

I don’t but even thinking more about it, such thing could probably be done at the config layer directly with only few custom functions. I guess, I will have to create such example.

1 Like