Render backing image vtkjs

Web
1

Hi there,

I am looking to add some backing images to some polydata objects.

I currently have the images in png format & I can see that vtk js does not yet have a png image reader implemented.

Is there any alternative way in vtk js to render images in the scene?

Any help would be much appreciated

2

vtkTexture can use any image so I’m not sure what you are asking?

3

Ok thank you, are there any examples of this in the docs at all please?

I realise it might be obvious to a vtk veteran - i’m very new to it and finding a lot of the python examples make use of features that are not yet available in vtk js

4

All i need to do is just render a png file inside of vtk

5

The example using vtkTexture in vtk.js would be a good start.

6

Then you just use a plane as support for your picture rather than a sphere.

7

Hi @Sebastien_Jourdain

Thank you for your advice. I have managed to implement this using the approach suggested, and it all seems to work bar one small issue.

When the canvas is first rendered, the plane is visible, but the image does not appear until I interact with the canvas (i.e click, or mousewheel etc.) Once it has appeared, if the canvas is re-rendered, there is no issue and the image is present.

Looking at my below code, is there anything that I am missing that could be causing this? Or is there some additional setup in my renderer required?

image
image831×669 76.8 KB

Any help/guidance would be much appreciated!

Thanks
Stuart

8

You need to trigger a render once the image get’s fully loaded into the texture.

You can add the following line

img.addEventListener('load', renderwindow.render);
9

That’s done the trick - thank you very much!

1 Like