I wanted each camera to display the corresponding GUI, I used layserMask to achieve this, but the effect is not what I want, shouldn’t the bottom button “top button” normally disappear? Why is it compressed and displayed now
playground: [https://playground.babylonjs.com/#4JXV32#151]
You’re only setting the first camera’s layer mask instead of the second one
, so two GUI texture are rendered for it. You can see this more clearly by adding meshes to the scene: gui layerMask | Babylon.js Playground (babylonjs.com)
Thank you for your reply, I made a stupid mistake, this is my adjusted demo, what I really want to ask is why the lower button is also triggered when I click the upper point of the upper button (the position inside the red rectangle)? How can I get them to trigger separately?
I understand the layerMask as follows: the topGUITexture can only be seen and triggered by the camera1, and the bottomGUITexture can only be seen and triggered by the camera2
But what’s happening now is that even though the bottomGUITexture is not visible to the camera1,but it can still be triggered by clicking on the bottomGuitexture
Is my understanding of layerMask wrong? Looking forward to your reply, thank you!
No, I think you got the point with the layerMask. Problem is you are using two FS adt in your scene and they are conflicting (unless this restriction has been removed but I don’t think so). I believe it also won’t enable you to get crisp texts because the renderScale for the adt FS works only for full screen. Although, I may be wrong. @carolhmj ?
In any case, I would likely use a different approach. Can you explain a bit further what you want to achieve? Why the screen is split in two and requires two different GUI layers? In essence, working with two cameras I would likely do something like detecting which adt is clicked or not clicked and enable the controls on the corresponding camera. But depending on what it is, you could also use a single FS GUI, split in two containers and hide the one or the other depending on context.
Made some tests here, and renderScale does affect the fullscreen ADT in the multiple viewports scenario, however, if the same ADT is rendered in two viewports, it seems that only one of them will respond to clicks (the top one on this case): Babylon.js Playground (babylonjs.com)
I do agree that working with a single ADT only might be easier in the end through.
@carolhmj @mawa
Well, I’m working on a project that spans multiple screens, as shown below
Although these are multiple monitors (The resolution of each piece is 1920 * 1080), they have been specially treated by the GPU to merge into one monitor, which means that only one browser window is open, the equivalent of a ((1920 * 3) * (1080 * 2)) canvas.
My current solution is to create multiple cameras with just one canvas. Each screen corresponds to a camera, and each camera sets the viewport property for the screen position. Then when the mouse moves, judge pointer corresponding camera, dynamic setting scene.cameraToUseForPointers, ensure each screen GUI can be triggered
Now I need to display a separate (unique to each screen) GUI and a generic (shared by all screens) GUI on each screen. So now I’ve created multiple ADTs and set up layermasks for them and their corresponding cameras that are visible to each other (just like the demo I sent).
[https://playground.babylonjs.com/#4JXV32#156]
And how do I use a single ADT to do that? As far as I know, an ADT can only implement a generic GUI, not a separate GUI
I’m sorry. I’m not sure to fully understand this part. Do you mean you have a setting to move the viewport of each camera to adjust the view for each monitor? Isn’t this something that should be done outside the canvas? On the monitor set-up? But then, I’m also not a specialist for games on multiple monitors (although I do use two monitors but I adjust the image from the panel not in an app).
In any case, if you have only one canvas, you could still have a 4th camera for the FS GUI displaying on top of all viewports. I can imagine that if you divide this single FS GUI in 3 (or 6) containers and for each container you would have a blank container at the top, you could next set top or height on this container when adjusting the viewport and the stacked GUI containers and controls would follow.
Edit: Does your independent GUI (the one for each monitor) need to be responsive? I believe not since everything is supposed to be fullscreen across 3 (or 6) monitors. In case for these, I would likely look on the side of ADT for mesh. Something like this (just very roughly done):
