Color Mapping Discrete Contours

Web
1

Hi,
I am trying to recreate a similar example using vtk.js to that shown in pyvista (see target example below) where the color scale can be set to discrete values for scalars within a particular range. I am having trouble finding a reference example to help me with this problem. See below where I have got to so far… struggling to understand if lookupTable.addRGBSegment will be able to help me achieve this. Any help much appreciated!

Link to Pyvista example I’m trying to replicate

            // Assume scalar values are between 0 and 1 for now.
            lookupTable = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();

            // Attempt to set all scalar values between 0to0.5 = black and all values 0.5to1.0 = white
            lookupTable.addRGBSegment(0, 1, 1, 1, 0.5, 1, 1, 1)
            lookupTable.addRGBSegment(0.5, 0, 0, 0, 1.0, 0, 0, 0)

            lookupTable.setVectorModeToMagnitude();
            lookupTable.setMappingRange(0,1);
            lookupTable.updateRange();
            lookupTable.setDiscretize(true)

            mapper.setLookupTable(lookupTable);
            mapper.setColorModeToMapScalars();
            mapper.setInterpolateScalarsBeforeMapping();
            mapper.setScalarModeToUsePointData();
            mapper.setScalarVisibility(true);
            // Assume scalar range is between 0 and 1 for now. This will be set dynamically with more complex example.
            mapper.setScalarRange(0,1);

            const actor = vtk.Rendering.Core.vtkActor.newInstance();
            actor.setMapper(mapper);
2

Solved using the following js.code also the bug fix kindly provided in the latest release of vtk.js which was occurring with the discrete color function.

// Get the polydata
            _polydata = writerReader.getOutputData()
            arrayName = _polydata.getPointData().getArrayName(0);
            activeArray = _polydata.getPointData().getArrays()[0];
            dataRange = activeArray.getRange()
            console.log(dataRange)

            var preset = vtk.Rendering.Core.vtkColorTransferFunction.vtkColorMaps.getPresetByName('jet');
            lookupTable = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();
            lookupTable.setNumberOfValues(no_colors) // no_colors an integer representing the number of discrete colors
            lookupTable.setDiscretize(true)

            lookupTable.applyColorMap(preset);
            lookupTable.setVectorModeToMagnitude();
            lookupTable.setMappingRange(dataRange[0], dataRange[1]);
            lookupTable.updateRange();

            console.log(`Range of lookup table: ${lookupTable.getRange()}`)
            for (i = 0; i < 10; i++) {
                var myVal = Math.round(i*0.1*10)/10
              console.log(`${myVal}=${lookupTable.mapValue(myVal)}`)
            }

            mapper.setLookupTable(lookupTable);
            mapper.setColorModeToMapScalars();
            mapper.setInterpolateScalarsBeforeMapping(true);
            mapper.setScalarModeToUsePointData();
            mapper.setScalarVisibility(true);
            // Assume scalar range is between 0 and 1 for now. This will be set dynamically with more complex example.
            mapper.setScalarRange(dataRange[0], dataRange[1]);

            const actor = vtk.Rendering.Core.vtkActor.newInstance();
            actor.setMapper(mapper);