Skip to main content
Version: v5.2

IafViewer Unreal engine features

Overview​

The Platform supports high-fidelity 3D rendering using the Unreal Engine (UE) 3D graphics engine.

This page demonstrates how to implement Unreal Engine within {{IafViewerDBM}}. The examples on this page also show various integration configurations where ArcGIS and Photosphere components are optional.

How the UE view is set up in IafViewer​

Architecture​

Your app can only communicate with the IafViewer via props and callbacks. The IaFViewer wraps the UE viewer (pixel stream) and its UI.

Configuration​

Enable and configure the UE viewer with the ue prop. See the example below.

ue={{ enable: true, config: { server: "...", app: "..." } }}

Use onUeReady to know when the viewer is ready (or failed). It receives ViewerReadyInfo: iframe, sendCommand, viewerReady, focusSelector, config, and optional errors.

Use eventHandler to receive all viewer events in a single, standardized EventObject format (for example, selection, camera, ready, errors).

Driving the viewer​

Props​

The props below are recommended for declarative behavior:

  • zoomElements
  • displayMode
  • showToolbar

The IafViewer applies these props and updates the UE view internally. No commands are needed.

sendCommand from onUeReady​

For programmatic control, sendCommand is recommended.

When viewerReady is true, use sendCommand({ commandName, commandRef?, params}) for actions such as zoom_to and set_camera. This matches the Enhanced Viewing Modes (EVM) pattern used by other viewer modes.

Legacy command prop​

It is best to use sendCommand for new code but for legacy code, you can still pass an array of command objects using ue.command.

Communication between app and IafViewer​

App to Iafviewer communication​

Commands are sent via sendCommand() or ue.command (format: {commandName, commandRef?, params}).

Internally, IafViewer translates these and communicates to the UE Viewer (for eaxample, via postMessage).

Iafviewer to App communication​

Events sent from the IafViewer to the app, are sent via the eventHandler.

IafViewer normalizes raw UE events (for example, string coordinates, P=10 Y=20 R=30) into EventObject with eventSourceGuid, eventName (use EvmUtils.EVM_EVENTS), and a structured payload.

UI​

Use showToolbar: true to display IafViewer’s own EVM toolbar (maximize, minimize, zoom, etc.).

Click interactions update the IafViewer state and props that control the UE view. They are not sent as commands to the app.

Clicks and camera changes in the 3D scene are reported to the app via eventHandler. UE Viewer UI or toolbar interactions will stay inside the IafViewer and will not be forwarded.

Notes on using the IafViewer with UE​

Keep the following in mind when using the IafViewer with UE:

  • Enable with ue={{ enable: true, config: {server,app} }}.
  • Use onUeReady to get sendCommand and know when the viewer is ready.
  • Use eventHandler for all events, and drive behavior either with props (for example: zoomElements, displayMode) or with sendCommand for imperative actions.
  • The UE view is always accessed through IafViewer’s props and callbacks, not directly.

Core components​

IafViewerDBM with UE Mode​

The IafViewerDBM is the database-managed viewer component that supports Unreal Engine rendering for high-fidelity visualization.

Key props for UE rendering​

{
  mode: "ue",                    // Mode identifier for UE rendering
  appId: string,                 // Application identifier for UE streaming

  // UE-specific configuration (REQUIRED)
  ue: {
    enable: boolean,             // Enable/disable UE viewer
    config: object,              // UE runtime configuration
    zoomElements: array,         // Elements to focus on initialization
    command: array,              // Legacy command array for compatibility
    eventHandler: function,      // Event callback handler
    displayMode: enum,           // Display layout mode
    showToolbar: boolean,        // Toolbar visibility
    alignment: enum              // Widget alignment position
  },

  // Optional integration components
  arcgis: object,                // ArcGIS viewer (OPTIONAL)
  arcgisOverview: object,        // ArcGIS Overview map (OPTIONAL)
  photosphere: object           // Photosphere viewer (OPTIONAL)
}

UE Configuration Object​

The {{config}} property contains settings for connecting to the Unreal Engine streaming service. Refer to usage shown below.

{
  server: string,                // UE streaming server URL
  app: string                    // Application path/endpoint
}

Configuration example​

{
  server: "https://connector.eagle3dstreaming.com",
  app: "/v6/eyJvd25lciI6ImludmljYXJhZGVtbyIsImFwcE5hbWUiOiJDaGljYWdvQXBwIiwiY29uZmlnTmFtZSI6InNlY3VyZVVSTCJ9"
}

Setup files​

Step 1: Define UE configuration​

// ue/config.js
export const UE_CONFIG = {
  server: "https://connector.eagle3dstreaming.com",
  app: "/v6/your-app-endpoint"
};

export const APPLICATION_ID = "your-application-id";

Step 2: Create UE properties helper​

// ue/properties.js
import { APPLICATION_ID } from "./config";
import { UE_CONFIG } from "./config";

export function getUeProperties() {
  return {
    mode: "ue",
    appId: APPLICATION_ID,
    config: UE_CONFIG
  };
}

Step 3: Create UE Commands Helper​

// ue/commands.js
import { IafEvmUtils } from '@dtplatform/iaf-viewer';
import { v4 as uuid } from 'uuid';

export const zoomToBuildingAction = (buildingName) => {
  return IafEvmUtils.apiUnwrapMmvCommadToEvmProperty({
    commandName: IafEvmUtils.MMV_COMMANDS.ZOOM_TO,
    commandRef: uuid(),
    params: { elementId: buildingName + "_0" }
  }, true);
};

Component summary​

Required Component​

There is one main required component: {{ue}} - Unreal Engine viewer configuration (always required for UE rendering)

Optional Components​

The main optional components are:

  • {{arcgis}}: Main ArcGIS viewer (optional)
  • {{arcgisOverview}}: ArcGIS Overview map (optional, typically used with ArcGIS)
  • {{photosphere}}: Photosphere viewer for interior views (optional)

Common configurations​

Configuration 1: Minimal UE​

Only {{ue}} property configured. Best for standalone high-fidelity rendering.

Configuration 2: UE + ArcGIS​

{{ue}} and {{arcgis}} properties. ArcGIS provides context, UE provides detail.

Configuration 3: UE + ArcGIS Overview​

{{ue}} and {{arcgisOverview}} properties. Overview shows location context while navigating in UE.

Navigating in UE. No main ArcGIS map needed.

Configuration 4: UE + ArcGIS + ArcGIS Overview​

{{ue}} and {{arcgis}} and {{arcgisOverview}} properties. Both main ArcGIS map and overview map provide context.

Configuration 5: UE + Photosphere​

{{ue}} and {{photosphere}} properties. UE for exterior, Photosphere for interior.

Configuration 6: Full Integration​

All components enabled. Complete navigation flow with all views synchronized.

UE Events reference​

CAMERA_UPDATE​

CAMERA_UPDATE is triggerred when camera position changes in UE viewer.

Use case: Synchronzie camera with ArcGIS overview

eventHandler: (ev) => {
  if (ev.eventName === IafEvmUtils.EVM_EVENTS.CAMERA_UPDATE) {
    syncCameraToOverview(ev.payload.position);
  }
}

SELECTION_UPDATE​

SELECTION_UPDATE is triggered when the user selects an element in UE.

Use case: Navigate to Photosphere or update other views.

eventHandler: (ev) => {
  if (ev.eventName === IafEvmUtils.EVM_EVENTS.SELECTION_UPDATE) {
    const buildingIds = ev.payload.elements
      .filter(el => el.elementType === 'gis_building')
      .map(el => el.id);
    navigateToBuilding(buildingIds[0]);
  }
}

COMMAND_RECEIVED​

COMMAND_RECEiVED is triggered when UE sends a command.

Use case: Process commands from UE runtime.

eventHandler: (ev) => {
  if (ev.eventName === IafEvmUtils.EVM_EVENTS.COMMAND_RECEIVED) {
    processCommand(ev.payload);
  }
}

Display modes​

Fullscreen​

UE viewer covers entire viewport. Best for standalone UE rendering.

ue: {
  enable: true,
  displayMode: IafEvmUtils.EVMDisplayMode.FULLSCREEN,
  showToolbar: true
}

Default​

UE viewer shares space with other views. Best for multi-view integration.

ue: {
  enable: true,
  displayMode: IafEvmUtils.EVMDisplayMode.DEFAULT,
  alignment: IafEvmUtils.EVMWidgetAlignment.RIGHT_BOTTOM,
  showToolbar: true
}

Split​

UE viewer splits viewport with another view..

ue: {
  enable: true,
  displayMode: IafEvmUtils.EVMDisplayMode.SPLIT,
  alignment: IafEvmUtils.EVMWidgetAlignment.LEFT_TOP
}

Widget Alignment Options​

The alignment options are determined by these controls:

  • LEFT_TOP
  • LEFT_BOTTOM
  • RIGHT_TOP
  • RIGHT_BOTTOM

These control viewer position in SPLIT or FIXED display modes.