Re: Add colour and interpolate an STL file with VTK.JS
Sebastien Jourdain via vtkusers <[email protected]> Wed, 27 Feb 2019 14:08:30 -0700
| Newsgroups | gmane.comp.lib.vtk.user |
|---|---|
| Message-ID | <CABObKxcfDT2HRbfBrh7iU-xs=jCY8Dt6PsbYBASb1wtDR_+mAA@mail.gmail.com> |
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 <[email protected]> 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 < > [email protected]> 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 <[email protected]> > 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