[vtkusers] Add colour and interpolate an STL file with VTK.JS
Sebastien Jourdain
sebastien.jourdain at kitware.com
Wed Feb 27 16:08:30 EST 2019
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>
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> 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>
> 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/25eda435/attachment.html>
More information about the vtkusers
mailing list