VTK.js 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

Building a VTKJS file

A VTK.js 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 VTK.js are uploaded then to Girder and are then accessible from within the web browser. See

how to contribute data using Girder
and the Data manual to understand Feel++ data management.

Import the javascript library in an Antora page

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

= Title of the page
:page-vtkjs: true

the VTK.js file is provided by the supplemental-ui directory.

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.

An example with Asciidoc in the Feel++ book

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