Hit-test with dynamic texture possible?

[bws]

Hi,

I'm looking at the excellent example at http://playground.babylonjs.com/#HSVQL  (lines 118-130) and was wanting to know if there was a way to attach an action to a Dynamic Texture (line 118), or it's related 'context' (line 126) ?

I was wanting to use this idea in an in-game 'menu', and be able to display a set of options, you know, like a menu... and the user to be able to select one. I'm using a ArcRotateCamera and love how the text is always facing the user. 

I believe that an ActionManager is only attachable to a Mesh (and not a DynamicTexture), and the canvas CanvasRenderingContext2D object that the myDynamicTexture.getContext() returns doesn't appear to have any funtionality I'm after (like readMousePosition() or something similar).

I initially thought of producing 2D Plane meshes for the menu, but I'm not entirely sure how to go about forcing them to be always facing the user ?

Any ideas or guidance is very appreciated.

Thanks,

bws.

[MidnightCow]

I think the bGUI extension is convenient for this:

 

https://github.com/Temechon/bGUI

 

 

[Wingnut]

Hi guys!

   Yep, bGui, also CastorGui, which I think is a derivative of bGui.  Both are good forum search terms.

 

Also, "billboardMode" makes meshes face toward cameras, and can be set in 5 different ways.  It takes single digit whole integers for its values, but often folks use one of the five static values pre-declared for it...

mesh.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_NONE;mesh.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_X;mesh.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_Y;mesh.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_Z;mesh.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_ALL;

Also on the abstractMesh superClass of mesh, we have mesh.lookAt(stuff).  I hear, internally, it uses the same activity as billboardMode... and therefore also suffers from a unique math artifact that causes a billboarded/looked-at mesh to rotate when arcRotateCameras get near polar positions.  Here is an example of that... http://www.babylonjs-playground.com/#12ZRI0 .  Drag the camera up/down to near-pole positions to see the mesh do their z-spins. 

 

You can set arcRotateCamera upper and lower beta limits... to keep the camera from going near the poles, and thus preventing that artifact z-spin on the looked-at or billboarded mesh.

 

You can also use HTML buttons that are absolute-positioned onto canvas locations, but I hear that SOME mobile devices cannot do this... no access to DOM.  I hear that bGui and CastorGui and JcPalmer's dialog system... are not affected by this, and work well with mobile devices.  Other experts and forum posts... will have more details/info about those things.  I have no experience with these, or with mobile devices.

 

Maybe the most simple... you can create a plane called menu panel, and use it as a parent for many button planes over-layed atop (each with an actionManager).  In the final step, parent the menu panel to the camera (setting some position offsets to keep your menu along the top, bottom, or side of the camera's view). 

 

We have outlines, edgesRendering, and showBoundingBox to put edges around button plane borders or around the menu border, if you want to flash the borders or other effects.  (You could create/place button borders with added boxes or planes, too.)  You'll have full color and image power on the button planes themselves, or via their textures.  If you use dynamicTextures for the button labels, you can set dynamicTexture background to transparent, if wanted, so textures or colors on the button plane mesh... show through (background image/color).

 

How, some folks might ask?  Well, I heard a rumor that material.emissiveTexture/Color and material.diffuseTexture/Color are combined at render time.  (color intensities are settable, as well as texture.level)  So, you could put the dynamicTexture (the button label with transparent background)... into material.diffuseTexture, and then use material.emissiveTexture or .emissiveColor to set the button plane's texture or color (it will show-through the dynamicTexture's transparent background).  Fancy! 

 

Lastly, let's re-visit your idea of clickable dynamicTextures.  There is no feature like that, in BJS.  BUT... clicking on your main menu plane will return a pickingInfo object.  Notice that it has a property returned from the pick... called pickedPoint.  By using the value in that property, you can determine WHERE on the master menu plane... the pick happened.  Therefore, you can determine which button (which dynamicTexture) was clicked.  That gives you the same functionality as having clickable/pickable dynamic textures, right?  You bet. 

 

There's other helpers there. Let's pretend that you need 5 buttons on your menu.  Let's pretend you made a SINGLE dynamic texture... with the button labels/borders for all 5 buttons.  See the bu and bv properties, as well as the getTextureCoordinates() function... there on the pickingInfo object?  Yep, you can determine WHERE the click happened... on the single dynamicTexture.  Again, from that, you can determine which button (-area) was clicked.

 

Ok, that's enough for this post.  Do some forum searches, try some things, we're here to help if things get ugly.    Good luck, keep us posted, if you please.

[bws]

Wow! Thanks for the detailed answer - certainly lots of options to play with there. I'll definitely check them out.... cheers as well Midnight.

My first attempts will probably be the 'manual' 2D texture-with-parent option, followed by bGUI. Thanks peeps.