interactive point cloud generation+surface extraction+visualization.

Web
1

Hi,

I want to give the user the ability to work on some parameters that when changed, gets multiplied by a constant matrix of numbers, then out of this multiplication a new point-cloud gets generated, then the surface of this point-cloud gets extracted and rendered on the browser.

acutally almost all the examples I came across, assume that the volume is read from somewhere and visualize the already read volume, so here I’m generating the volume on the go.

I’m wondering about any suggestions, to approach this, especially these parts:
-how to embed in the constant matrix in javascript (I’m putting it in a csv file, reading it in with jquery)
-how to extract the surface (I’ve done that in python before using vtkSurfaceReconstructionFilter() before) so I hope it’s possible more or less the same way in vtk.js
-how to visualize the surface which is not coming from a vtkSource filter, but for example from an array generated in the program.

Even having a resembling example somewhere on the web helps a lot if you know of one.

thanks in advance
Saeed

2

Hi, here is a sketch of ideas for each of your points.

  1. Once you have read your csv into an array, you can use gl-matrix mat3.fromValues() or mat4.fromValues() to create a matrix, depending on the size of your matrix. See: http://glmatrix.net/docs/module-mat3.html
  2. I don’t think vtk.js has surface extraction for point clouds yet, but it would be interesting to port that filter over. (Or use the VTK webassembly processing pipeline, but I don’t know the status of that.)
  3. You can manually populate a vtkPolyData with your points and/or polygons and pass that to your mapper. If you are not familiar with how vtkPolyData is constructed, then you can check out this resource: https://lorensen.github.io/VTKExamples/site/VTKBook/05Chapter5/
3

Thank you for your answer,
The current state is that I calculated my point cloud and have it in an array of shape 7968x3 (7968 points in 3D)
I read the resource you mentioned (chapter 5 of VTKBook) and although I completely understand that I should probably instantiate a vtkPolyData and populate its points and cells, the exact way of doing that in JavaScript is the part that I’m trying much with little success.
here’s one code:
import vtkPoints from ‘vtk.js/Sources/Common/Core/Points’
import vtkCellArray from ‘vtk.js/Sources/Common/Core/CellArray’
import vtkPolyData from ‘vtk.js/Sources/Common/DataModel/PolyData’

var polyData = vtkPolyData.newInstance();
//var points = vtkPoints.newInstance();
//var polys = vtkCellArray.newInstance();
var polys = [3, 0, 2, 1, 3, 1, 2, 3]
var points = [0.1, 0.5, 9, 0.5]

polyData.getPoints().setData(points)
console.log(polyData)

this code apparently does not work.
I appreciate if there are any suggestions?

4

const pointArray = ;
const cellArray = ;
let points = null
let pointCells = null;

const polydata = vtkPolyData.newInstance();

for (var i = 0; i < numpoints; i++) {

        //Point                 
        pointArray.push(x);
        pointArray.push(y);
        pointArray.push(z);

        cellArray.push(1);
        cellArray.push(i);

}

points = vtkPoints.newInstance({ values: Float32Array.from(pointArray) });
pointCells = vtkCellArray.newInstance({ values: Uint16Array.from(cellArray) });

polydata.setPoints(points);
polydata.setVerts(pointCells);

I used this to create polygons, which has a variable number of vertices. I think you may be able to get rid of the line cellArray.push(1) since you are using setVerts which implicitly is a single vertex per cell.

I think you can try:

let vtk_points = null
let vtk_cells = null;
var polys = [3, 0, 2, 1, 3, 1, 2, 3]
var points = [0.1, 0.5, 9, 0.5]

vtk_points = vtkPoints.newInstance({ values: Float32Array.from(points) });
vtk_cells = vtkCellArray.newInstance({ values: Uint16Array.from(polys) });

polydata.setPoints(vtk_points);
polydata.setVerts(vtk_cells);

1 Like