How to change coloring scheme?

[CharlesL]

I’m new to vtk.js. After reading, I made javascript work though I don’t why; it is just by accident and I don’t even explicitly use lookup table functio. I need help in changing the color schem. In picture below, pressure 0 is red and presure 6.8 is blue. But I want it opposite. Appreciate any help in advance.

Here is my code.

// ----
// standard rendering code setup
// ---
  
const vtkRenderScreen = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
container: document.querySelector('#vtkContainer'), background: [0.2, 0.3, 0.4] });

export var renderer = vtkRenderScreen.getRenderer();
export var renderWindow = vtkRenderScreen.getRenderWindow();
  
// ---
// simple pipeline source --> mapper --> actor
// ---
  
// source
export const reader = vtk.IO.XML.vtkXMLPolyDataReader.newInstance();
  
reader.setUrl(vtpsrc).then(() => {
    reader.loadData().then(() => {

      const source = reader.getOutputData(0);
      const scalars = source.getPointData().getScalars();
      const dataRange = [].concat(scalars ? scalars.getRange() : [0, 1]);

      const location = "PointData";
      const ArrayName = "p";
      const colorArray = source[`get${location}`]().getArrayByName(ArrayName);

      const newDataRange = colorArray.getRange();
      dataRange[0] = newDataRange[0];
      dataRange[1] = newDataRange[1];

      source.getPointData().setScalars(colorArray);

      let lut = mapper.getLookupTable()
      lut.setRange(dataRange[0], dataRange[1]);

      mapper.setScalarModeToUsePointData();
      mapper.setColorModeToMapScalars();
      mapper.setScalarRange(0, 1);
      mapper.setLookupTable(lut);
      mapper.setUseLookupTableScalarRange(true);
      mapper.update();

      const scalarBarActor = vtk.Rendering.Core.vtkScalarBarActor.newInstance();
      scalarBarActor.setScalarsToColors(lut);
      scalarBarActor.setDrawNanAnnotation(false);
      scalarBarActor.setAxisLabel("Pressure (m^2/s^2)");
      scalarBarActor.setVisibility(true);
      renderer.addActor(scalarBarActor);
        
      renderer.resetCamera();
      renderWindow.render();
  });
}); 

// ---
// mapper
// ---
export var mapper             = vtk.Rendering.Core.vtkMapper.newInstance();
mapper.setInputConnection(reader.getOutputPort());

// ---
// actor
// ---
export var actor              = vtk.Rendering.Core.vtkActor.newInstance();
actor.setMapper(mapper);

// ---
// add the actor to the render
// set the camera based on it
// ---

renderer.addActor(actor);
renderer.resetCamera();

[jourdain (Sebastien Jourdain)]

If you aim to stick with the rainbow color, you can find some different settings here (lut.setHueRange(0.667, 0.0)) but otherwise, you can use some presets like we do in the geometry example.

[CharlesL]

@jourdain

lut.setHueRange(0.667, 0.0)

Thanks Sebastien. It works very well.

[CharlesL]

Though the pressure contour is great, the velocity magnitude is strange (see below that I compare my result and with that geometryViewer result). It is from the same set of data but it may not be surface but streamline. Can this be the cause of difference? Thanks in advance.

The GeometryViewer is correct.

[jourdain (Sebastien Jourdain)]

Color by magnitude instead of component?

[CharlesL]

Indeed. It picked component. With magnitude, it looks great!