VTK.JS Setting CubeSource Edge Width and Color

Hi, I’m a newbie to image rendering and to vtk.js. I was trying the inbuilt VolumeViewer example and after some efforts was able to run it. Now, I’m creating a bounding box at required position in the the vti file rendered. I read online and concluded that CubeSource will help me.

I created the cube. But unable to set the edge width. The lines are too thin to be clearly visible. I used LineWidth function but it doesn’t changes anything.

I also set the edge color. But the edge color is only visible when the cube is filled. If I set the cube to WireFrame mode, the edge color is not properly shown.

Can someone guide me further.

Thanks and Regards

AFAIK line width is inconsistent in webgl, so by extension line width won’t do much in vtk.js. @ken-martin may have more details.

As for the edge color, I suspect that may be having to do with polygon edges. If you want the wireframe to change color, maybe set the color of the actor directly, e.g. actor.setColor(...).

1 Like

Line width is not defined very well in the webgl spec.

Here is the topic:

1 Like

I had the same question here: Thicker lines on Cube and/or applying TubeFilter to CubeSource?

It seems like this feature does not exist in vtk.js at this moment, unfortunately :frowning:

I was somewhat able to work around it for my use case by defining a fill color and setting the opacity low so instead of a wireframe of a cube, it’s a lightly colored, semi-transparent cube.

  cubeActor.getProperty().setColor(0, 1, 0);
1 Like

Thanks @Donny_Zimmerman. As per that topic, people have tried other data source for the way around. Will try that.

Thanks @anonymous_iguana. I had tried doing that. I am drawing the cube over a volume file to highlight a particular object in it. Even after setting the transparency my base object was not clearly visible after filling the cube with color. Still looking into it.

Thanks @Forrest. I tried setting color for actor but getting same response.

Coloring wireframe edges should just be a call to setColor:

pipeline.actor.getProperty().setColor(1, 1, 0); // yellow
pipeline.actor.getProperty().setRepresentation(1); // wireframe representation constant

See this example: edge coloring - CodeSandbox

Yup, that was pretty much the same case for me except that my object likely has enough contrast to be able to be seen even with a mostly-transparent cube over it. Sorry to hear that it isn’t for you. I wish there was a compromise between the semi-opaque cube and the very thin outline!

@Forrest I initially setting the edge color when cube was solid and it was working. Then I switched to wireframe and the edge color was not working. But the color was setting the edge color too. So, it’s kind of working.

@anonymous_iguana I achieved it using the TubeSource. I created a TubeSource with PolyData and manually created a cube. There I can set the tube diameter which is not setting the edge thickness. Just the corners are not so good. But for now it will work.

1 Like