[vtkusers] Add colour and interpolate an STL file with VTK.JS

[Turner, Shruti]

Hello,
I am trying to render an STL file within a web application using VTK.js and trying to get some help with adding colours to it and interpolation.
I have added my code below which currently does the following:
*         Reads in and Renders the STL file
*         Adds colour to points if the vertex index is in a pressure_sensors array.

I have the following 2 questions:
1.      Is this the best way to add colours to the model?
2.      How best to interpolate between the given data points to show a colourmap across the surface?

I have tried to look through the VTK.js website, however I am struggling to make any headway with how to achieve more than I already have done.
Thanks,
Shruti
import 'vtk.js/Sources/favicon';

import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader';

import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';
import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor';
import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera';
import axios from 'axios'
import vtkLookupTable from 'vtk.js/Sources/Common/Core/LookupTable';

//----------------------------------------------------------------------------

// Example code
// ----------------------------------------------------------------------------

const reader = vtkSTLReader.newInstance({ interpolateScalarsBeforeMapping: true });
const sensor_locations = [21035, 20577, 19625, 19121, 18110, 17567, 16501, 16495, 15942, 15347, 15314, 14658, 20506, 20027, 19544, 19044, 18546, 18031, 16957, 16416, 15851, 14574, 13733, 3424, 20501, 19525, 19025, 18527, 18013, 17488, 16962, 16427, 15233, 14578, 13746, 21726, 19982, 18981, 18478, 17427, 16902, 16361, 15793, 15188, 14536, 13691, 3370, 4899, 19446, 18434, 17382, 16856, 16310, 15122, 14465, 13599, 13609, 3291, 4957, 67, 19904, 19910, 18905, 18393, 17877, 17353, 16816, 15694, 15078, 14423, 13547, 3188, 19856, 19363, 18864, 17826, 17297, 17304, 16763, 16218, 15645, 15036, 13503, 3106, 19811, 18812, 18816, 17780, 17249, 16714, 16169, 15595, 14974, 14314, 13405, 21809, 19780, 19282, 18260, 17742, 16671, 15547, 14924, 14254, 2786, 2128, 975, 364, 19732, 18732, 18214, 17161, 16617, 16069, 14873, 13299, 2749, 925, 320, 866, 20624, 20151, 19660, 18656, 17626, 16571, 16015, 15436, 14153, 13250, 2675, 2009, 20658, 20162, 19178, 18174, 17650, 16577, 15458, 14822, 13236, 2678, 2652, 2634]

// ----------------------------------------------------------------------------

function update() {

  const colors = {
    tupleValues: [],
    insertNextTupleValue: (color) => {
      for (let i = 0; i < color.length; i++) {
        colors.tupleValues.push(color[i]);
      }
    },
    getNumberOfComponents: () => {
      return 3;
    },
    getDataType: () => {
      return 'array';
    },
    getNumberOfTuples: () => {
      return colors.tupleValues.length / colors.getNumberOfComponents();
    },
    getData: () => {
      return colors.tupleValues;
    }
  };

  const mapper = vtkMapper.newInstance();
  const actor = vtkActor.newInstance();

  const lookup = vtkLookupTable.newInstance();
  lookup.setNumberOfColors(1024),
  lookup.setRange(0, 1);
  lookup.build();

  mapper.setLookupTable(lookup);
  mapper.setInterpolateScalarsBeforeMapping(true);
  mapper.setUseLookupTableScalarRange(lookup);

  for (let i = 0; i < reader.getOutputData().getPoints().getNumberOfPoints(); i = i + 1) {
    const color = [];

    if (sensor_locations.includes(i)) {
      var x = Math.random();
      color[0] = x
      color[1] = x
      color[2] = x
    }
    else {
      color[0] = null
      color[1] = null
      color[2] = null
    }
    colors.insertNextTupleValue(color);
  }

  reader.getOutputData().getPointData().setScalars(colors);

  mapper.setInputConnection(reader.getOutputPort());
  actor.setMapper(mapper);


  // ----------------------------------------------------------------------------
  // Standard rendering code setup
  // ----------------------------------------------------------------------------

  const renderWindow = vtkRenderWindow.newInstance();
  const renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });
  renderWindow.addRenderer(renderer);

  // ----------------------------------------------------------------------------
  // Add the actor to the renderer and set the camera based on it
  // ----------------------------------------------------------------------------

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

  // ----------------------------------------------------------------------------
  // Use OpenGL as the backend to view the all this
  // ----------------------------------------------------------------------------

  const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
  renderWindow.addView(openglRenderWindow);

  // ----------------------------------------------------------------------------
  // Create a div section to put this into
  // ----------------------------------------------------------------------------

  const container = document.createElement('div');
  container.style.height = "600px";
  container.style.width = "600px"
  document.querySelector('body').appendChild(container);
  openglRenderWindow.setContainer(container);

  // ----------------------------------------------------------------------------
  // Capture size of the container and set it to the renderWindow
  // ----------------------------------------------------------------------------

  const { width, height } = container.getBoundingClientRect();
  openglRenderWindow.setSize(width, height);


  // ----------------------------------------------------------------------------
  // Setup an interactor to handle mouse events
  // ----------------------------------------------------------------------------

  const interactor = vtkRenderWindowInteractor.newInstance();
  interactor.setView(openglRenderWindow);
  interactor.initialize();
  interactor.bindEvents(container);

  // ----------------------------------------------------------------------------
  // Setup interactor style to use
  // ----------------------------------------------------------------------------

  interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
  // render();
}

reader.setUrl(`./newpivot.stl`, { binary: true }).then(update);

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://vtk.org/pipermail/vtkusers/attachments/20190227/9d30df4d/attachment.html>