Text mesh in ground plane

[mwpowellhtx]

Hello,

I want to "draw" some text, in a font, using a material/color, preferably in the "ground plane". Is it doable?

Thank you...

[GameMonetize]

Hello!

 

(Do you know that there is a subforum for questions?)

Yes this is doable, the nest option is to use the DynamicTexture: http://www.babylonjs-playground.com/#1282WV#5

[mwpowellhtx]

19 minutes ago, Deltakosh said:

Hello!

 

(Do you know that there is a subforum for questions?)

Yes this is doable, the nest option is to use the DynamicTexture: http://www.babylonjs-playground.com/#1282WV#5

Sorry, feel free to move it if possible.

Thanks!

[GameMonetize]

Already done no worry:)

[mwpowellhtx]

Okay, this is not exactly what I am looking for.

I want to draw text "as a mesh".

It's as though there were a "plane" on which I want to render the text.

So the text may be drawn with perpendicular to Y, Z, X or what have you. Most likely perpendicular to Y in my specific use case.

drawText seems to only want X and Y coordinates. What do you do about the Z coordinate?

Edit: I should also clarify while I am here, I want to orient the text, some elements may draw their left to right from -z to +z, while others may draw from +z to -z.

Make sense?

[mwpowellhtx]

So far my approach is to split the field in half along the Y axis, +/-x coordinate position. So far so good. I could be wrong, I think I want to rotate the ground Math.PI at that point to get 180 degrees rotation, and thus text that renders appropriately depending on left/right side of the field.

[mwpowellhtx]

Having some difficulty setting the diffuseTexture on the ground meshes. As soon as I do, any colors I had set on them vanish or they appear transparent.

Besides the drawing the text itself, what must I do for the diffuse "background" color to be set correctly via the texture?

[mwpowellhtx]

Color question (sort of) figured out.

fieldTexture.drawText("blah blah blah blah", 200, 200, "bold 70px Segoe UI", "#F3F2F2", "#3E7E00");

However, I do not seem to be seeing any text being drawn. Although the field color is correct along the lines what I expect.

Assuming I can get that to draw correctly, I half expect that to repeat that left and right, I would expect it drawn one direction on one, and drawn the other direction on the other.

fieldTextureLeft.drawText("blah blah blah blah", 200, 200, "bold 70px Segoe UI", "#F3F2F2", "#3E7E00");
fieldTextureRight.drawText("blah blah blah blah", 200, 200, "bold 70px Segoe UI", "#F3F2F2", "#3E7E00");

 

[mwpowellhtx]

Stupid question, but where can I find a "list" of available fonts, sizes, styles, etc? Anything the browser supports, standard HTML5, etc, would be sufficient?

Thanks!

[mwpowellhtx]

On the right track, I believe, but I need some help with "options". Where is the documentation on this?

var textureLeft = new BABYLON.DynamicTexture(gn("numbering-texture") + (++h), 512, s, true);
var textureRight = new BABYLON.DynamicTexture(gn("numbering-texture") + (++h), 512, s, true);

Changing "options" does seem to have an impact. Also it is apparent my colors will need a closer look what means what, what's operating as a mask, and over what other colors.

Interesting side note, I at least answered my question re: orientation and such, notwithstanding experimentation of what makes sense for fonts, sizes, positions, colors, etc.

[mwpowellhtx]

Okay, the behavior is a little clearer to me, but I am confused by the difference between color and clearColor.

Assuming I've got the material colors set correctly, both of these appear to be operating as a sort of mask, or hue, for lack of a better word, as opposed as  the actual color.

For instance, clearColor of "white" allows all of the material color through; where as transparent has no effect, or renders the color black. Almost an AND bitwise mask, possibly an XOR bitwise operation. I set it to "white" to allow all of the color material through. No problem there.

Now, for the color itself. This one is trickier, because I want "white" to be the actual color shown. Actually, it's off-white, but we'll run with "white" for sake of this thread. If I set it to "white", nothing shows up; or, more precisely, the material color shows through. If I set it to "black", black shows up, or rather, it would seem the material color is masked out.

But when I set it to something in between, I get a strange looking hue, nowhere close to what I really want.

So, do I need to make some bitwise masking calculations in order to determine the appropriate masks to set?

Can someone clarify this for me, just besides?

Thank you...

[mwpowellhtx]

Oof, yet another snafu. This has probably been discussed before, but to clarify, or if there are better ways to attack the issue than the high level helper function(s)?

It seems like only the last text that I ask to be drawn is being drawn. Suppose I had multiple sub-texts I wanted to draw, at different positions in my ground/plane? i.e.

// the 50's do not show up
textureLeft.drawText("50", maxBaseLength, maxBaseLength / 4 * 3, "7px Arial", color, clearColor);
textureRight.drawText("50", maxBaseLength, maxBaseLength / 4 * 3, "7px Arial", color, 

// only the 20's show up
textureLeft.drawText("20", maxBaseLength - 50, maxBaseLength / 4 * 3, "7px Arial", color, clearColor);
textureRight.drawText("20", maxBaseLength - 50, maxBaseLength / 4 * 3, "7px Arial", color, clearColor);

Any suggestions?

Seems like possibly I would need a custom draw function? Doable, but man, what a pain.

[jerome]

mmmh...

maybe could you please report what you really want to achieve in a PG example ? this would help us to help you  

[mwpowellhtx]

Picture numbers painted on an American football field. Is that clear enough?

However, that doesn't answer the basic, technical questions, such as apparent color masking, why only "one" text element, what are the "options", how are the text positions calculating, etc, etc.

[mwpowellhtx]

To help visualize, see attached. Couple of things going on there:

• I am creating planes for each of the numbers, left, and right (180 degrees rotated).
• Clear color works well enough it seems; if I set "transparent" no problem; that's close enough to what I want there. Currently "gray" for demo purposes, although I do not know why this shows "black", except for aforementioned suspicion that color masking is going on.
• Text color is set for "white", but is not drawing correctly. From what I can tell, color is one aspect; more influential seems to be the "options" and "position" of the text, neither of which is calculating correctly, IMO. I've poured over the many examples on the web, but I cannot achieve a result consistent with those in the present condition. No idea why it is broken, but it is.
• Things that seem to effect the "scale" of the text are conveyed in "options", with results appearing "grainier" depending on how large or small. Additionally, the drawn position is highly inconsistent. Does not appear to correlate with world coordinates whatsoever. If I had to guess, it may have to do with some measured text widths, but it's only a guess.

Suggestions welcome.

[GameMonetize]

DynamicTexture is a canvas (a HTML5 canvas) that is then used to generate a picture.

You can use getContext to get the canvas' context: http://doc.babylonjs.com/classes/2.3/DynamicTexture#getcontext-rarr-canvasrenderingcontext2d

Then every HTML5 documentation about canvas and context is applicable: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

drawText is just a helper function. I suggest not using it and instead use the context if you want full control over the canvas.

 

Finally, we are developers so give us code  The best way to be helped is to provide a repro case on the Playground.

[mwpowellhtx]

The code is proprietary, but I can provide snippets, examples, etc. And, describe the issues, illustrate with pictures as I've done.

[GameMonetize]

This won't help..just try to reproduce the issue with two planes...

[mwpowellhtx]

@Deltakosh Well, I'm sorry that doesn't work for you. You, or someone, still hasn't answered my very basic questions:

What are the options? 512? Means what? Looks like possibly a bit mask; but for what? What are the fields? What do they mean to me?

Why are text positions not scaling properly? Seems to me like a basic expectation that they should.

What's the story with color masking going on?

It's entirely possibly there is a bug I am troubleshooting in my own code, and I'll humor your playground request, if to rule out and/or demonstrate what seems to be going on.

But in the mean time, make an effort to answer these questions, please.

Thank you.

[mwpowellhtx]

Okay, not sure what this means, but when I include the DynamicTexture, I get a compilation error.

example broken dynamic texture / draw text

Compilation error
Line 13:3112 - Cannot read property 'textures' of undefined

Not a bug in my code.

[mwpowellhtx]

My workaround at the moment appears to be to work with the primitives, which is probably better, especially to gain control over "options" such as centering the text (HINT, CLUE, HINT, CLUE), etc.

[GameMonetize]

Quote

But in the mean time, make an effort to answer these questions, please.

This is funny.Thank your for it.

Do you remember that babylon.js is an open source project?

So let's do what you should have done first. regarding options:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/Textures/babylon.dynamicTexture.ts#L17: You can see that options can be either a canvas you want to provide or a size(either just a number of a {width, height} object) to define the size of the canvas to create.

https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/Textures/babylon.dynamicTexture.ts#L68: DrawText is just a simple convenient tool on top of regular canvas function. Wanna understand color masking and all related canvas features? Follow the previous link I gave you.

Oh and btw, if you find the documentation inconsistent / incomplete please submit a PR: https://github.com/BabylonJS/Documentation

[adam]

42 minutes ago, mwpowellhtx said:

Okay, not sure what this means, but when I include the DynamicTexture, I get a compilation error.

example broken dynamic texture / draw text

Compilation error
Line 13:3112 - Cannot read property 'textures' of undefined

Not a bug in my code.

http://doc.babylonjs.com/playground?q=DynamicTexture

[mwpowellhtx]

@Deltakosh Of course. Fair enough re: code inspection, options.

Okay. So "512" seems to be for width/height.

This doesn't tell me what effect the colors are having. The effect doesn't seem to be consistent. i.e. both clear color and color are both influencing fillStyle. This seems like a bug to me?

It looks straightforward enough, but it appears there is a bug involving "textures" somewhere else in the code. Did you see the playground example?

[adam]

Are you referring to the z-fighting that is going on in your PG?

If so, one of the ways to fix it is to offset the planes a small amount.

http://www.babylonjs-playground.com/#1TP1KF#3