Thicker lines on Cube and/or applying TubeFilter to CubeSource?

Web
1

Hi there,

I’m trying to thicken the lines of a wireframe cube so that the boundaries are more visible when viewed against an MRI image. I read that the setLineWidth is not supported by WebGL, so I have been trying to use the TubeFilter to accomplish the same effect (ref: [vtk.js] LineWidth with vtkLineSource - #5 by banesullivan)

However, I noticed that all of the examples of TubeFilter involve lines or polydata, and not volumes, such as with the CubeSource. Is it possible to apply the TubeFilter to the edges of a cube? If not, do you have any suggestions on what I might be able to try?

Here is an excerpt of my code:

    const cubeActor = vtkActor.newInstance();
    const cubeMapper = vtkMapper.newInstance();
    const cubeSource = vtkCubeSource.newInstance({
      xLength: 0.1,
      yLength: 0.1,
      zLength: 0.1,
    });
    cubeMapper.setInputConnection(cubeSource.getOutputPort());
    cubeActor.setMapper(cubeMapper);
    cubeActor.getProperty().setRepresentation(1);

    const tubeFilter = vtkTubeFilter.newInstance();
    tubeFilter.setInputConnection(cubeSource.getOutputPort());
    tubeFilter.setRadius(0.05);
    tubeFilter.setNumberOfSides(50);
    tubeFilter.setCapping(false);
    tubeFilter.setInputArrayToProcess(0, "Scalars", "PointData", "Scalars");

    const tubeMapper = vtkMapper.newInstance();
    tubeMapper.setInputConnection(tubeFilter.getOutputPort());
    const tubeActor = vtkActor.newInstance();
    tubeActor.setMapper(tubeMapper);
    renderer.addActor(tubeActor);
    renderer.addActor(cubeActor);

Use case example, in which the edges of the cube are just barely visible. Changing the color helps slightly, but a thicker line would be much better.

image
image1170×1224 69.8 KB

Thanks!

2

What you would need is the vtkFeatureEdges filter that produce polylines from your cube.

You can port it from C++, it shouldn’t be too hard. Problem is, you also need a vtkPointLocator. It can also be ported to JS from C++.

Alternatively, if you only need support for a cube, you could create your own polylines manually, there are only 12 lines to create.

Hth,
Julien.

3

Hi @finetjul,

Thanks so much for the quick response. Do you have any resources you recommend on porting the C++ VTK components to JS? I am unfamiliar with all things C++ so porting these over sound quite intimidating to me.

In the meantime, I’ll look into the polylines approach. Ultimately we would also like the cube to be resizable, so I hope the manually-constructed cube out of polylines is adjustable in a relatively straightforward way after initialization as well…

Thanks!

4

Sorry, I do not have any specific resources for that.
But the C++ code you would have to port is somehow basic (e.g. no crazy templating).
Feel free to have a look here

5

Thanks for the response. It is likely out of scope for me right now to do all the C++ porting but I will keep this resource in mind for the future. Cheers!