Block images stream while interacting

Web Support
1

Hello,
I was following this tutorial for displaying models remotely and locally in browser. I am wondering if it is possible to block the images stream when a I am interacting with the model. I want to show only an image when I am not interacting with the model, but only show the model rendered in browser when I am interacting with it. Is there a way to do that?
I am using vtk.js with paraview as a server.
Thanks.

2

So you are doing a blend of local rendering and remote rendering?

And want to do local rendering when interacting and switch to remote once the interaction stopped?

You sure can do that by pushing the client camera to the server and trigger a render while preventing sending mouse interaction to the server.

3

Exacty, that is what I want to do.

I was trying to do it like that the code below where I hide the local rendering when I am not interacting with it:

  viewStream.setInteractiveQuality(100);
                    viewStream.setInteractiveRatio(1);
                    viewStream.setCamera(renderer.getActiveCamera());
                    viewStream.pushCamera();

                    const myObject = renderer.getActors()[0];

                    renderWindow.getInteractor().onStartAnimation(() => {
                        viewStream.endInteraction();
                        myObject.setVisibility(true);
                    });

                    renderWindow.getInteractor().onEndAnimation(() => {
                        viewStream.startInteraction();
                        setTimeout(() => {
                            viewStream.endInteraction();
                            myObject.setVisibility(false);
                        },80);
                    });

But I have some problems:

  1. I have to add the setTimeout, otherwise the interaction of the time is not enough and the position of the local model differs from the remote one. I do not if there is a better way to do it.
  2. I want to hide the local model once I receive the first image to make it smooth. Inside the setTimeout, the method myObject.setVisibility(false) does not work.
  3. Is there a way to clean the last image receive from the server? So that when I am interacting with the model I just want to see the local one.

Thank you!

4

Should the following be enough?

renderWindow.getInteractor().onEndAnimation(() => {
    viewStream.pushCamera();
    viewStream.render(); 
    myObject.setVisibility(false);
});
5

Thanks, that solves the fact of using setTimeout, I do not know if it is possible to hide the visability in the exactly moment when an image is received.
I was trying also to clear the last image received when I am interacting by playing with the renderer background. Another option I was trying to implement is to send a message to the server to hide the remote model. Do you know a better option?

Thanks again.

6

So you can attach a listener on the viewStream (when image is ready) to hide your actor when you receive it.

For the interaction part, I think you just want to deal with it locally, by changing the visibility of the image or something along those lines.

7

How can I change the visibility of the image?
I know the viewStream has the image, but I cannot set anything related to the image. Should I work directly with HTML components?

8

Yes, I was thinking doing a querySelector and changing the style programmatically.

9

Yes, I did that and know it works, thank you so much!
I was wondering if you know any common benchmark to determinate how good is the user experience, like fluidity, delay, latency, CPU performance.

Thank you again!

10

Those are indeed tricky to capture but you can figure some of that by adding listener to events. But since you are doing a single stillRender, you are probably experiencing some latency for getting the “nice picture”. You could technically perform 2 renders (interactive low quality + still high quality) to reduce the perceived latency.