Based on the ImageCPRMapper example, get a screenshot of the cross section of the blood vessel at a central point

Web vtk.js
1

Hey vtk community,
according to the ImageCPRMapper example, how do I get a screenshot of the cross section of the blood vessel at this center point based on the point of the center line of the blood vessel, and a cross section of the different layers above and below the cross section of this center line

2

You need to create as many cente-lines as you want screenshots. The ImageCPRMapper example shows how to create the first screenshot. For the next screenshots (above and below), you need to manually/programmaticaly create new centerlines with points translated above and below the original centerline.

3

I’m not correct. I’m getting a cross-section of the blood vessels near the center line

4

my bad, you meant “cross-sections”, (so the vessel appears as a “circle”).
Then you simply need to use the ResliceCursorWidget example. You can feed it with an origin and a plane normal (both extracted from the centerline).

6

Thanks. I’ll try

7

Here’s how I implemented it, but for some reason no pictures appear，

        let normals = []
        const referenceDirection = [0, 0, 1]
        for (let i = 0; i < mapper.getCenterlineTangentDirections().length / 3; i++) {
          const tangent = [
            mapper.getCenterlineTangentDirections()[i],
            mapper.getCenterlineTangentDirections()[i + 1],
            mapper.getCenterlineTangentDirections()[i + 2]
          ]
          const normal = [0, 0, 0]
          vtkMath.cross(tangent, referenceDirection, normal)
          vtkMath.normalize(normal)
          normals.push(normal)
        }
        const genericRenderWindow = GenericRenderWindow.newInstance()
        const renderer = genericRenderWindow.getRenderer()
        const renderWindow = genericRenderWindow.getRenderWindow()
        renderer.setBackground([0, 0, 0])
        genericRenderWindow.setContainer(HtmlElement)
        const slicePlane = vtkPlane.newInstance()
        slicePlane.setNormal(...this.normals[0])
        slicePlane.setOrigin(imageData.getCenter())
        const mapper2 = vtkImageResliceMapper.newInstance()
        mapper2.setSlicePlane(slicePlane)

        mapper2.setSlabType(1) // SlabTypes.MAX
        mapper2.setInputData(imageData)

        const actor = vtkImageSlice.newInstance()
        actor.setMapper(mapper2)
        renderer.addActor(actor)
        renderer.setBackground(0.2, 0.3, 0.4)
        renderWindow.render()
8

I don’t see anything wrong with your code. You might want to check your plane normal.
Alternatively, you can try modifying the ImageResliceMapper example progressively with your code to see when it stops working.

9

Now the plane can display the image, but the plane normal vector “normals” of my center point calculates the wrong value such as [0,-0,0]. How to calculate the plane normal vector of the center point? And how should the camera’s angle of view be calculated (renderer.getActiveCamera().elevation(angle)), so that it can look at the section of the center point

10

For the normal vector computation, please consider “geometry” forums.

For the camera, you can set its focal point (center of your image) and its position (center of your image + plane vector if you are in parrallel projection)

12

Referring to the example “vtk.js”, why is the following code for obtaining the cross-section of a blood vessel not quite right?

const mapper = vtkImageResliceMapper.newInstance()
const slicePlane = vtkPlane.newInstance()
slicePlane.setNormal(normal)
mapper.setSlicePlane(slicePlane)
mapper.setSlabType(SlabTypes.MAX)
const actor = vtkImageSlice.newInstance()
actor.setMapper(mapper)
renderer.addActor(actor)
mapper.setInputData(currentImage)
slicePlane.setOrigin(...currentPoint)
renderer.getActiveCamera().setParallelProjection(false)
renderer.getActiveCamera().setFocalPoint(...focalPoint)
renderer.getActiveCamera().setPosition(...currentPoint)
renderer.getActiveCamera().setViewUp(...normal)
renderer.resetCamera()
renderer.resetCameraClippingRange()
renderWindow.render()
13

Your code seems to be very different from the VTK.js example. Where is currentImage coming from ?

14

The currentImage is obtained from the link(vtk-js/Sources/Rendering/Core/ImageCPRMapper/example/index.js at master · Kitware/vtk-js · GitHub). The result obtained will be used to crop the cross-section of the blood vessel with the above code.

15

Gotcha.

How about currentPoint ?
I doubt that the camera view up should be the plane normal. It should be orthogonal to it…

16

currentPoint is a point on the center of a certain blood vessel. Currently, now, the camera view up is normal.The code is as follows

let direction1 = vec3.subtract([], point1, point2)
let direction2 = vec3.subtract([], point2, point3)
vec3.normalize(direction1, direction1)
vec3.normalize(direction2, direction2)
let normal = vec3.subtract([], direction1, direction2)
vec3.normalize(normal, normal)
let Bnormal = vec3.cross([], direction2, normal)

the camera view up is set to Bnormal ? Or how to change

17

you have a high chance of having normal to be [0,0] if point1, point2 and point3 are on the same line.
I would do:

focalPoint = point2;
normal = normalize( direction1 + direction2 )
currentPoint = focalPoint + normal
viewUp = normalize( direction2 - direction1 ) // or something like vtkMath.perpendiculars(normal, [], viewUp)