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

[Turner, Shruti]

Thank you for your response, it worked perfectly with getting the colours onto the model.

Would you be able to give any advice on interpolating?

We have a model with about 43000 polys, of which we will add scalars, representing pressure, to some of them. With what I have tried to do I have ended up with a model all in red with the ~150 points I added colour to having colour. When inspecting the scalar this is because I have 0 in all values not given a value, which makes sense.

However, I’m not sure how best to interpolate between them as it is a 3D model represented on a 1d array.

Thanks,
Shruti

On 27 Feb 2019, at 17:15, Sebastien Jourdain <sebastien.jourdain at kitware.com<mailto:sebastien.jourdain at kitware.com>> wrote:

You should probably use discourse as it will allow better formatting of your code.
https://discourse.vtk.org/c/web

But they are several issue in what you are doing:
1) You should not modify the output of a filter and connect to the port for rendering
2) Your colors should be an instance of vtkDataArray


[...]
const dataset = reader.getOutputData();
const nbPoints = dataset.getNumberOfPoints();

const values = new Float32Array(nbPoints);
for (let i = 0; i < nbPoints; i++) {
  values[i] = Math.random();
}
const colors = vtkDataArray.newInstance({ name: 'fieldName', values });

dataset.getPointData().setScalars(colors);

mapper.setInputData(dataset);
[...]


On Wed, Feb 27, 2019 at 4:10 AM Turner, Shruti <s.turner17 at imperial.ac.uk<mailto:s.turner17 at imperial.ac.uk>> wrote:
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);

_______________________________________________
Powered by www.kitware.com<http://www.kitware.com/>

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the VTK FAQ at: http://www.vtk.org/Wiki/VTK_FAQ

Search the list archives at: http://markmail.org/search/?q=vtkusers

Follow this link to subscribe/unsubscribe:
https://vtk.org/mailman/listinfo/vtkusers

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