jasonnance Posted August 24, 2016 Share Posted August 24, 2016 Hi, I've been searching around for an answer to this and haven't found it in the docs or on here, so apologies if I missed something. I'm writing an application with some 3D stuff going on in the background and some information displayed in a 2D screen space canvas in the foreground. I want to be able to use both for interaction, but I want the 2D screen space canvas to take priority. I have some 3D objects that should be clickable, but if they're covered by a 2D canvas shape, I want the 2D shape to catch all the mouse events. Here's a playground that will hopefully help explain what I mean: http://babylonjs-playground.com/#KMVGI If you click on just the box, its opacity changes; this is fine. If you click on just the rect, its opacity changes; this is also fine. If you click on the area where the two overlap, both opacity properties change. I'd like for just the rect's opacity to change in that case. I'd also like for the pointer cursor to not appear on the area where the two overlap. How can I accomplish this? My 2D elements are simple enough that I could probably determine their bounding boxes and make sure any pointer events aren't contained in any of those boxes before handling them on my 3D objects, but that sounds nasty, and I feel like there must be a simpler solution I'm missing. Thanks! Quote Link to comment Share on other sites More sharing options...
Wingnut Posted August 25, 2016 Share Posted August 25, 2016 Hi @jasonnance, welcome to the forum. The "click-thru-screenSpaceCanvas" has been seen and reported, and according to @Nockawa's post here, the pointer events thing is being worked-on. Maybe Nockawa will visit and drop us a status report about clicking on/thru a screen space canvas. He is the author of Canvas2D system. I did SOME experimenting... trying to get cursor-pointer operational... but failed. http://babylonjs-playground.com/#1ONKPJ#11 Work happening in line 75... using CSS stylerule for cursor. Slowly, gently, move your cursor over the "Over Me" button. The cursor switches to finger-pointer... just for a moment, as it enters the green rect2d area, but then quickly changes back to arrow. If you continue mousing-over toward the center text2D within the rect2D... you'll see cursor switch to finger-pointer AGAIN... but just for a moment. Darn. Also, I tried some use of scene.hoverCursor, but I failed with that, too. Just possibly, a guy could set that pointer-over action... to be an executeCodeAction... which let''s you run a function of your choice... on pointerOver of the rect2D. In that function, you might be able to set scene.hoverCursor (and un-set it onPointerOut). But it is unlikely that this will work, because scene.hoverCursor might not recognize a screenSpaceCanvas, rect2d, or text2d... as hover-able things. They are not mesh and not a DOM entity. SO, I have nothing but bad news for you, so far. I will keep thinking. The momentary flashes of the finger-pointer cursor... when gently moving onto the OVER ME button... is SOME progress, but not much. Again, welcome to the forum. I wish I had better news about your issues. I agree with all you have requested, and I will keep thinking/testing when I have time. Be well, talk again soon. jasonnance 1 Quote Link to comment Share on other sites More sharing options...
jasonnance Posted August 25, 2016 Author Share Posted August 25, 2016 Hi @Wingnut, thanks for thinking and testing. It sounds like the issue is caused by using a ScreenSpaceCanvas, which handles interaction separate from the world. It sounds like I could use a WorldSpaceCanvas instead, as your PG in the thread you linked does (http://babylonjs-playground.com/#1KRMMG%2311), and get the results I want. I'll give that a shot. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 25, 2016 Share Posted August 25, 2016 Hello there, I've designed something in the Observable pattern for this case where you should be able to disable the next observers, I've modified your PG and it doesn't work, so I copy/paste you code locally and debug and come back asap. jasonnance 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted August 25, 2016 Share Posted August 25, 2016 Oh, you found that 4-worldspace thing, eh J? What a beast, huh? It can be done with 4-screenspace, too (Nockawa reminded me later that screenspace's have origin/location and size settings.) WorldSpaceCanvas2D have a 'node' associated with them, and I think that node (a mesh) is set .isPickable by default. So, if you mousewheel-in a bit on that PG, and spin around a certain way, you can actually drag'n'drop the side menus... just like you can the mesh. Weird. Just thought I'd point that out. If the 4 menus were made of screenSpaceCanvas2d's, that would not be possible... no node/mesh associated with that type of canvas2D. I enjoy trying demented unnatural things with the Canvas2D system, but I think it makes Nockawa nervous. heh. Thanks for fiddling with the observables for us, N. And if you have words about the cursor/crosshairs/grab-hand stuff, we'd be glad to listen. (thx) Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 25, 2016 Share Posted August 25, 2016 I found the issue, I'm fixing right now adam and jasonnance 2 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 25, 2016 Share Posted August 25, 2016 Ok, I've found two issues that were preventing you to succeed in your task. Firstable, there's something you should have done (and I understand it's hard to notice), I've modified your PG: http://babylonjs-playground.com/#KMVGI#1 you'll see the line 30 is new, it's basically for you to tell me: "stop processing more observers", which is what you want: only the observer of the canvas to be processed, but not the observer of the 3D Engine. That's all you have to do you make your case working (well, now I've fixed the bugs ). One little more info: event are first processed by the Canvas2D Engine, then they're processed by the 3D Engine if you don't set this property to true. I believe it's the right way to go because when you have on screen UI, you want it to be processed first. @MasterK I think you should be interested by this news/thread for your work. MasterK and jasonnance 2 Quote Link to comment Share on other sites More sharing options...
jasonnance Posted August 25, 2016 Author Share Posted August 25, 2016 That's perfect, thanks so much for the fixes and explanation! Nockawa 1 Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 26, 2016 Share Posted August 26, 2016 @Nockawa wow. That mean if i have 2 screenCanvas. i click on the top one. i can stop the bottom canvas to catch the event ? Good. And I think it's according to the SC's create order?? Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 26, 2016 Share Posted August 26, 2016 1 minute ago, MasterK said: @Nockawa wow. That mean if i have 2 screenCanvas. i click on the top one. i can stop the bottom canvas to catch the event ? Good. And I think it's according to the SC's create order?? exactly, and use some kind of logic to bypass your implem if you want another ScreenCanvas to actually do it. Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted August 26, 2016 Share Posted August 26, 2016 Yes and you can also nullify pointer-events in the styling of an canvas as well to stop clicks and mouse events Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.