Colorize self-created Polydata

Web
1

Hello everyone! I think there are some problems with coloring the self-created Polydata, I need everyone’s help.
First,I only have point data and cell data in my Polydata data;
Here is part of the code

for (let edgeIdx = 0; edgeIdx < len; edgeIdx++) {
  for (let i = 0; i < 6; i++) {
    pointValues[pointValuesIndex] = data.edgelist[edgeIdx].vertex_coord[i];
    pointValuesIndex++;
  }
  cellValues[cellOffset++] = 2;
  cellValues[cellOffset++] = edgeIdx * 2 + 0;
  cellValues[cellOffset++] = edgeIdx * 2 + 1;
}

polydata.getPoints().setData(pointValues, 3);
polydata.getLines().setData(cellValues);

Snipaste_2022-10-25_17-56-10

Second, I can render the vtp file according to GeometryViewer,and I customized my colormap, which can be displayed according to the color I choose and the Mapper range I set.
Here is part of the code

const preset = vtkColorMaps.getPresetByName('Turbo');
/**
preset.RGBPoints is to convert the value of 20 colors (rbg) from 255 to 0-1, which contains group of 4 (Colorindex, r, g, b)
*/
const scalarArray = new Uint32Array([...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints,
...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints,
...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints,
...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints,
...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints, ...preset.RGBPoints,
]);
const table = vtkDataArray.newInstance({
  name: 'color',
  values: scalarArray,
  numberOfComponents: 4
});
const lookupTable = vtkColorTransferFunction.newInstance();

const mapper = vtkMapper.newInstance({
  interpolateScalarsBeforeMapping: false,
  useLookupTableScalarRange: true,
  lookupTable,
  scalarVisibility: false,
});

mapper.set({
  colorByArrayName: "color",
  interpolateScalarsBeforeMapping: true,
  colorMode: ColorMode.MAP_SCALARS,
  scalarMode: ScalarMode.USE_POINT_DATA,
  scalarVisibility: true,
});
lookupTable.applyColorMap(preset);
lookupTable.setMappingRange(-0.6, 3);
lookupTable.updateRange();

Then, But I found a problem, the number of my scalars (group of 4 (index, r, g, b)) must be equal to the number of vertices (group of three (x, y, z)), in order to be able to render all;
Here are two comparison pictures:
Snipaste_2022-10-25_18-06-51
Snipaste_2022-10-25_18-03-41
I don’t know the reason for this, I hope you can give me some suggestions.
Next,This is the color effect I expect (rendering the vtp file), but I set the same value and range and it does not achieve the effect (ignoring the complex mesh inside).
Snipaste_2022-10-25_18-17-55
(Tip:The setting of arrays in VTK.JS is also very critical, such as Uint8Array, Float32Array, etc.)
Last,To sum up, I have two questions:

  1. Why do I set the scalar in Polydata to be consistent with the number of vertices before rendering all (this is inconsistent with vtp rendering)
  2. How should I control mapper or other variables to render the result the same as in vtp

Looking forward to your suggestions

2

I can render the vtp file according to GeometryViewer and the result is as follows

Snipaste_2022-10-25_17-37-50
Snipaste_2022-10-25_17-37-50978×157 34.8 KB

Here is part of the code

const lookupTable = vtkColorTransferFunction.newInstance();
const mapper = vtkMapper.newInstance({
    interpolateScalarsBeforeMapping: true,
    useLookupTableScalarRange: true,
    lookupTable,
    scalarVisibility: true
  });
// init color mode
mapper.set({
    mapperKey: originKey,
    colorByArrayName: 'displacement_X',
    colorMode: 1,
    interpolateScalarsBeforeMapping: true,
    scalarMode: 3,
    scalarVisibility: true
  });
const preset = vtkColorMaps.getPresetByName(colorModeVal);
lookupTable.applyColorMap(preset);
lookupTable.setMappingRange(datarange[0], datarange[1]);// maxRange-minRange
lookupTable.updateRange();
renderWindow.render();
3

So, did you find a solution to your problem?

4

I haven’t completely solved the problem, but I’m constantly advancing, I found out about the scalar setting, which is the same as the number of vertices, it needs to get the attribute value of each vertex from the processed model, instead of color set it in. I’m so stupid that I just found out the reason for the scalar setting now!
If you have any related questions, you can ask, let’s discuss together

5

Values can reside in the cells too.

7

If the value exists in the cell, the shading is continued in the cell unit, so the shading effect is not the result I want.

8

What happens if you don’t set data in the vertexes?

9

As I said before, if you don’t shade the vertices and you shade the cells, the color you get is patched and you don’t have this gradient effect.
Fortunately, I solved it. The attributes of the vertices that are directly given to me through the back-end data are stored in poydata.getPointData().getArrayByName(name), and then I can use the example I took before to color it (I think the essence of solving the problem is is to understand the correspondence between scalar attributes and vertices) maybe I’m too stupid to deal with it this way

10

Yes, that is the expected behavior. Cell-centered data are best represented with the cells in solid color. Corner-point data, on the other hand, are best represented with shading the cells and edges.