changing the PointSource model

Support
1

Hi, this is my first day with vtk-js-master. The random spherical point cloud demo works fine for me with 10000 points, it looks like a snowball. As a first step I have modified the index.js in the vtk-js-master/Sources/Filters/Sources/PointSource/ to try it with my own point clouds loaded from a file. When I rerun the point cloud demo through the index.html in the vtk-js-master/dist folder, it still displays the snowball, my modification of vtk-js-master/Sources/Filters/Sources/PointSource/index.js had no effect.
It looks like that the demo is still running the original demo code. Do I need to “recompile” or set something for my change in vtk-js-master/Sources/Filters/Sources/PointSource/index.js to take any effect? I am not getting any error message when looking at my modification with Chrome Tools/Console .

2

The PointSource is not what you should be changing. The thing you aim to do is create your own reader that will grab the data you have and build a vtkPolyData which will then be rendered with the vtkMapper/vtkActor/vtkRenderer/vtkRenderWindow.

In either case, if you rely ES6, you will have to build and therefore “compile” your JS code.

HTH

3

Many thanks, Sebastien. Will try to follow that route. Would you be able to improvise such a vtkPolyData just with 3 points in it ? I could not find any example and your help would save me some time of unsuccessful experimentation.

4
5

Thanks again, this was really helpful.
Now I see how vtkPolyData can be built on some examples.
The original demo in /vtk-js-master/Sources/Filters/Sources/PointSource/index.js
appears to be just doing that, i.e. creating an example vertex(point) set for ‘pd’ vtkPolyData . In this the code lines allocates points :

const points = macro.newTypedArray(pointDataType, numPts * 3);
pd.getPoints().setData(points, 3);

and the code at the bottom of my note appears to define the ‘pd’ vtkPolyData .

And yet, the slight change in the points did not change the appearance of the point cloud. The points should now be on a disk in 3D space. Would be grateful for a hint as to the reasons of that when I retry running /vtk-js-master/dist/index,html via the code bits:

var body = vtk.Filters.Sources.vtkPointSource.newInstance({numberOfPoints : 10000});
…
actor.setMapper(mapper);
mapper.setInputConnection(body.getOutputPort());

My slightly modified /vtk-js-master/Sources/Filters/Sources/PointSource/index.js for the point set was, in which I removed the randomization of ‘theta’, should have resulted in a disk of points, not a sphere of points, was as follows:

const pd = vtkPolyData.newInstance();

// hand create a point cloud
const numPts = model.numberOfPoints;

// Points
const points = macro.newTypedArray(pointDataType, numPts * 3);
pd.getPoints().setData(points, 3);

// Cells
const verts = new Uint32Array(numPts + 1);
pd.getVerts().setData(verts, 1);

let cosphi;
let sinphi;
let rho;
let radius;
let theta;
for (let i = 0; i < numPts; i++) {
  cosphi = 1 - 2.0 * vtkMath.random();
  sinphi = Math.sqrt(1 - cosphi * cosphi);
  rho = model.radius * vtkMath.random() ** 0.33333333;
  radius = rho * sinphi;
  theta = 2.0 * Math.PI ;// * vtkMath.random();
  points[i * 3] = model.center[0] + radius * Math.cos(theta);
  points[i * 3 + 1] = model.center[1] + radius * Math.sin(theta);
  points[i * 3 + 2] = model.center[2] + rho * cosphi;
}

// Generate point connectivity
//
verts[0] = numPts;
for (let i = 0; i < numPts; i++) {
  verts[i + 1] = i;
}

// Update output

outData[0] = pd;


The browser does not display a modified point set.
6

Thanks, this was really helpful. I can see now how to define a vtkPolyData object. The demo index.js in PoinSource in fact was creating the ‘pd’ vtkPolyData and yet the slight modification of that code by making ‘theta’ constant (not randomized) did not result in the sphere of random points to become a disk, the modified demo still displays a ball of points. I am sure that the answer to this is trivial, but I do not know that. The ‘pd’ vtkPolyData is now redefined and yet it does not show up in the browser. Why?

7

Did you build your code? Are you using your code rather than the official release code base?

8

My question was only about the code in the /vtk-js-master as distributed on github. The only modification is on the line

theta = 2.0 * Math.PI ;// * vtkMath.random();

and i expected that this way the code would build a vtkPolyData with random points on a disk in 3D space. Thanks.
.

9

I suspect I am misunderstanding what ‘build’ means here. I am new to vtk.js, and in my former JS programming I always thought, and experienced it, that the JS code was interpreted and compiled/optimized at runtime… may be this is not the case for the ‘index.js’ that I modified above on one line? Would be grateful for any clarification… do the vtkPolyData models need to be pre-built before they are used? If so, how is that done?

10

Indeed here the code needs to be transpiled and bundled.

Assuming you clone the repo and edited that source file, you can test the example live by running

cd vtk-js
npm install
npm run build
npm run example -- PointSource
11

Ah, great ! I suspected it was something simple that I was missing… that is why I was getting nowhere … thanks for your clarification, Sebastien !