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

[Turner, Shruti]

Very good point. Apologies.

Attached is the image and below is the code snippet.

As all the identified points are set to the same scalar, I’m expecting the whole model to be that great colour if it is interpolating. Is that correct?

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); const dataset = reader.getOutputData(); const nbPoints = dataset.getPoints().getNumberOfPoints(); const values = new Float32Array(nbPoints); for (let i = 0; i < nbPoints; i++) { values[i] = sensor_locations.includes(i) ? 1 : null } const colors = vtkDataArray.newInstance({ name: 'fieldName', values }); reader.getOutputData().getPointData().setScalars(colors); mapper.setInputConnection(reader.getOutputPort()); actor.setMapper(mapper);


[cid:EB1AA0E9-12C2-4101-817C-F1EEF0657915 at home]

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

The interpolation should happen.
But no picture == no idea of what you are talking about.

On Wed, Feb 27, 2019 at 1:16 PM Turner, Shruti <s.turner17 at imperial.ac.uk<mailto:s.turner17 at imperial.ac.uk>> wrote:
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/b6204993/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: PastedGraphic-1.png
Type: image/png
Size: 77020 bytes
Desc: PastedGraphic-1.png
URL: <https://vtk.org/pipermail/vtkusers/attachments/20190227/b6204993/attachment-0001.png>