Show TOC

ViewportLocate this document in the navigation structure

The sap.ui.vk.Viewport control provides a rendering canvas for the 3D elements of a loaded scene/loaded scenes.


The Viewport control's primary function is to provide a rendering surface for all or part of a loaded scene. The Viewport can occupy all or part of the user interface.

When initializing a Viewport instance, you must:
  • attach it to a GraphicsCore instance, which handles the rendering of loaded scenes
  • attach it to a Scene object so that the Viewport knows what scene to render

Loading Scenes Into the Viewport

The Viewport supports the loading of the VDS file format.

File formats that are natively supported by browsers are loaded by the Native Viewport control.

Node Visibility in the Viewport

The Viewport can be connected to a ViewStateManager object to handle the selection and visibility states of nodes in the scene. This means is that when selecting a node in the scene, that node will be highlighted. In addition, if the Viewport is connected to a Scene Tree control, the selection of a node in the Viewport will highlight the associated item in the Scene Tree.

The visibility state of a node can only be affected when the Viewport is connected to a Scene Tree. Nodes can be hidden or displayed in the Viewport using the Scene Tree functionality.

Gesture Handling in the Viewport

Gestures such as pan, zoom, and rotate are captured and processed by the sap.ui.vk.Loco library. The Viewport should be initialized with an instance of the sap.ui.vk.Loco library attached, in order for gestures to be captured and processed.

Keyboard Shortcuts in the Viewport

In addition to using mouse and touch gestures to navigate the scene in a Viewport, keyboard shortcuts are available.

Table 1: Viewport keyboard shortcuts
Keyboard Shortcut Function
DIRECTIONAL ARROW Rotate the scene.
+ Zoom into the scene.
- Zoom out of the scene.
  • The Viewport control loads 3D models in the SAP VDS (.vds) format only. Some 2D image formats can be loaded by the sap.ui.vk.NativeViewport control. See Native Viewport.
API Reference / Explored Samples
Related Information