[vtkusers] Add colour and interpolate an STL file with VTK.JS
Sebastien Jourdain
sebastien.jourdain at kitware.com
Wed Feb 27 12:15:51 EST 2019
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>
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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://vtk.org/pipermail/vtkusers/attachments/20190227/39f59b4e/attachment.html>
More information about the vtkusers
mailing list