GUI mapped to Box Faces

[royibernthal]

I'd like to display GUI on box faces.

For that purpose, I'm creating an AdvancedDynamicTexture with 6 objects, place horizontally one after the other. Sort of like a dynamic texture atlas, each part representing a different face of the box.

Once I have that, I'm trying to map each part of the texture to its corresponding part in the box using faceUV.

 

Here's how it looks like in a full screen GUI:

https://www.babylonjs-playground.com/#XCPP9Y#337

 

Here's how it's mapped to the box faces:

https://www.babylonjs-playground.com/#ICZEXW#22

 

As you can see, it's still not working as I want it to.

I'd like to create objects in their real size (e.g. images) inside the texture, instead of filling the texture completely by using percentage to define width, height and positioning - an approach which has its own problems as well as far as I can see.

 

Is it possible to change the width and height of AdvancedDynamicTexture to match its content? (e.g. in this example width: 514 x 6, height: 514)

I assume this could possibly solve the issue and then distributing GUI parts to their corresponding faces should be easy since we could treat AdvancedDynamicTexture as if it was an ordinary texture atlas:

https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors

[Sebavan]

ping @Deltakosh as you asked for it :-) Happy Come Back !!!

[Wingnut]

Hi guys!   Hey Royi... I just want to remind you of something Deltakosh often reminds me/us-of... and is easy to forget:

"Often, dispose old one and re-create."

Bending and twisting something... in an attempt to do after-rendered scale-to-fit/paddings/margins... can give ya tumors.

Perhaps, there is a "re-create instead of adjusting" solution for you, too.  Just a reminder of that sometimes-viable option. 

Hope you're doin' well!

[royibernthal]

Hey, I don't think it's an option here, but thanks for the reminder

[GameMonetize]

You can create the texture as the size you want:

https://www.babylonjs-playground.com/#ICZEXW#24

 

[royibernthal]

Yup thanks. I went through the source and found scaleTo() - which is even better for me, that way I can measure the GUI content in runtime and then resize the texture accordingly.

 

I got a couple of performance questions:

1) I have more than 1 box, each has its own AdvancedDynamicTexture. Would each set of box + texture trigger a different shader compilation? Since these are basically different diffuseTextures for different meshes.

2) Does GUI update trigger shader recompilation in this case? (e.g. if I'm animating things in the GUI)

3) How performance heavy is what I'm trying to do compared to displaying GUI on a Plane? Does it use substantially more resources? Would it be a bad idea to do this on mobile?

[royibernthal]

Deltakosh?

[GameMonetize]

1/ Nope. Same shader as you don't have different options (all are only using diffuse)

2/ ADT does not trigger any shader related stuff. You can use it freely

3/ Each ADT requires a copy from a canvas to a texture so having multiple ADT is obviously more expensive than one. But having 6 ADT of 100x100 is equivalent to 1 ADT with 100x600

[royibernthal]

Got it, thanks for the answers.

I got a follow-up question - or rather, digging a little deeper into what I'm trying to do -

 

A box needs to have a texture skin, and only one face should have an ADT on top of the skin.

My current approach seems way too expensive according to your answer. Multiplying 6 faces times the amount of boxes I have, while 5 faces in each box shouldn't even require ADT.

I'd like to re-use the box skin - I suppose a normal texture would be the solution for that?

Would you go with MultiMaterial to mix the box skin with ADT? If so, is it possible to apply different faceUV to different sub materials somehow? Since the skin will need to be applied from a texture map to 6 faces (or 5 depending on whether the 6th will have to be part of the ADT), and the ADT only to a single face.

How would you best approach it?

[GameMonetize]

multimat is really my option #1 here

You can create a box with specific UV per face:http://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors

[royibernthal]

Yeah that's the link in my first post. What am I missing here?

 

What I theoretically need -

adt submat - 1 face and other 5 faces are blank

box skin submat - 5-6 faces

part of a multimat that's applied to a box.

 

The "issue" is the faceUV is set for the box and can't be set per submat (as far as I know), making what I need to do impossible? at least in a straightforward way.

Can you please elaborate on how you think this can be solved?

[GameMonetize]

Could you produce a repro in the PG to see where you are (a simple one please)

[royibernthal]

I can't say I'm really anywhere as I'm not sure what needs to be done, but here's the general direction:

https://www.babylonjs-playground.com/#ICZEXW#27

[JohnK]

No idea at all if this is of any use to you but I had fun making a box out of planes each of which contains a GUI. The GUIs happened to be ones I had lying around but please note I only played around with putting them together so they formed a box none of them do anything.

https://www.babylonjs-playground.com/#V0LBBB

[royibernthal]

Hey,

I see, you broke a box into planes.

I'm not sure if that's the ideal solution in my case, though it'd definitely allow me to apply a different material to each plane.

Waiting to see what DK has to say  It'd be best if this could be solved in a more straightforward way on a single box mesh.

 

Btw in your case the same could be achieved with a single ADT and a single box mesh, which is what I did in my first PG, if this is any help to you:

https://www.babylonjs-playground.com/#ICZEXW#24

[JohnK]

On 12/9/2017 at 12:59 AM, royibernthal said:

only one face should have an ADT

If only one face then could you parent a plane to a box?

[royibernthal]

https://www.babylonjs-playground.com/#ICZEXW#28

That plane would intersect with the box's face unless its z is different, in which case the plane would not entirely look as part of the box.

[JohnK]

A small offset and you cannot tell https://www.babylonjs-playground.com/#ICZEXW#29

[royibernthal]

Hmm I suppose you're right.

In terms of performance which will be better an extra plane per box or multimat? (imagine you have tens of boxes)

[JohnK]

10 minutes ago, royibernthal said:

In terms of performance which will be better an extra plane per box or multimat? (imagine you have tens of boxes)

That one is a little beyond me. It also seems to me that you may have the faceUV method and multimaterial method a bit intertwined when they are separate things, but I am very often wrong, paticularly about what other people know.

FaceUV compared to Multi-materials

My other concern is that perhaps you can get the GUI as a texture but will it then still be active? Don't know not skilled enough.

So being simple minded I would do the plane plus box approach.

[GameMonetize]

Both techniques are comparable ultimately as they produce the same number of draw calls

[royibernthal]

42 minutes ago, JohnK said:

hat one is a little beyond me. It also seems to me that you may have the faceUV method and multimaterial method a bit intertwined when they are separate things, but I am very often wrong, paticularly about what other people know.

FaceUV compared to Multi-materials

Yeah I'm aware that they are separate things

42 minutes ago, JohnK said:

My other concern is that perhaps you can get the GUI as a texture but will it then still be active?

I'm not sure I understand what you mean.

 

41 minutes ago, Deltakosh said:

Both techniques are comparable ultimately as they produce the same number of draw calls

I see. Is it even possible to achieve this with MultiMaterial?

[JohnK]

On 12/4/2017 at 3:24 PM, royibernthal said:

I'm trying to map each part of the texture to its corresponding part in the box using faceUV.

If this was possible would the clickable buttons on the GUI still be clickable?

[royibernthal]

Yup

https://www.babylonjs-playground.com/#ICZEXW#30

[royibernthal]

On 12/13/2017 at 7:37 PM, royibernthal said:

On 12/13/2017 at 6:54 PM, Deltakosh said:

Both techniques are comparable ultimately as they produce the same number of draw calls

I see. Is it even possible to achieve this with MultiMaterial?

DK?