Vtkjs files

In the examples and benchmarks, we generate 2D and 3D dataset that can be visualized with the web browser using the vtk.js framework. We describe in the following sections:

  • how to generate a vtkjs file

  • how to embed a vtkjs file in the documentation

1. Building a VTKJS file

A Vtkjs file can be produced using Paraview and a Python script from Feel++ than can be injected into the Paraview interface. The Python script can be downloaded here. This script writes the vtkjs file in $HOME/vtkJsExport on your computer.

The Vtkjs are uploaded then to Girder and are then accessible from within the web browser. See

2. Import the javascript library in an Antora page

To tell Antora that the current page uses Vtkjs files, add :page-vtkjs: true next to the title of the page. for example

= Title of the page
:page-vtkjs: true
the Vtkjs file is provided by the supplemental-ui directory.

3. Use WebGL rendering with VTK-js

We rely on an Asciidoctor extension to render VTK-js visualization.

  • Create a vtkjs block with a file URL:

[vtkjs,https://mydb.com/myfile.vtkjs]
----
----

  • Define how objects will be visualized:

[vtkjs,https://mydb.com/myfile.vtkjs]
----
{
  "deformation": [
    {
      "scene": "displacement"
    },
    {
      "scene": "von_mises"
    },
    {
      "scene": "pid"
    }
  ],
  "geometry": [
    {
      "scene": "geo_initial",
      "name": "solid"
    }
  ]
}
----
Each scene option corresponds to the entries in Paraview' left panel (default is Export.case). We advise you to rename each scene consistently with its content before running the Python script.

4. An example with Asciidoc in the Feel++ book

The example of Vtkjs visualization below is taken from the Torsion Bar example.