We'd love your input: Multiple viewports in CesiumJS

CesiumJS
1

Hi all,

The CesiumJS team is taking another look at multiple viewport support, and we’d like to better understand your interest and use cases before we get too far into thinking about a solution.

We have a long-standing GitHub issue tracking this here: Multiple Viewports · Issue #5214 · CesiumGS/cesium · GitHub

When we say “multiple viewports”, we mean the ability to render multiple camera views of the same CesiumJS scene, without needing to create completely independent Viewer or CesiumWidget instances for each one. For example, an application might show a main 3D perspective alongside a top-down view, side view, or smaller picture-in-picture view, while sharing the underlying scene and data. In particular, we’re thinking about performance, and how to avoid duplicating redundant work on the GPU.

Some of the use cases we have in mind include:

  • 2D and 3D views side-by-side
  • Different views of the same data, such as perspective + orthographic top-down, plan + profile, and workflows common to CAD design
  • Subsurface and engineering workflows, where simultaneous views from different angles can make spatial relationships easier to understand
  • Overview/minimap views alongside a primary interactive viewport
  • Synchronized views for comparison or analysis

Those are examples, not our proposed scope. Before defining what the feature should actually look like, we’d like to understand the problems people are trying to solve.

If this is something you’ve wanted in CesiumJS, we’d especially like to hear:

What is your use case? What would multiple viewports enable in your application?

How are you solving it today? Are you using multiple CesiumJS Viewer instances, synchronizing cameras or application state, using another visualization tool, or something else?

How important is this capability to you? Is it a nice-to-have, a recurring pain point, or something currently blocking a workflow?

And, of course, any other ideas or feedback are welcome.

Thanks!

3

We are using Cesium to visualize the realtime data that occurring in specific regions

Currently, we are checking each region by repeatedly moving the camera using a button,

but if this feature were supported, it would be much easier to create a multiple region view like a CCTV screen. (Our ideal goal!)

4

When editing camera and animation paths in 3D applications, in the past I’ve found it extremely helpful to be able to draw two viewports: one showing what the camera sees, and another showing a third-person view of the camera and scene, in which I can position/rotate/scale the camera and other objects in the scene freely.

In three.js, for example, I might achieve this by scaling the canvas to the full size of the viewport, and rendering twice into the canvas, with a different rectangle defining the bounds for each render, one for the full view, and another smaller rectangle (e.g. in the corner) with the editor view or camera preview, etc. You can see a version of this workflow here in the React Three Fiber / Theatre.js integration. I’ve used Cesium/Theatre.js together as well, but without a way to edit separately from the camera preview it’s more difficult.

Ideally, it can also be helpful to be able to override certain things between renders. Most commonly I’d want to show/hide some objects in the editor view (scene grid, object representing the camera, editing controls/widgets…) vs. in the camera view. Or perhaps override certain materials in one view or the other, but that might be more advanced.