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

  • Create a div with an id where you want to place the WebGL window.

    <div id="vtkVisuSection1" ... </div>
  • Then, you can call the function feelppVtkJs.createSceneImporter( divId, options ). The first argument divId is the id of the div defined previouly. The second argument options collect the rendering properties :

    • fileURL : [mandatory] the url of a vtkjs file

    • objects : description of objects to visualize.

  objects: { "deformation":[ { scene:"displacement" }, { scene:"von_mises" }, { scene:"pid" } ],
              "geometry":[ { scene:"geo_initial", name:"solid" } ] }
  • onlyOneObject : [default=false] rendering is done for only one object of the scene (only work if objects is not given)

<script type="text/javascript">
feelppVtkJs.createSceneImporter( vtkVisuSection1,
  { fileURL: "https://mydb.com/myfile.vtkjs",
    objects: { "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.