Overview

A loaded 3D model can be visualized in the interactive 3D view with the help of WebGL. Under the cover CAD Exchanger Web Toolkit uses three.js implementation for visualization.

The workflow consists of the following steps:

Creation of a scene and viewport;
Selecting the part representation to be used for visualization;
Specifying display mode;
Displaying selected part representation.

Details on each step are provided below.

‍For deeper understanding of the visualization architecture please read the Architecture article.

Creation of a scene and viewport

A ModelPrs_ViewPort defines a rectangular frame (or canvas) which is used to display objects in 3D space. ModelPrs_Scene encapsulates a scene, connects with a viewport, and manages object display and interactive selection.

// Create visualization scene
const aScene = new cadex.ModelPrs_Scene();
 
// Create viewport with default config and div element attach to.
const aViewPort = new cadex.ModelPrs_ViewPort({}, document.getElementById('file-viewer'));
 
// Attach viewport to scene to render content of it
aViewPort.attachToScene(aScene);

Displaying a model

To be displayed with the help of the Web Toolkit, each part (cadex.ModelData_Part) must contain at least one representation. By default, this is automatically ensured at the preparation phase when converting the input file into the CDXWEB format. Some formats (e.g. JT) may allow multiple polygonal representations (a concept known as LOD, or Level of Details) attached to a part.

Creating visualization graph

To display the model on the scene it should be converted into visualization graph (see Visualization addon documentation to get detailed description of the concept). Typically, every scene graph element should be converted into corresponding wtk_ModelPrs_SceneNode with the help of wtk_ModelPrs_SceneNodeFactory. Factory provides methods for creating scene nodes from different model objects.

The following example demonstrates how to create a scene graph from a model:

//select first available representation (by default, BRep or Fine poly)
const aRepMode = cadex.ModelData_RepresentationMask.ModelData_RM_Any;
 
// Create visualization graph for whole model.
const aSceneNodeFactory = new cadex.ModelPrs_SceneNodeFactory();
const aRootNode = await aSceneNodeFactory.createGraphFromModel(aModel, aRepMode);

Specifying a display mode

The Web Toolkit supports several display modes specified with wtk_ModelPrs_DisplayMode enumeration:

	Wireframe: Displays a model using boundary curves
	Shading: Displays a model using shaded display without boundaries
	ShadingWithBoundaries: Displays a model using shaded display with B-Rep face boundaries.

A display mode can be defined for each scene node. To use one display mode for the whole model, just set the root node's displayMode property.

aRootNode.displayMode = cadex.ModelPrs_DisplayMode.Wireframe;
aRootNode.displayMode = cadex.ModelPrs_DisplayMode.Shaded;
aRootNode.displayMode = cadex.ModelPrs_DisplayMode.ShadedWithBoundaries;

Updating scene

Once a visualization graph has been constructed, its top node can be added to a scene as a new root:

// Add graph to the scene

aScene.addRoot(aSceneNode);

To see the scene changes on the viewport, the scene should be updated:

// Wait until all changes has been applied and be displayed

await aScene.update();

‍Note: updating the scene can be time-consuming, therefore it should be delayed until all changes to the scene nodes have been applied.

‍Note: during update the viewport can be re-rendered multiple times to show already updated nodes.

Refer to Tutorial and Basic 3D Viewer example for a self-contained demonstration of the visualization with the help of Web Toolkit.