Add colour and interpolate an STL file with VTK.JS

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

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);

 


_______________________________________________
Powered by 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
Reply | Threaded
Open this post in threaded view
|

Re: Add colour and interpolate an STL file with VTK.JS

VTK - Users mailing list
You should probably use discourse as it will allow better formatting of your code.

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 <[hidden email]> 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

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

_______________________________________________
Powered by 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
Reply | Threaded
Open this post in threaded view
|

Re: 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 <[hidden email]> wrote:

You should probably use discourse as it will allow better formatting of your code.

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 <[hidden email]> 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

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


_______________________________________________
Powered by 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
Reply | Threaded
Open this post in threaded view
|

Re: Add colour and interpolate an STL file with VTK.JS

VTK - Users mailing list
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 <[hidden email]> 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 <[hidden email]> wrote:

You should probably use discourse as it will allow better formatting of your code.

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 <[hidden email]> 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

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


_______________________________________________
Powered by 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
Reply | Threaded
Open this post in threaded view
|

Re: 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);



On 27 Feb 2019, at 21:08, Sebastien Jourdain <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> wrote:

You should probably use discourse as it will allow better formatting of your code.

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 <[hidden email]> 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

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



_______________________________________________
Powered by 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
Reply | Threaded
Open this post in threaded view
|

Re: Add colour and interpolate an STL file with VTK.JS

VTK - Users mailing list
That looks correct (respecting what you are asking vtk to draw), you seems to only have data on a couple of them where you see variation of color within some triangles.
The rest remain a single color as those values are the same and since you did not reversed the hue range, those values are probably 0.
So interpolating from 0 to 0 give you a solid color.

_______________________________________________
Powered by 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

PastedGraphic-1.png (102K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Add colour and interpolate an STL file with VTK.JS

Turner, Shruti
Thank you for the explanation. I'm sorry, if I'm missing something obvious but this is my first time doing something like this. 

What I need to achieve is interpolation between the points with colour to give a pressure map across the entire model.

What you have said makes sense, I'm just not sure how to change my code in order to achieve what I want to achieve.. 

Thanks,
Shruti.



-------- Original message --------
From: Sebastien Jourdain <[hidden email]>
Date: 27/02/2019 21:57 (GMT+00:00)
To: "Turner, Shruti" <[hidden email]>
Subject: Re: [vtkusers] Add colour and interpolate an STL file with VTK.JS

That looks correct (respecting what you are asking vtk to draw), you seems to only have data on a couple of them where you see variation of color within some triangles.
The rest remain a single color as those values are the same and since you did not reversed the hue range, those values are probably 0.
So interpolating from 0 to 0 give you a solid color.

_______________________________________________
Powered by 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