Text on a box with GUI

[Hillardo]

Hello,

I have a box with a diffuseTexture and text that is laid over the diffuseTexture with an ambientTexture. 

When I use more boxes, I need an extra canvas and texture for the box, because the text is unique for every box.

For a better performance I would like to create one big texture with all the text and use faceUV to get the needed parts.

My problem is, that the faceUV refers to the diffuseTexture of the box and not the ambientTexture.

Is there a way that the faceUV only effects the ambientTexture or a similar method for ambientTexture?

[aWeirdo]

Hi @Hillardo 

Could you please create a PG Repo @ http://playground.babylonjs.com/
It would help us help you faster  

[Wingnut]

Hi guys, sorry to butt-in.  Possibly... DON'T use faceUV for your text overlays.  Perhaps use plane(s) laid-atop the box, and put the transparent backgrounded "master text image" (atlas) onto the plane(s).  Use texture.uOffset and vOffset to slide-around the image, putting the correct text onto the correct plane(s).

How many boxes?  How many sides of the box... need text on them?  How many different pieces of text?  Those are some answers that would help us help. 

Anyway, let's do a little demo... showing the plane-over-box-face method.  UOffsets and vOffsets are sliding-around the slightly-scaled sprite atlas.

https://www.babylonjs-playground.com/#1XDIJF#11

No ambient used... all diffuse.  Looks ok.  Just replace the chess pieces... with text (and a bit more spacing between each, I'd say).

Probably start with a testing atlas sheet that is oh... 2048 tall and 4096 wide, and divide it up into 32... 512x512 areas (4 cells tall, 8 cells wide).  Center the text in the cell area, but still try to leave SOME white space on all sides of each text.  *shrug*  Using this layout, your uOffsets MIGHT BE 0, .125, .25, .375, .50, .625, .75, .875.  Your vOffsets MIGHT BE 0, .25, .5, .75.  Not sure.    I don't play with texture offsets too often.

But yeah, if you have 1000 boxes doing this... on all 6 sides of each box... then it could get a little bit "heavy". 

[Hillardo]

I finally created a playground: https://www.babylonjs-playground.com/#EEINMU#1

We are using planes for the text, but we want to try a new way to increase the performance.

We need text on every side of the box. We have around 50 boxes in each scene.

The text for each box should be editable by the user, but every side of one box shows the same text.  

 

[Hillardo]

@Wingnut

Thank you for your reply on the other topic.

I now also want to try out the planes.

Is there a way to keep them transparent while using a canvas and a dynamic texture to put the text on them?

https://www.babylonjs-playground.com/#1XDIJF#12

[Wingnut]

Hi again.

IF you could use the .drawText() directive...  http://doc.babylonjs.com/classes/3.0/dynamictexture#drawtext-text-x-y-font-color-clearcolor-inverty-update-rarr-void

...then I think... 

     dynamicTexture.hasAlpha = true;
     dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);

Lots of PG demos for drawText.

Using fillText... I'm not sure how.  A playground search for 'fillText' might help.

[Wingnut]

Another note:  Using a six-plane method, Babylon GUI is available to you, too.

AdvancedDynamicTextures have two modes... fullScreen and ForMesh... var advancedTexture2 = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(myPlane, 1024, 1024);

After that, put an ADT on each plane, and a rectangle or other container (usually for borders).  Then add a textBlock to the rectangle... on each plane.

Now you've got some pretty good text-making power on each plane.

Babylon GUI takes a little time to learn, but it's not bad.  In most cases, you can simply change textBlock.text = "anything", and there are some SWEET aligning and containing power... with Babylon GUI.

That's what I would use.  I would build a func that 'generates' planes with advancedDynamicTextures (ADT'S) on them, with a GUI rectangle containing a GUI textBlock.  A side-of-box factory. 

You could use a blank abstractMesh as a parent/gizmo in the center, and then parent all 6 'HillardoGuiTextPlanes' to it.  (they were made with the HillardoGuiTextPlaneGenerator) 

Just a thought. 

[Hillardo]

@Wingnut Again you delivered a great solution for my problem. Thank you.

I have one question about resizeToFit. I set it too true, but the text doesn't scale down and is cut off.

Is there a way to combine resizeToFit and textWrapping? I would like to scale the text down, but with textWrapping, so that the size of the text is as big as possible.

https://www.babylonjs-playground.com/#FA2H83#2

[Wingnut]

My pleasure.

Just in case... remember the option to dispose old textBlocks/containers/controls, and make new ones... with wanted changes.  Often, avoid modifying already-made textBlocks and other GUI controls.

Umm... I bet... you are trying to up/down-scale the size of the 6-plane box (maybe with a mouse-drag), and you want the box-sides text... to re-wrap and text-scale itself... to TRY ITS BEST to fit (nicely) onto the sides of the box, right? 

If so, it is maybe best... to NOT try to adjust any text scales/wraps... WHILE the box/plane is being drag-sized.  In fact, during the box resizing/rescaling, hide/remove all AdvancedDynamicTextures (ADT)... until the drag-scaling is done.  THEN... re-install/re-reate all the GUI on all 6 sides.  (Mostly, you will just recreate the CONTAINERS and not the controls.  You can move (re-child) the container's old controls... into the NEW container, before disposing the old container.)

Also, I think there is a phenomenon involved here... called adaptiveScaling.  It MIGHT ONLY apply-to full-screen ADT's... but... I think it is worth some research.  AdaptiveScaling is a bit technical for me, but feel free to teach us things that you learn about it.  Perhaps it ONLY has to do with scaled containers/stackPanels. https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/controls/stackPanel.ts has 8 occurrences of that term.  *shrug*

Are you using stackPanels at all?  Maybe try a stackPanel containing a rectangle containing a textBlock... on each box side.  Then play with (adaptive) scaling on the stackPanel.  It's worth a try.   

But yeah, resizeToFit used with wordwrap... that's one of those late-measurings that is not always easy.  Live re-wrapping... might be rough water.  Might be better to turn off gui during re-size, re-create when sizing is finished.  *shrug*  I'm not being so helpful THIS time, am I?    Sorry.

[Hillardo]

@Wingnut I don't want to scale the box. The user should be able to put text on the box. I want to format the text in a way, that the maximum of text is displayed, before it gets too small and is cut off.

I don't get which benefits stackPanels offer and every occurrence of adaptiveScaling in  https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/controls/stackPanel.ts has a 'ignore' before it.

 

[Wingnut]

Ahh, ok.  Thx for clarification.  You need a special for-textBlocks-only... rewrapAndRefontToFit().

Yeah, I don't have any answers for you.

You probably have some limits.  Max font size, min font size, max chars at min font size, etc.  And with 3 different sizes of box-sides!  Ow! 

hmm.  I'll keep thinking.  Others may comment soon.

[Hillardo]

https://www.babylonjs-playground.com/#FA2H83#4

I came across a new problem.

The text is flickering when I zoom out and more meshes become visible and I have no idea what cause this.

[GameMonetize]

Looks like you have depth fighting issues. Do you have multiple objects at the same place?

[Hillardo]

@Deltakosh There is only on plane at every side of the box. The problem also occurs when I increase the gap between panel and box side. 

[Wingnut]

Hi guys.  Hillardo... for SOME reason... this flickering is caused by camera.minZ.

https://www.babylonjs-playground.com/#FA2H83#7

At line 50, I created a 'nudge' value.  It is set to 1.  All text planes are 1 unit away from box sides.  (much too far, but plenty to remove all z-fighting)

Also, I am ONLY adding the negZ planes (the first one - lines 71-77)  (camera-facing planes)

Also, I set line 8... camera.minZ = .00001;

Still flickering severely.  Not good.

Now change line 8 to... camera.minZ = .01;   Re-Run.

Better, but STILL flickering when camera is far un-zoomed.

This is a framework issue, I think.  (but I'm wrong sometimes, too).  Let's ask @Deltakosh again.

I don't think camera.minZ should affect GUI.minFlicker 

[GameMonetize]

@Wingnut is right, the problem comes from your camera.minZ which is dead too small. Just bump it to 1 and you should be good.

 

for the flickering you are seeing in https://www.babylonjs-playground.com/#FA2H83#7: The problem comes from the fact that all planes are generated at the sample place (you commented out the plane placement for each box side :))

[Wingnut]

Yeah, thx, DK.  I stacked all 5 instances... via remarks.

https://www.babylonjs-playground.com/#FA2H83#8

Unstacked, with a .1 minZ.  Looking pretty good.

But still, minZ affects GUI ADT for Mesh.  Interesting. 

Call 'em 'ADT4M' ?

I wonder if ADT's for Mesh... have a plane/quad involved with them.  hmm.

There's so much I want to learn, and so little brain space remaining.    Thx DK.

Hilly, are you satisfied? 

Sorry for claiming framework bug.  Wingnut inexperience (and forgetting to position 5 instances in my version of testing demo).

Clarity on the text is GOOD, really.  Clean lines.  1000px fontSize... wow.  Beefy. 

[Hillardo]

@Wingnut The result looks very good, but as you can see in the playground on boxes where one side is very large in comparison to the other sides, the text looks a little bit out of place.

I am experimenting with a second, invisible box that displays the text over the original Box.

With a dynamicTexture and a canvas I will be able to create a fitting texture for every side.

Now my problem is, that I don't get the second box to be transparent and the text to be solid.

My best try is here:

https://www.babylonjs-playground.com/#89JUT9

Any ideas how to solve this problem?

[Wingnut]

Hi H!  https://www.babylonjs-playground.com/#89JUT9#1

Not much progress, but line 48... alphaMode = 4... seems to get us a LITTLE closer to transparent background on the text (and transparent outer box).

I did some minor changes in your box creation areas... lines 11-15.  (yawn)  Set gaps between boxes with line 12.

*shrug*.  I'm not much help, am I?  Sorry. 

But, I put some other various "code debris" in there, too.  More knobs to turn and experiment-with.  Hopefully, smarter people than I... will comment/help soon.

Update:  https://www.babylonjs-playground.com/#89JUT9#2

Shrinking the outer box back to normal... looks pretty good.  Might be fine.  (Nice job on the other stuff, too.  Lookin' good.)

[GameMonetize]

Here is your fix:https://www.babylonjs-playground.com/#89JUT9#3

I removed the .alphaMode as stated by @Wingnut and I flagged the diffuseTexture with hasAlpha

[GameMonetize]

And a version with alpha blending: https://www.babylonjs-playground.com/#89JUT9#4

(I added an opacityTexture)

[Wingnut]

Cool!  DK, you're such an excellent TextureMeister.  (hug)

[Hillardo]

Thank you. Very nice solutions.

Is there any documentation about alpha? 

[GameMonetize]

You can start with this one: http://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered

[Hillardo]

Hello,

I have a running prototype for the texture now. 

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

It needs a lot of time to start and visualize the boxes.

Do you have some ideas to increase the performance? Already changed my what reduced the loading time by nearly a second, but it is still too long.

I attached a profile, which shows the loading time on a laptop which is supposed to run it when it is finished.

 

Profile-20180201.7z