Introduction to controls in the SAP UI5 sap.ui.vk namespace

The spare part 3D model display in the SAP e-commerce cloud Spartacus UI uses controls from the controls under SAP UI5 sap.ui.vk.

The sap.ui.vk library provides controls for the visualization and manipulation of 2D and 3D models in applications.

The application uses the sap.ui.vk namespace. All other namespaces (sap.ui.vk.dvl, sap.ui.vk.threejs, sap.ui.svg) are implementation-specific and should be considered private APIs.

Enables 3D viewing using traditional DVL or ThreeJs rendering engines.

The selection of the 3D rendering engine is done using the sap.ui.vk.ContentResource object and its parameter sourceType.

To use the legacy DVL rendering engine, set the sourceType parameter to vds.

To use the ThreeJs rendering engine, set the sourceType parameter to vds4.

The legacy DVL rendering engine is deprecated and will be removed in an upcoming release.

Many new features do not work with older DVL rendering engines. For example, most of the tools available in the drawer toolbar only work with ThreeJs rendering.

Native Viewport

The Native Viewport control ( sap.ui.vk.NativeViewport ) provides a rendering canvas for 2D images loaded into Viewer applications.

The Native Viewport control (sap.ui.vk.NativeViewport) uses standard HTML and CSS to load image files natively supported by the browser into the viewing area. Standard VIT pan and zoom gesture support enhances viewing of loaded images.

The sap.ui.vk.NativeViewport control can occupy all or part of the user interface.

Scene Tree

The sap.ui.vk.SceneTree control renders a hierarchical view of nodes in a given scene.

The main function of the Viewport control is to provide a rendering surface for all or a partially loaded scene. A viewport can occupy all or part of the user interface.

View Gallery

The sap.ui.vk.ViewGallery control replaces the sap.ui.vk.StepNavigation control, which supports navigation and activation of procedures and steps contained within a single 3D scene. The sap.ui.vk.StepNavigation control is deprecated because it is only used with the DVL rendering engine.

Viewer

This control is designed to help application developers include simple 3D visualization capabilities in their applications by connecting, configuring, and rendering basic Visualization Toolkit controls as a single composite control.

Viewports can be connected to ViewStateManager objects to handle the selection and visibility states of nodes in the scene. This means that when a node is selected in the scene, that node will be highlighted. Also, if the viewport is connected to a scene tree control, selecting a node in the viewport will highlight the associated item in the scene tree.

The visibility state of a node can be changed when a viewport is attached to the scene tree, or when a DrawerToolbar is created and the show/hide button is enabled. Nodes can be hidden or shown in the viewport using the scene tree function or the drawer toolbar buttons.

The code to dynamically create the viewer port:

 private addViewport(): Observable<void> {
    return new Observable((subscriber) => {
      sap.ui.require(
        [
          'sap/ui/vk/ViewManager',
          'sap/ui/vk/Viewport',
          'sap/ui/vk/ViewStateManager',
          'sap/ui/vk/AnimationPlayer',
          'sap/ui/vk/ContentConnector',
          'sap/ui/vk/DrawerToolbar',
        ],
        (
          sap_ui_vk_ViewManager: any,
          sap_ui_vk_Viewport: any,
          sap_ui_vk_ViewStateManager: any,
          sap_ui_vk_AnimationPlayer: any,
          sap_ui_vk_ContentConnector: any,
          sap_ui_vk_DrawerToolbar: any
        ) => {
          const core: Core = this.getCore();
          const uiArea: UIArea = core.getUIArea(this.elementRef.nativeElement);
          if (uiArea) {
            const oldViewport = uiArea.getContent()[0] as Viewport;
            this.destroyViewportAssociations(oldViewport);
            uiArea.destroyContent();
          }

          this.viewport = new sap_ui_vk_Viewport({ visible: false });
          this.viewport.placeAt(this.elementRef.nativeElement);

          this.contentConnector = new sap_ui_vk_ContentConnector();
          this.contentConnector.attachContentChangesStarted(
            this.onContentChangesStarted,
            this
          );
          this.contentConnector.attachContentChangesFinished(
            this.onContentChangesFinished,
            this
          );
          this.contentConnector.attachContentLoadingFinished(
            this.onContentLoadingFinished,
            this
          );

          this.viewStateManager = new sap_ui_vk_ViewStateManager({
            contentConnector: this.contentConnector,
          });

          this.viewport.setContentConnector(this.contentConnector);
          this.viewport.setViewStateManager(this.viewStateManager);

          this.animationPlayer = new sap_ui_vk_AnimationPlayer();
          this.animationPlayer.setViewStateManager(this.viewStateManager);

          this.animationPlayer.attachViewActivated(this.onViewActivated, this);
          this.animationPlayer.attachTimeChanged(this.onTimeChanged, this);

          this.viewManager = new sap_ui_vk_ViewManager({
            contentConnector: this.contentConnector,
            animationPlayer: this.animationPlayer,
          });

          this.viewStateManager.setViewManager(this.viewManager);
          this.viewStateManager.attachSelectionChanged(
            this.onSelectionChanged,
            this
          );
          this.viewStateManager.attachOutliningChanged(
            this.onOutliningChanged,
            this
          );

          this.drawerToolbar = new sap_ui_vk_DrawerToolbar({
            viewport: this.viewport,
            visible: false,
          });

          this.viewport.addDependent(this.drawerToolbar);
          subscriber.next();
          subscriber.complete();
        }
      );
    });
  }

The final generated view port effect is as follows: