How does the point cloud rendered by vtkPolyData interact with each point?

Web
1

I want to view the point information when clicking each point in the point cloud. How can I get the click event of vtkPoints

2

The best example to follow on vtk.js is using CELLS but you should be able to do it on POINTS.

3

Thank you very much. I also asked a question about adding color to each point of the point cloud. Julien Finet replied to this question, but I don’t know how to set the color with the vtkColorTransferFunction class. Do you know how to set the color for each point of the point cloud.
The problem:

4

Like Julien said. Add a scalar to each point or rgb. And either use a lookup table to map a scalar to a color or do a direct mapping if you have an rgb info. You should be able to find that in the online vtk example in C++ or Python.
In vtk.js you should be able to also find some examples where we render geometry with color.

5 
  const pointsNumber = points.getNumberOfPoints();

  const colors = new Uint8Array(pointsNumber * 3);

 for (let i = 0; i < pointsNumber; i += 1) {
    colors[i * 3 + 0] = 0;
    colors[i * 3 + 1] = 255;
    colors[i * 3 + 2] = 0;
  }

I realized color rendering in this way. I didn’t use the vtkColorTransferFunction class. How do I write it if I use this class? Also, I want to set the transparency of the point. How do I configure it

6

If you want transparency you need a 4th component (rgba).

polydata.getPointData().addArray(vtkDataArray.newInstance({
   values: colors,
   numberOfComponents: 3, // or 4
   name: 'colors',
}));

Then on the mapper you do not want scalar mapping.

7

Hello, I tried this example vtk.js. I call the method by click event, but not every click will trigger, even if I click the point.

document.addEventListener('mousedown', (event) => {
    const [x, y] = eventToWindowXY(event);
    hardwareSelector.getSourceDataAsync(renderer, x, y, x, y).then((result) => {
      console.log(result);
      if (result) {
        processSelections(result.generateSelection(x, y, x, y));
      } else {
        processSelections(null);
      }
    });
});

function processSelections(selections) {
    if (!selections || selections.length === 0) {
      return;
    }

    const {
      worldPosition: rayHitWorldPosition,
      compositeID,
      prop,
      propID,
      attributeID,
    } = selections[0].getProperties();

    console.log(selections);
    console.log(selections[0].getProperties());
    console.log(hardwareSelector.getFieldAssociation());
    if (hardwareSelector.getFieldAssociation() === FieldAssociations.FIELD_ASSOCIATION_POINTS) {
      // Selecting points
      console.log('attributeID', attributeID);
    }
    renderWindow.render();
  }

Can you help me see why this happens?

8 
const pointsNumber = points.getNumberOfPoints();

const colors = new Uint8Array(pointsNumber * 4);

for (let i = 0; i < pointsNumber; i += 1) {
    colors[i * 4 + 0] = 0;
    colors[i * 4 + 1] = 255;
    colors[i * 4 + 2] = 0;
    colors[i * 4 + 3] =  0.5;
}

polyData.getPointData().addArray(
    vtkDataArray.newInstance({
      name: 'Colors',
      numberOfComponents: 4,
      values: colors,
    })
);

Render the correct point cloud：
image

With transparency, the color does not render.
image

Excuse me, where was it written incorrectly？

Sorry, the assignment is wrong when the color data is cycled, data[i*3+0] should be data[i*4+0].
However, using the addArray method does not work. Instead, use the setScalars method. Why?

9

I found the problem. I did not use the vtkFullScreenRenderWindow class, which did not display in full screen, resulting in the wrong coordinates calculated by the eventToWindowXY method.

10

addArray works, you just need to do an extra setting on the mapper to say you want to see the Colors array. setScalars make it active by default which allow you to skip setting the mapper properly.