Jump to content

Text mesh in ground plane


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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");


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites


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

Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...