VTKJS Shading comparison to python

Web vtk.js
1

Hi,

I’ve been experimenting with visualizations in python and VTKjs but can’t reproduce some of the features I achieve in python in VTK js.

In python I’m able to get the following super-smooth shading, with the following settings:

            # Set the interpolation to Gouraud shading
            actor.GetProperty().SetInterpolationToGouraud()

            # Set material properties
            actor.GetProperty().SetDiffuse(0.9)
            actor.GetProperty().SetSpecular(0.05)
            actor.GetProperty().SetSpecularPower(5)
            actor.GetProperty().SetAmbient(0.2)
            actor.GetProperty().SetShading(1)

Screenshot from 2024-06-24 15-42-33
Screenshot from 2024-06-24 15-42-33897×831 36.7 KB

image
image897×831 126 KB

In Javascript I’m getting the following (not-smooth) buf flat-shaded results. All triangles keep being visible whatever I try.

      // this.actor.getProperty().setShading();
      this.actor.getProperty().setInterpolationToGouraud();
      // this.actor.getProperty().setInterpolationToPhong();

      // Set material properties
      this.actor.getProperty().setDiffuse(0.9);
      this.actor.getProperty().setSpecular(0.05);
      this.actor.getProperty().setSpecularPower(5);
      this.actor.getProperty().setAmbient(0.2);

image
image584×732 71.2 KB

When trying to this.actor.getProperty().setShading(true); I get the error that setShading is not a function.

I feel like I’m missing something? Or am doing some wrong things.
This is done in VTKjs 30.4.0

2

Are you referring to the second or third photo? In the second photo, it looks like you’re displaying the geometry as a wireframe rather than a surface (actor.getProperty().setRepresentation(Representation.SURFACE)).

As for setShading(true), it appears that we have ts definitions for that method but no actual setters/getters for that property. Looks like vtk.js doesn’t support toggling shading, as it should be on by default.

3

Hi,

I’m referring to the third photo, which is the result of the Javascript version while the first two images are Python.

(actor.getProperty().setRepresentation(Representation.SURFACE)). this is set correctly, as it is the default value.
Unfortunatly setShading(true) is indeed in the ts definitions but not in the actual source. I changed this and tried again but even then did it not work as intended.

4

What does the model from the third photo look like in vtk-python? To me it looks like a high-resolution model, which might not necessarily be smooth.

6

It is indeed a high resolution model, but I want it to look smooth which is what smooth shading does?

Below you can see the same model from vtk-js in vtk-python, in normal “smooth” shading and wireframe mode to give an understanding to the resolution of the model.

Screenshot 2024-06-25 080754
Screenshot 2024-06-25 0807541149×826 57.3 KB

Screenshot 2024-06-25 080758
Screenshot 2024-06-25 0807581103×807 188 KB

As you can see in the smooth shading, the interpolation ensures that no individual triangles are visible.
Below is an image without shading turned on in python, and you can see the individual triangles in the mesh (flat shading)

image
image897×855 48.8 KB

Below you can also see a more detailed zoom comparison between flat-shading and gouraud shading

image
image859×692 17.8 KB

image
image941×850 24 KB

Which brings me to the issue that for some reason vtk-js only shows flat-shading even if gouraud shading is enabled by default.

I do know that the shading requires normals, and I have computed these as well. using:

  const normalsFilter = vtkPolyDataNormals.newInstance();
  normalsFilter.setInputData(polydata);
  normalsFilter.update();
  const result = normalsFilter.getOutputData();

any ideas what could be going wrong?

7

That might be because your points are duplicated per cells. hence the polydata normals do not work.
What reader do you use ? OBJReader has the tendancy of duplicating points. You can look at the OBJReader tests in VTK.js to understand the issue with point duplication.

8

Hi Julien,

Thanks for this insight, we use multiple readers for multiple file-formats (stl, ply, obj, drc, …)
Is there an easy post-processing step I can take to ensure this duplication is taken care of?

Or what approach do you recommend?

9

Try to load the file with a vtk (vtp) file format to see if you still have the problem.
If you do, then the problem comes from the OBJ reader. You need to “track duplicates” and merge the points in some way…

10

The issue I’m currently having is with STL files, so has nothing to do with the OBJ reader afaik

11

Same problem with STL, points are duplicated per cell.

That’s why computing point normals makes the cells look flat.

vtk.js is missing a “vtkCleanPolyData” (and/or vtkMergePoints) that merges “coincident” points and remove duplicates.

Feel free to add it or reach out to me if you have funding :grin:.

12

Hi Jullien,

Thanks for all the help. There was indeed an issue with duplicated points per cell. We have fixed this by post-processing the incoming meshes.
The shading works perfect now.

Kind Regards,
Emil

13

Glad it worked. That would be great if you could turn your post-processing step as a VTK filter and contribute it back to VTK.js…