CinemaViewer is built with CVLIB, a library which provides a JavaScript API to Paraview Cinema databases for visualization in the Browser.

In contrast to other Cinema viewers this library is focusing on modular expandability. Most applications have additional viewer requirements such as specialized data visualizations, aggregations, interactions, and other features a generic all-in-one viewer can not provide. Hence, CVLIB provides functions to access Cinema databases, process queries, create viewer UI elements, render results, and interact with the visualization so that users can build their own custom viewer.


CVLIB follows a simple system architecture. It provides the following classes:

  • Parameter: a parameter which can be queryied (e.g. camera angle, iso-value, time, …)
  • QuerySet: a set of Parameters
  • ResultSet: a response to a QuerySet (e.g. images, graphs, numbers, …)
  • Database: provides an interface to the Cinema database and processes QuerySets
  • Renderer: renders ResultSets
  • UIFactory: generates HTML widgets to request QuerySets and display rendered ResultSets
  • Controls: augments HTML widgets elements with mouse interactions such as panning and zooming

A Cinema database is interfaced via the Database class which can process QuerySets. The database will respond with ResultSets which can be rendered with the Renderer. For instance, if the ResultSet contains a collection of depth and diffuse images the renderer is able to composite the images with correct occlusion culling. The UIFactory can generate HTML widgets to adjust QuerySets via input elements and display output from the Renderer with viewports. The different Control classes enable users to zoom, pan, and rotate viewports.

All classes can easily be extended to deal with different Cinema databases, more complex rendering pipelines, or application specific data interactions. For Instance, CVLIB provides the classes DatabaseSpecA and DatabaseSpecC which both are subclasses of Database and process QuerySets according to their respective Spec implementations. For a detailed description of all available classes see theĀ Documentation.

CVLIB is atĀ


To create viewers one simply has to use the modules and interconnect them.

    // Load JSON file decribing a Cinema SpecA Database and return the database Scheme as a QuerySet
    var db = new CVLIB.DatabaseSpecA('data/volume-render/info.json', function(querySet){

    // Create a sidebar layout
    var sidebarLayout = CVLIB.UIFactory.createSidebarLayout();

    // Add the layout to the body

    // Add a headline to the sidebar
    sidebarLayout.sidebar.append( '<h2>Cinema Viewer<br>Spec A - Single</h2>' );

    // Create a table with input widgets to modify the QuerySet
    var queryTable = CVLIB.UIFactory.createSimpleQueryTable( querySet );

    // Add the QueryTable to the sidebar

    // Create a viewport for the images
    var viewport = CVLIB.UIFactory.createViewport();

    // Add the Viewport to the content

    // Augment the viewport with controls which can also modify the QuerySet
    new CVLIB.ControlsPhiTheta(viewport, querySet);

    // Create Renderer for SpecA images
    var renderer = new CVLIB.RendererSpecA();

    // Function which renders a resultSet to a canvas
    var renderFunction = function(resultSet){
        renderer.render(, viewport.canvas, true);

    // Function which requests a ResultSet for the current QuerySet
    var updateFunction = function(){
        db.processQuery( querySet, renderFunction );

    // On change of the QuerySet call updateFunction

    // Request image for initial QuerySet