# vtk.js-Clips processing of VTP

**URL:** https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751
**Category:** Web
**Created:** [November 7, 2022, 6:41am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751 "2022-11-07T06:41:39Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 7, 2022, 6:41am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/1 "2022-11-07T06:41:39Z")

</div>

I have data in VTP format, I want to cut the section of this data and keep its remaining scalar properties（for coloring）, what should I do?  
I used to call [vtkTableBasedClipDataSet()](https://kitware.github.io/vtk-examples/site/Cxx/Meshes/TableBasedClipDataSetWithPolyData/) by encapsulating the C++ version of vtk to achieve the effect of cross section. But the VTK file is read (the data in the VTK file I have only has meshed volume data, and there is no information about the original wireframe of the model after cutting). I want to render the original wireframe of the model after cutting information, can you give me some interesting suggestions?

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 7, 2022, 8:39am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/2 "2022-11-07T08:39:56Z")

</div>

For the example of VTK operation, I copied it based on [ClipUnstructuredGridWithPlane](https://kitware.github.io/vtk-examples/site/Cxx/UnstructuredGrid/ClipUnstructuredGridWithPlane/)

> vtkNew \<vtkTableBasedClipDataSet clipper;  
> clipper-\>SetInputData(rgrid);

For the data input of vtkTableBasedClipDataSet, I only see UnstructuredGrid and vtkRectilinearGrid; I don’t know if I can modify it into polydata input format according to my own needs.  
Glad you could tell me about these input data issues or some other help!

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 7, 2022, 8:46am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/3 "2022-11-07T08:46:15Z")

</div>

I saw the legend in [vtkTableBasedClipDataSet](https://vtk.org/doc/nightly/html/classvtkTableBasedClipDataSet.html) in the document, vtkTableBasedClipDataSet inherits from vtkUnstructuredGridAlgorithm, so it can use such data input, it does not inherit from polydata, so polydata cannot be used as its data input, is my understanding correct?

 ![image](https://discourse.vtk.org/uploads/default/original/2X/2/2113c4cff9bde145c644c587ce683f8a874b35e9.png)

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [November 7, 2022, 9:13pm UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/4 "2022-11-07T21:13:49Z")

</div>

What about [vtkClipClosedSurface](https://kitware.github.io/vtk-js/examples/ClipClosedSurface.html) ? it does not do what you want ?

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 8, 2022, 2:18am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/5 "2022-11-08T02:18:51Z")

</div>

Thank you for your reply  
I’ve looked at the [vtkClipClosedSurface](https://kitware.github.io/vtk-js/examples/ClipClosedSurface.html#ClipClosedSurface), which itself cannot set a specific gradient color based on a scalar, only a fixed color.

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [November 8, 2022, 6:39am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/6 "2022-11-08T06:39:53Z")

</div>

Not sure to understand what you are trying to do. Do you mind sharing a screenshot of your expected result ?

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 8, 2022, 6:53am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/7 "2022-11-08T06:53:22Z")

</div>

I’d be happy to share my expected results!  
Based on what I said at the beginning, I’ve now done something like this:

 ![image](https://discourse.vtk.org/uploads/default/original/2X/7/7887b5a64100fa2344f18ae9c3cc9e0a55fc6c98.png)  
 ![image](https://discourse.vtk.org/uploads/default/original/2X/7/75055bc331c934189a0a5bdc0c1c0fc2f8e80c61.png)  
The above screenshot is obtained by processing the VTK(the data format is unstructuredgrid) file. However, the VTK is the result after meshing, and there is no wireframe of the initial model.  
Because the VTP(Polydata) file I have at hand contains the initial wireframe of the model, I want to perform cross-section processing on the VTP file, and I hope the result of the processing is like this:  
 ![image](https://discourse.vtk.org/uploads/default/original/2X/6/68b9a9c3996e6cc570dc5978172e631c4b5129a3.png)

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [November 8, 2022, 7:08am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/8 "2022-11-08T07:08:49Z")

</div>

VTK.js does not support volumetric mesh, only surface mesh. It means that when “cutting”/“slicing” in the middle of your mesh would not get any scalar value inside the mesh (scalar values are only at the outer surface).

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 8, 2022, 7:16am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/9 "2022-11-08T07:16:35Z")

</div>

Thank you for your prompt reply!  
The data on my side is the surface mesh.Because the VTP file extracts the surface mesh of VTK for storage (in other words, the model rendered by the VTP file is an empty shell, only the surface data)  
This cut model is divided into two parts, one is the cross section face and the other is the cross section body.  
I only need to think about the cross section body now, how to cut and show the color I want.

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [November 8, 2022, 7:22am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/10 "2022-11-08T07:22:46Z")

</div>

If you only need the body, then I believe `vtkClipClosedSurface` is what you need.  
Having said that, maybe vtkClipClosedSurface does not propagate correctly the “scalars” to the output clipped mesh. You would have to investigate the code of the filter for that.

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 8, 2022, 7:26am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/11 "2022-11-08T07:26:18Z")

</div>

Thanks for the advice!  
I will try to implement it according to your instructions!

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [November 8, 2022, 7:28am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/12 "2022-11-08T07:28:37Z")

</div>

Great !

(PRs are welcomed 🙂 )

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 15, 2022, 7:11am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/13 "2022-11-15T07:11:09Z")

</div>

Unfortunately, I seem to have failed, I can change the facet to the color I want, but he still has a situation:  
If the vertices involved in the slice are 300 400 500 and so on, I set the value of these vertices in PointData to red (this color should be according to the value defined in ColorMap).  
For example, vertex 300 will undergo color gradient processing to the adjacent vertices (290-300), which is not obvious in wireframe mode, but very obvious in surface mode  
(set according to **actor.getProperty().setRepresentation()**; )

 ![image](https://discourse.vtk.org/uploads/default/original/2X/d/d50993ad5b2bc36c06fa8963f4a2776995c306ef.png)

 ![image](https://discourse.vtk.org/uploads/default/original/2X/6/65be25cddc39dc3397d52ba0d4c363eadcf1893c.png)

I still have a question about the Lines attribute in my VTP. Why does the Lines attribute disappear after the **vtkClipClosedSurface** class is processed? I didn’t see how this reason works in the source code ( I will continue to check later), if you know the relevant reason, if you can, I hope you can share it with me.

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [November 15, 2022, 12:43pm UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/14 "2022-11-15T12:43:56Z")

</div>

I’m sorry but I fail to understand the problem. Would you mind sharing the dataset you would like to clip ?

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 16, 2022, 2:55am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/15 "2022-11-16T02:55:29Z")

</div>

I’m happy to share!This is my model dataset:  
[beam.vtp](https://discourse.vtk.org/uploads/short-url/7TdxvfTrRZdLcStATOwo0lUbQYx.vtp) (589.9 KB)  
Let me explain my problem again:  
When I import a Polydata dataset containing Lines and Polys properties into the ClipClosedSurface class,

 ![image](https://discourse.vtk.org/uploads/default/original/2X/8/8316a29b751a999693aa3d5ae36b928ee02aef50.png)

ClipClosedSurface will return a the FilterData after section processing contains Polys attributes (Polydata format)

 ![image](https://discourse.vtk.org/uploads/default/original/2X/3/3c62209bb3918865b7579aa13fcb021b04f6bd78.png)

I don’t know why this happens. My personal understanding is that ClipClosedSurface integrates Lines into Polys after cutting Lines.  
I don’t know if the question is clarified this time, if not, please tell me the ambiguity of the question.  
Looking forward to your reply!

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [November 16, 2022, 8:10am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/16 "2022-11-16T08:10:31Z")

</div>

Thanks, I better understand.

Can you check what the C++/Python vtkClipClosedSurface does ? Does it behave the same ?

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [November 16, 2022, 10:16am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/17 "2022-11-16T10:16:42Z")

</div>

Not very familiar with Python and C language, but I can try to check!  
If there is the latest advancement, I will continue to update !  
If you have related ideas, I am very happy that you can share them with me!

---

<div class="post-metadata">

### Author: ![sunlin0oo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunlin0oo/32/5607_2.png) [@sunlin0oo](https://discourse.vtk.org/u/sunlin0oo)
#### Post date: [December 5, 2022, 7:54am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/18 "2022-12-05T07:54:38Z")

</div>

Long time no see, my latest progress: I translated the ClipPloydata class in C++ through WASM, which can be implemented in JS

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [July 14, 2023, 2:01pm UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/19 "2023-07-14T14:01:35Z")

</div>

A **massive** number of of VTK-C++ filters (including `vtkTableBasedClipDataSet`) are available from JavaScript through WASM pending this merge request - [Auto-generate emscripten JS bindings for VTK-C++](https://gitlab.kitware.com/vtk/vtk/-/merge_requests/10282). This is experimental, so if you’re curious, you can try to build that branch and use the resulting `vtkweb.js`, `vtkweb.wasm` files in your project. Feedback and criticism are welcome. For usage, refer to the `Examples/JavaScript` directory in that MR.

> Long time no see, my latest progress: I translated the ClipPloydata class in C++ through WASM, which can be implemented in JS

On a sidenote, can you share the repository or project for this translation?

---

<div class="post-metadata">

### Author: ![sridhar-mani](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sridhar-mani/32/9522_2.png) [@sridhar-mani](https://discourse.vtk.org/u/sridhar-mani)
#### Post date: [November 27, 2024, 5:06am UTC](https://discourse.vtk.org/t/vtk-js-clips-processing-of-vtp/9751/20 "2024-11-27T05:06:24Z")

</div>

is there a way to clip and view scalars like alpha.water or U or p in the simulation output files?
