ArcGIS Maps SDK for JavaScript

SaGIS: See more of your 3D Web Content

Do you need to see more detail of your web scenes? Do you want to collaborate with a large group of people on different planning scenarios? Read on to understand how you can scale the resolution and display size of ArcGIS Maps SDK for Javascript applications onto large tiled display walls.

Why

The JavaScript Maps SDK is a great tool to share your content with other people. There are benefits in showing these web scenes on large displays with high resolutions:

Until now, the JavaScript Maps SDK was bound to the restricted environment of a single web browser. Compared to native applications, we have very little memory to work with, making it difficult to run Javascript applications at high resolutions. Scaling out of the confines of a single browser is now possible with the Scalable 3D GIS Renderer for the ArcGIS Maps SDK for JavaScript (SaGIS).

What

SaGIS is an open source template application for web developers to build their own solutions. It implements a simple display wall viewing application which synchronizes the camera, lighting and weather settings, loaded web scene and visibility of all layers between the viewing application and all displays on the wall. This state synchronization is sufficient for the viewer application to support viewing slides. For more complex scenarios, application developers can extent our sample implementation to synchronize additional state needed in their specific use case.

How

Tiled display walls are a cost effective way to create large high-resolution presentation screens. Typically each display is driven by a separate computer, scaling the rendering hardware with the display size.

SaGIS leverages this setup to drive each display using a separate browser instance. This cluster of display clients is then controlled by a viewer application, which can run on any device supported by the SDK. We provide SaGIS as an open source implementation template for developers to implement their usage scenarios for their application domain. SaGIS implements a simple reviewing scenario for web scenes.

A setup for a SaGIS tiled display wall consists of the following components:

The core of SaGIS is the server, which uses web sockets to orchestrate the distributed rendering session. The viewer application will send state updates to the server. State updates include data like the viewpoint, visible layers, weather settings, and others. The server broadcasts each update to all connected display clients. The display clients receive this state and apply it to their SceneView, therefore all showing the same data.

To create the correct tiling, each client instance is started with a different column and row parameter. These parameters are applied to view.camera.layout, a new property in version 4.29 of the JavaScript Maps SDK. They are also send the server, which assembles to overall tiled display wall shape for all clients. It will continuously update all clients, so they can set the total size (rows and columns) on their camera layout.

Example

We collaborated with the Visualization and Multimedia Laboratory at the University of Zurich (VMML) to demonstrate this solution. The VMML has a 3×3 (or 1.8×1.1 meter) tiled display wall with an overall resolution of 7680×4320 pixels. Each display is driven by a separate computer from the “hactar” visualization cluster. Each computer and browser only updates a 2560×1440 fullscreen window:
The displays have a 4 centimeter bezel between the panels. We compensate for the bezels by creating a tile layout which is slightly larger then three rows/columns, and spacing out the tiles in this layout. The size of the bezels between displays, relative to the screen width or height, is 0.07 or 0.12, respectively. The “column” bezel width is bigger since the screen height is less than the width, making the relative size of the bezel larger. This results in the following row, column layout for each computer:
SaGIS display layout
We use Google Chrome as our browser for the display clients. There are a few more parameters for launching the browser in fullscreen and loading the viewer. The hactar cluster runs on Linux, for different operating systems the following commands may need to be adapted accordingly:

ssh hactar08 "DISPLAY=:0 ./Downloads/opt/google/chrome/chrome --user-data-dir=/tmp 'https://hactar10.ifi.uzh.ch:42000/client.html?row=1.12&column=2.14&server=hactar10' --ignore-certificate-errors --kiosk --start-fullscreen --window-size=2560,1440" &

The row and column parameter vary on each client, and are set to 0, 1.12 or 2.24 for the row and 0, 1.07 or 2.14 for the column. The fractional values are the “skip space” for the display bezels.

One additonal detail is to hide the cursor on each computer. Since the hactar cluster is running Linux, we use a small tool (hhpc) which ships with SaGIS to make the cursor invisible:

gcc -o ./src/hhpc ./src/hhpc.c -lX11
ssh hactar01 "DISPLAY=:0 $PWD/src/hhpc"&

More Information

About the author

Stefan Eilemann works as a technical lead for the Engine team of the ArcGIS Maps SDK for Javascript. Previously he was the technical manager of the Visualization Team in the Blue Brain Project, is the CEO and founder of Eyescale, and the lead developer of the Equalizer parallel rendering framework. He received his PhD in Computer Science at the Visualization and MultiMedia Lab at the University of Zurich in 2019, and his masters degree in Computer Science from EPFL in 2015.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

Basemap Releases Include Over 300 New and Updated Communities

Read this article