I want to know how to hide the edges (triangles) in 3D.
How can I do it ?
Also, is there any way to activate antialasing ?
This is what it looks like now
This is what I would like to get
To be viewed without the edges
Hello @Javi-r
Use the vtkPolyDataNormals filter.
It doesn’t work I get the same result
const reader = vtkSTLReader.newInstance();
await reader.parseAsArrayBuffer(arrayBuffer);
const normalsFilter = vtkPolyDataNormals.newInstance();
normalsFilter.setInputData(reader.getOutputData());
const vertebraMapper = vtkMapper.newInstance({ scalarVisibility: false });
vertebraMapper.setInputData(normalsFilter.getOutputData());
const vertebraActor = vtkActor.newInstance();
vertebraActor.setMapper(vertebraMapper);
Result after applying vtkPolyDataNormals vtk.js 32.9.1
maybe you have duplicated points in your mesh.
What reader did you use ?
You can try actor.getProperty().setInterpolationToPhong() and actor.getProperty().setInterpolationToFlat(), flat is close to the first pic and phong to the second
Not work
out_Segment_20.stl (1.2 MB)
I would say that the STL is fine with all of them.
Attached is one of the ones I use for example
The reading result of stl from stl reader will contain duplicated points, and I tried if not doing a dedup for those points it won’t work, after removing the duplicated points, it works as expected like this:
this is the flat interpolation:
In the OBJReader, there is code that identifies duplicated points to conveniently process them.
Feel free to do something similar in the STLReader and make a PR.
How did you get it to look like in the first picture ?
I don’t quite understand what you mean
Do you mean that the stl is wrong ?
I have repaired the stl with an online tool and it still looks the same.
The stl is not wrong, but because of it’s saving stratagy, you need to do something to modify the origin data you got from an stl file. e.g. if you save a square with point A,B,C,D, stl stores two triangles A,B,C and B,C,D, when reading the data it gets points array [A,B,C,B,D,C], you need to clear the duplicated to make it be like [A,B,C,D].
You can clear it using method like this:
const dedupSTLResult = (vertices: Float32Array, faces: Int32Array, offset = 5) => {
const vMap: Map<string, number> = new Map()
const vIndexMap: Map<number, number> = new Map()
let vInc: number = 0
for (let i = 0; i < vertices.length; i += 3) {
const k1 = (vertices[i] * Math.pow(10, offset)).toFixed(0)
const k2 = (vertices[i + 1] * Math.pow(10, offset)).toFixed(0)
const k3 = (vertices[i + 2] * Math.pow(10, offset)).toFixed(0)
const key: string = `${k1},${k2},${k3}`
if (vMap.get(key) !== undefined) {
vIndexMap.set(i / 3, <number>vMap.get(key))
} else {
vIndexMap.set(i / 3, vInc)
vMap.set(key, vInc)
vInc++
}
}
const outVerts: Float32Array = new Float32Array(vMap.size * 3)
for (let k of vMap.keys()) {
const j = <number>vMap.get(k) * 3;
[outVerts[j], outVerts[j + 1], outVerts[j + 2]] = k.split(',').map((e: string) => +e * Math.pow(10, -offset));
}
const outFaces = new Int32Array(faces)
for (let i = 0; i < faces.length; i += 4) {
outFaces[i] = 3
outFaces[i + 1] = <number>vIndexMap.get(faces[i + 1])
outFaces[i + 2] = <number>vIndexMap.get(faces[i + 2])
outFaces[i + 3] = <number>vIndexMap.get(faces[i + 3])
}
return {
vertices: outVerts as Float32Array,
faces: outFaces as Int32Array
}
}
//consider your reader.getOutputData() as polydata here as the result data from stl reader
const originVerts = polydata.getPoints().getData()
const originFaces = polydata.getPolys().getData()
const { vertices, faces } = dedupSTLResult(originVerts, originFaces)
// use these vertices and faces to form a new polydata or apply to the result
polydata.getPoints().setData(vertices)
polydata.getPolys().setData(faces)
// change property of the actor you are using
actor.getProperty().setInterpolationToPhong()
// rerender the vtk window
...
1 Like
Alternatively, someone could write (and contribute) the vtkCleanPolyData filter that merges identical points.
Is VTK: vtkCleanPolyData Class Reference insufficient?
vtkCleanPolyData is missing in VTK.js. It would be a great addition in VTK.js.
Thanks for your code but it didn’t work for me.
I have uploaded to codepen an example that loads a stl with your code and I still see the edges.
You can see the example and edit it here: https://codepen.io/jreyero/pen/VYwLwRr
You then need to compute normals:
const normals = vtk.Filters.Core.vtkPolyDataNormals.newInstance();
normals.setInputData(polydata);
mapper.setInputConnection(normals.getOutputPort());
1 Like
Thanks to both of you it finally worked
Here is the result https://codepen.io/jreyero/pen/VYwLwRr
Glad it worked.
Would you mind adding that feature in the STL reader (similar to the one in the OBJ reader) ?
Do you want me to add a method to find duplicates like the obj getPointDuplicateIds method ?
Or I add the method dedupSTLResult for example with the name removeDuplicateVertices