I have some colors corresponding to points. How to render point clouds and set colors for each point

Web
1

I have some colors corresponding to points. How to render point clouds and set colors for each point

2

Wrap those colors into a vtkDataArray that you add to pointData

3

Sorry, I found all the relevant instances of the C # version. Do you have any examples of js? I encountered difficulties in creating point clouds at the beginning. I see that the c # version of vtkPolyData has setPoints, but the js version does not. How should the point be set to vtkPolyData in the js version?

4

vtkPolyData does have setPoints(), see here (accessors is provided thanks to this).

You also need to set vertices for your point cloud (i.e. polyData.setVerts(...)).
And to assign a color at each point:

const colors = new Uint8Array(points.getNumberOfPoints());
// ...fill colors here...
const colorsDataArray = vtkDataArray.newInstance({name: colors, values: colors});
polyData.getPointData().setScalars(colorsDataArray);
5

Thank you. I’ll try to write a demo.

I still have a few questions：

1.how to set vertices for point cloud，Do I need to set vertices for each point? Is vertex setting realized by vtkCellArray instance？

2.how to fill colors

Like this？

const colorMap = [[255,125,1],[5,235,155],...];
const colors = new Uint8Array(points.getNumberOfPoints());
for(let i = 0; i < colors.length; i++){
  colors[i]=colorMap[Math.floor(i/3)][i%3]
}
6
  1. yes
  2. no, you shall do colors[i] = i and map colors into a vtkColorTransferFunction.newInstance()
7

I’m a little confused. My color table data structure is [[255,125,1],[5,235,155],...],If I use colors[i] = i , is it an array for each color?
I don’t know much about the class vtkColorTransferFunction. How to pass the color table to this class and then to vtkDataArray

8

Hello, I wrote a demo：

const createPointCloud = (data) => {
  const points = vtkPoints.newInstance();
  const cellArray = vtkCellArray.newInstance();
  const polyData = vtkPolyData.newInstance();
  const polyDataMapper = vtkPolyDataMapper.newInstance();
  const actor = vtkActor.newInstance();
  for (let i = 0; i < data.length; i++) {
    const point = data[i];
    const pointIndex = points.insertNextPoint(...point);
    cellArray.insertNextCell([pointIndex]);
  }
  polyData.setPoints(points);
  polyData.setVerts(cellArray);
  polyDataMapper.setInputData(polyData);
  actor.setMapper(polyDataMapper);
  return actor;
}

But an error was thrown：polyDataMapper.setInputData is not a function

this is my impot:

import '@kitware/vtk.js/Rendering/Profiles/All';

import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
import vtkPoints from '@kitware/vtk.js/Common/Core/Points';
import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
import vtkCellArray from '@kitware/vtk.js/Common/Core/CellArray';
import vtkPolyDataMapper from '@kitware/vtk.js/Rendering/OpenGL/PolyDataMapper';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkInteractorStyleTrackballCamera from '@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera';

What’s the difference between the classes in openGl and webGPU? I see PolyDataMapper in both of them

9

You should use import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';

10

Thank you very much. The problem has been solved and the point cloud can be displayed normally.

On the previous question, about the fill color, can you help me see how to write it?

11

The best is probably for you to find in the code some examples that use vtkColorTransferFunction. You will see how you can do the color mapping (convert a scalar to a color) in the GPU (the colortransferfunction is a mapper property).

12

Hello, I checked the source code and searched for vtkColorTransferFunction. I found that the usage is to add colors on the vtkColorTransferFunction instance through the addRGBPoint method, and then through actor.getProperty().setRGBTransferFunction(lookupTable) to set the color.

But how to get the colors required by vtkDataArray in my requirement.

13

Who can give me some advice? How to fill the color?

14

I’m confused. Can someone help me answer this question? How to set different colors for each point? I have not found a solution related to the class vtkColorTransferFunction