3D and 2D screens at the same time

Hi everyone, I am a newbie to CesiumJS and working on a project that has 2 scenes as 3D and 2D at one screen. I can display them side by side and add some entities to them. Both works fine in this way. However, while doing this I need to add each entity or make screen configuration etc. for each screen one by one. I want to make it in a way that a change in one of my screen should also be shown at my other screen. I heard that Cesium has a way of doing this but I couldn’t find how. Can someone help about this?

Is there anybody?

There are many people (even though the ones that you @ed in another thread are no longer active here). The difficulty with answering this kind of question is that the answer will always start with “It depends…”, and then can quickly derail into deep, technical considerations about the requirements, project setup, goals, and pros and cons of different approaches.

Generally speaking, it does not seem to be possible to have “one scene” that is shown in 2D and 3D simultaneously.
(I think that this would be nice to have. And when drawing a high-level diagram about some renderer architecture, it wouldn’t be clear why this should not be possible. But … the devil is in the detail).

In another thread that you opened, you already seem to describe what could be the basic approach for solving this - namely, to create two Viewer objects, one for 2D and one for 3D, and then just add everything that should be rendered to both viewers.

Depending on what exactly is added there (and how), this may require some care and special considerations. For example, something like

const model = loadSomeModel();
viewerA.scene.primitives.add(model);
viewerB.scene.primitives.add(model);

might or might not work (and I’d guess that it does not work). Instead, you may have to load the model twice.

So … when you encounter a specific problem with this approach, it would be best to carve out a minimal example that shows the problem, and post it here as a Sandcastle. This will allow others to provide more focussed help more quickly.

1 Like

Hey @Marco13 thanks for repyl. Multiple viewers is possible in one screen also there is an example on sandcastle. I improved it to my case. I am providing sandcastle code below. As you can see when I add a plane with DataSource structure it does not display on both viewers. It only displays points and other entities that I add to viewers separately.

Code:
https://sandcastle.cesium.com/#c=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

The example that you posted uses different Viewer instances, and therefore, different Scene instances, and different entities. That’s why you have to add objects to both views for them to actually appear.

I cannot say for sure why this happens to work for the “shared data source” and the “point” entity. But as I said: It’s not surprising that it does not work for the 3D model. It starts on the lowest level, namely, that the Model stores the Scene, which bascially means that one model cannot appear in two scenes.

(I’m not sure whether this helps - but it may at least explain the current behavior. You already saw that it is possible to add the models manually to both viewers)

Yes, thanks for the reply. It enlightens some of my problems.

I also want to ask you something can I do something like this.
I have 1 viewer and multiple scenes of that viewer. Meaning I am adding my entities to a 3D viewer. But I am displaying it in multiple 3D and 2D scenes at the same screen from different perspectives. Does something like this possible?

For some technical aspects, it might be necessary to either 1. consult someone from the CesiumJS core team or 2. spend (potentially: a lot of) time with looking at the implementation details and evaluate different options.

But the last question sounds like it was related to what I said earlier: It does not seem to be possible to have “one scene” that is shown (in 2D and 3D simultaneously - or more generally) in multiple Viewer instances.

(Again: I think that this would be desirable. And one could think about how to work towards a state where this is possible. But on a very low level, there are obvious “blockers” for this. A scene has a canvas. Which canvas should this be, if there are multiple canvases? …)

But maybe I misunderstood someting here…

I have 1 viewer and multiple scenes of that viewer.

To my understanding, there is a 1:1 connection between Scene and Viewer, so I’m not sure what you mean by “multiple scenes”.

What I mean is you said the code in Sandcastle has 2 viewers. Then I decide to decrease it to 1 viewer. Let’s say it is in 3D mode and I know that I can change its scene from 3D to 2D using viewer.scene.morphTo2D() and vice versa viewer.scene.morphTo3D().

I mean that I want to display 2D and 3D versions of the same viewer on the same time like different angles of the same camera.

Edit: I also used sharing a single DataSource, or cloning it with 2 viewers too instead of camera angles but couldn’t get what I want.

You can create one Viewer, which has one Scene, and you can add elements to this scene. But you cannot create two viewers for one scene. You can still create two viewers, with two scenes, and add elements to both scenes. This is not ideal. But if this is not sufficient to accomplish the goal, then I still have not understood what the goal is.

Let’s say I want to display a milk truck on the same screen as 3D and 2D at the same time. As I understand from your responses to do this I need to use 2 viewers. However, I am thinking adding an entity to my program will result in adding this entity to both viewers for all entities. And I am thinking it like this is an overhead for the program. I want to add an entity to one viewer and display it on the others too without requiring an extra addition to those. Am I mistaken or do we have a better way for performance for this problem.

As far as I know, it is not possible to use the same entity in two different Viewer instances.

Maybe @Gabby_Getz can confirm this, to be sure.

As far as I know, it is not possible to use the same entity in two different Viewer instances.

Correct. You can certainly share the state data behind the entities and sync that between two viewer instances. However, I would not recommend explicitly sharing Entity instances as that could lead to unexpected results.

Please see this GitHub issue for requests regarding multiple viewports which share resources.

Thanks Gabby but I have seen them before and couldn’t get what I need.

I am wondering is it possible to display a single viewer as 3D and 2D scene at the same time on the same screen or different?

You can create two viewers, with two scenes, and add elements to both scenes. Yes, this will cause a certain overhead (in terms of memory consumption). But it is the only solution right now.

@Marco13, thanks for all of the answers till now. Even though I am still at the same place, I had an opportunity to talks with experts. I want to ask one last question. I kinda feel like you answered this above but I want to make it clear.

Let’s say I have a single viewer and it is in full screen size and I also want to display the same viewer on one of the corners as a small screen too. Is there a way for this or do I still need 2 viewers?

If it’s really the same viewer, you might get away with creating a screen capture of the main viewer and displaying that screen capture. This does raise some question about performance and such. But for certain cases, it might be better than duplicating the whole viewer. However, it might be better to ask this in a new thread, maybe someone has better ideas here.

Thank you @Marco13 @Gabby_Getz for the replies.