# 3D and 2D screens at the same time **URL:** \ **Category:** CesiumJS\ **Created:** [September 20, 2024, 1:57pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311 "2024-09-20T13:57:20Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [September 20, 2024, 1:57pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/1 "2024-09-20T13:57:20Z")
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? ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [September 27, 2024, 12:06pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/2 "2024-09-27T12:06:53Z")
Is there anybody? ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [September 28, 2024, 10:47am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/3 "2024-09-28T10:47:12Z")
There are many people (even though the ones that you [`@`ed in another thread](https://community.cesium.com/t/multiple-views-of-single-cesium-viewer/2969/6) 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](https://community.cesium.com/t/shareddatasources/35455), 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 ```auto 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. ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [October 3, 2024, 5:45am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/4 "2024-10-03T05:45:47Z")
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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](https://sandcastle.cesium.com/#c=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) ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [October 3, 2024, 10:42am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/5 "2024-10-03T10:42:36Z")
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`](https://github.com/CesiumGS/cesium/blob/baaabaa49058067c855ad050be73a9cdfe9b6ac7/packages/engine/Source/Scene/Model/Model.js#L362), 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) ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [October 3, 2024, 11:00am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/6 "2024-10-03T11:00:02Z")
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? ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [October 3, 2024, 11:50am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/7 "2024-10-03T11:50:00Z")
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”. ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [October 3, 2024, 12:10pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/8 "2024-10-03T12:10:10Z")
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.** _ ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [October 3, 2024, 3:02pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/9 "2024-10-03T15:02:55Z")
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. ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [October 4, 2024, 5:20am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/10 "2024-10-04T05:20:11Z")
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. ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [October 4, 2024, 1:51pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/11 "2024-10-04T13:51:52Z")
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. ---
**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\ **Post date:** [October 4, 2024, 2:09pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/12 "2024-10-04T14:09:48Z")
> 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](https://sandcastle.cesium.com/?src=Multiple%20Synced%20Views.html&label=All). However, I would not recommend explicitly sharing `Entity` instances as that could lead to unexpected results. Please see [this GitHub issue](https://github.com/CesiumGS/cesium/issues/5214) for requests regarding multiple viewports which share resources. ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [October 5, 2024, 6:38am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/13 "2024-10-05T06:38:42Z")
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? ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [October 5, 2024, 9:49pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/14 "2024-10-05T21:49:49Z")
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. ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [October 7, 2024, 10:21am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/15 "2024-10-07T10:21:38Z")
@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? ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [October 7, 2024, 1:03pm UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/16 "2024-10-07T13:03:14Z")
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. ---
**Author:** ![clk](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/clk/32/25882_2.png) [@clk](https://community.cesium.com/u/clk)\ **Post date:** [October 9, 2024, 5:24am UTC](https://community.cesium.com/t/3d-and-2d-screens-at-the-same-time/35311/17 "2024-10-09T05:24:53Z")
Thank you @Marco13@Gabby_Getz for the replies.