# How to let 2d gui block operation of 3d gui **URL:** \ **Category:** Questions\ **Created:** [October 19, 2022, 9:01am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932 "2022-10-19T09:01:50Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Digital\_Mimesis\_Lab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digital_mimesis_lab/32/26710_2.png) [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)\ **Post date:** [October 19, 2022, 9:01am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/1 "2022-10-19T09:01:50Z")
I have a 2d button and a 3d button in the same scene but use different camera for each. The 3d button is render behind 2d button. When I click the 2d button , the 3d button also response to the click operation. I do not want this, I want only the 2d button to response to the click action. How to achieve that? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 19, 2022, 10:36am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/2 "2022-10-19T10:36:42Z")
I don’t think it’s supported by the GUI system, as 2D GUI and 3D GUI are two separate sub-systems. In 2D GUI you can use `Control.isPointerBlocker=true` to prevent an event to reach other controls when it has been intercepted by a control but this property is unknown to the 3D GUI. Maybe @carolhmj will have an idea about that. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 19, 2022, 12:01pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/3 "2022-10-19T12:01:33Z")
Interesting case. I actually have something similar in my scene. I believe using the PointerBlocker ability of the ADT controls/containers would be the way to go (at least, I know it would work). The only question that remains is under which condition should the 3D GUI be enabled (below the ADT layer). You wouldn’t happen to have a PG or can provide some more details about this (like should the 3D GUI control be inactive only when ‘hidden’ by a 2D Control – or – whenever the ADT layer is visible/active, all 3D controls should be blocked?) ---
**Author:** ![Digital\_Mimesis\_Lab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digital_mimesis_lab/32/26710_2.png) [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)\ **Post date:** [October 19, 2022, 1:16pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/4 "2022-10-19T13:16:33Z")
![微信截图_20221019211457](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/9/7998857fc8b3619db08fb0eda25ffd517961a967.jpeg) like it said in the above image, the 2d button will partially overlay 3d button, when I click 2d button, if the 3d button part are overlay by 2d button, then the 3d button should not response ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 19, 2022, 1:19pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/5 "2022-10-19T13:19:19Z")
That’s because the button control is not a pointerBlocker by default. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 19, 2022, 1:44pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/6 "2022-10-19T13:44:58Z")
OK, my apologies there. It doesn’t seem to quite work like this. I was pretty sure I did it before in a scene, just can’t recall where and how. I did this PG that only demonstrates that pointerBlocker does not work for the 3D GUI. Calling back @Evgeni_Popov and @carolhmj on this case (and I will follow because I also want to know 😉) Thanks, > **[Babylon.js Playground](https://playground.babylonjs.com/#HJZBRG%23275)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [October 19, 2022, 1:51pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/7 "2022-10-19T13:51:55Z")
I think the problem here is because the 2D and 3D GUI are using different cameras, so the 2D GUI will only block the events going through its own camera 🤔 ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 19, 2022, 1:56pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/8 "2022-10-19T13:56:05Z")
Yes, i remember how I did it now. I had no other choice than to use removeControl on the panel and add it again after the ADT GUI (FS) interaction. Not very sexy. It didn’t do too much harm in my case because my ADT was already a complete overlay of the scene, so nobody would notice. But, in this particular case seeing the control disappear and reapppear automagically would look real weird. Any idea of a possible solution? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 19, 2022, 5:00pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/9 "2022-10-19T17:00:57Z")
Unfortunately I can’t see a solution (but I’m no expert with inputs in general) except if the 2D icon bar is modal (meaning you can only click on icons in this bar or close the bar and can’t click anywhere else): in that case, when the 2D icon bar is displayed, you can disable the pointer event handlers of the 3D GUI until the 2D icon bar is dismissed, and then re-enable the handlers at that time (I guess it’s possible to disable/enable all event handlers at once for a 3D GUI, even if I don’t know how…). ---
**Author:** ![Digital\_Mimesis\_Lab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digital_mimesis_lab/32/26710_2.png) [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)\ **Post date:** [October 20, 2022, 1:16am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/10 "2022-10-20T01:16:32Z")
If the 2d and 3d use the same camera, how can I let 2d gui always renders on top of 3d gui? ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 20, 2022, 11:33am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/11 "2022-10-20T11:33:04Z")
Well, @carolhmj @Evgeni_Popov I’m also on this case since this morning for my own use. And I would have some additional comments/questions. From my tests, it appears that even a mesh does not block 3D GUI pointer events. You can check this from my PG above. Question is: How can we possibly block a 3D GUI pointer event? Other than with the clumsy (sry) solution of manually disabling pointer event handlers (and then one would need to know how to this for a start). ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 20, 2022, 12:21pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/12 "2022-10-20T12:21:38Z")
Ok, I found a way. `UtilityLayerRenderer` has a `pickingEnabled` property that enables/disables event handling. Also, it is calling the `Scene.isPointerCaptured` to know if the event has already been handled or not. By combining those info, we can do: > **[Babylon.js Playground](https://playground.babylonjs.com/#HJZBRG%23277)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes It overrides `scene.isPointerCaptured`: ```typescript const saveIsPointerCaptures = scene.isPointerCaptured.bind(scene); let enable3DEvents = true; scene.isPointerCaptured = (pointerId) => { manager.utilityLayer.pickingEnabled = enable3DEvents; return saveIsPointerCaptures(pointerId); }; ``` So we can use the `onPointerEnterObservable` / `onPointerOutObservable` observers of a `Control2D` to block 3D event handling: ```typescript const block3DEvents = (ctrl2d) => { ctrl2d.onPointerEnterObservable.add(() => { enable3DEvents = false; }); ctrl2d.onPointerOutObservable.add(() => { enable3DEvents = true; }); }; ``` ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 20, 2022, 1:35pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/13 "2022-10-20T13:35:23Z")
Thanks. Bookmarked. You know, I just knew you could do it 😉 If you can’t, nobody can 😀 May be you can now quickly check out my other related finding of the day. The solution might also be around this UtilityLayerRenderer (hopefully?): > [@3D GUI + PP imageProcessingEnabled makes the 3D GUI show on top of all](https://forum.babylonjs.com/t/3d-gui-pp-imageprocessingenabled-makes-the-3d-gui-show-on-top-of-all/34989): > > Dears, I spent half of my day deconstructing all of my scene, creating tests and PGs for this. I couldn’t understand why my 3D GUI layer would show on top of my meshes when, in a simple PG, it doesn’t. Finally, stumbled over this one. Don’t know if it’s a bug or a restriction (such as i.e. the use of scattering with the 3D GUI) but on the other hand, I did not find any warning or information about this. So, FYI, and from this PG: Enabling imageProcessing on the default rendering pipeline … ---
**Author:** ![Digital\_Mimesis\_Lab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digital_mimesis_lab/32/26710_2.png) [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)\ **Post date:** [October 21, 2022, 5:24am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/14 "2022-10-21T05:24:15Z")
> [@Evgeni\_Popov](#): > > `(pointerId) => {` Totally Amazing! Thanks! Since u are such a master of BabylonJS, could u please help me with another difficult problem about GIF? Here is the problem’s link :[https://forum.babylonjs.com/t/re-is-there-an-easy-way-to-use-gif-as-a-texture/34789](https://forum.babylonjs.com/t/re-is-there-an-easy-way-to-use-gif-as-a-texture/34789) ---
**Author:** ![Digital\_Mimesis\_Lab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digital_mimesis_lab/32/26710_2.png) [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)\ **Post date:** [October 21, 2022, 6:41am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/15 "2022-10-21T06:41:15Z")
There is one problem though, that is if I click the “close” button which will set the gui to be invisible, then the out event will never be detected, hence the 3d gui will never be active. And I can not find an event called such as “onInvisible”. Any idea? I came with an solution, please help me check it whether it will has a performance problem? ![1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/d/ed330a71b9d00b8cfdab79d051f503b1e149a699.png) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 21, 2022, 7:07am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/16 "2022-10-21T07:07:51Z")
This might be odd to say, but: Why don’t you just call ‘enable3DEvents’ when hidding your ADT controls? > **[Babylon.js Playground](https://playground.babylonjs.com/#HJZBRG%23289)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 21, 2022, 10:40am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/17 "2022-10-21T10:40:19Z")
Actually I have over complicated my solution, there’s no need to override `isPointerCaptured`: > **[Babylon.js Playground](https://playground.babylonjs.com/#HJZBRG%23290)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes You can just do: ```typescript const enable3DEvents = (enable) => { manager.utilityLayer.pickingEnabled = enable; }; const block3DEvents = (ctrl2d) => { ctrl2d.onPointerEnterObservable.add(() => { enable3DEvents(false); }); ctrl2d.onPointerOutObservable.add(() => { enable3DEvents(true); }); }; ``` Regarding your last problem, as @mawa is saying, why not simply reenabling 3D event handling in the `onClose` button handler? ---
**Author:** ![Digital\_Mimesis\_Lab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digital_mimesis_lab/32/26710_2.png) [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)\ **Post date:** [October 25, 2022, 2:05am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/18 "2022-10-25T02:05:13Z")
Yes, I could. The only problem is that I have to do this for every close button instead of just addBlock(gui). But it does have better performance . ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [October 25, 2022, 12:23pm UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/19 "2022-10-25T12:23:08Z")
> [@Digital\_Mimesis\_Lab](#): > > problem is that I have to do this for every close button How many close buttons do you have? I suppose you could still declare this for all close buttons with a loop. By any means, I’m afraid there’s no alternate way as of today. You will likely have to do with it until we eventually find better. ---
**Author:** ![Digital\_Mimesis\_Lab](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digital_mimesis_lab/32/26710_2.png) [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)\ **Post date:** [October 27, 2022, 1:40am UTC](https://forum.babylonjs.com/t/how-to-let-2d-gui-block-operation-of-3d-gui/34932/20 "2022-10-27T01:40:00Z")
Not too many, this does work for now.