I’m trying to use a TextureCanvas to render to a mesh in my scene, but the texture does not respect the size of the mesh. Essentially, I am trying to render text, or letters to a mesh. If I create a plane in my scene and render a letter to it, no matter the size or proportions of that plane, the letter adjusts and stretches/shrinks to fit inside the plane. But the letter does NOT render to fit inside the mesh that is the real target.
How can I control this behavior? That is, how can I force the TextureCanvas texture to render completely inside the target mesh?
I’ve considered using the Dynamic Texture, but my implementation is using the TextureCanvas extension. Is there a difference between the two with respect to what kind of texture one can give to the text? We want to be able to apply different textures to the text, which I believe it the reason we are using the TextureCanvas. I am just trying to sort out why the texture behaves differently on the plane than on the target mesh.
A playground might help to see what is happening. Even if you cannot use your actual mesh then an example using a box or sphere contrasted with a plane could possibly help.
The advantage of dynamicTexture is that it is part of the maintained build rather than an extension which the author might no longer maintain.
I’m not having much luck recreating this in a playground.
With my limited understanding, I do not believe that Dynamic Texture allows for applying textures to the font, though it would obviously be better to use something that is maintained.
My implementation is not terribly different from the example playground: https://www.babylonjs-playground.com/#9S5YZY#6, with the difference being that I want to render to a mesh in a model, where the behavior changes.
I am sorry I can’t provide more info. I will keep digging. Thanks for the help!
Since both use canvas whatever you can achieve with one you can achieve with the other. Will look into it but may be a few days. Probably need globalCompositeOperation.
However scaling text on a plane is relatively straight forward on a mesh not so.
Hi blitt6… and hi John… and others. blitt6… do you know about UV data? (sometimes found on a mesh object, sometimes not.) When UV data is present on a mesh, there is ONE 2-value “setting” on/for every vertex of the mesh. These 2-values… are X and Y values between zero and one… inclusive.
When a vertex’s UV value is… for example… 0.3, 0.8 … that means “map” (pull/stretch) the texture’s 30% X and 80% Y location (as measured from texture’s lower left corner)… TO THAT VERT.
SO, with precision-setting of UV data on a mesh… you can stretch and pull and twist its texture… until it hurts. heh. UV’s give lots of power for texture mapping onto mesh.
And… there’s some other “knobs” for “sliding-around” textures upon a mesh, especially for mesh without UV’s.
On BaseTexture-class… coordinatesMode, coordinatesIndex, scale, wrapU, wrapV, (wrapR?). Keep in mind… that ‘uvw’ are the same as ‘xyz’… but for textures. So. uWrap is a wrap for the texture’s X axis… etc.
uAng, uOffset, uScale, vAng, vOffset, vScale, wAng, wrapU, wrapV, etc. Clampings, addressModes, I don’t understand much about it, but MANY of those things can/will affect HOW textures (including dynamicTextures and GUI2d AdvancedDynamicTextures-for-mesh)… map-onto mesh.
texture.uOffset and .vOffset and .uScale and .vScale … are nice places to start experimenting. That will make any non-UV-dictated texture-mapping… slide-around and stretch a bit… upon a mesh.
Many of us DO understand the struggles of positioning dynamic text… in precise and consistent ways… upon a mesh texture. It can get rough. Some of us have started using GUI-2d system labels and for-mesh features… to keep our sanity. I don’t know how/if TextureCanvas can integrate with GUI2d, though.
Anyway, I just wanted to tell you about some of the possibly-useful “knobs” that DynamicTexture probably inherits from BaseTexture and Texture classes, and remind about mesh UV data. Party on!
Thanks for the great info! I will play around a bit with the UV ‘knobs’ you mentioned. I have a lot to learn here, but I’ll dig in and see what I can do. Thanks again!
Still quite a lot of issues. A lot depends, as @Wingnut, on how UV values have been set on the mesh. Here is an example with a cylinder, I was concentrating getting the text correctly on the curved surface not the top and bottom
I put it onto a box… and added a “button Control” at lines 54-64.
Then, in lines 117-125… I animated the button’s .topInPixels, .leftInPixels, and .rotation properties… using math.sin/cosine crap. I just wanted to show HOW text (a gui2d-for-mesh textBlock-control… which is inside a simple background-less button-Control) could be moved around on simple mesh (similar-to using texture uOffset, vOffset, and wAng). I think Gui2d controls can be scaled, too… in both X and Y separately. Pretty good power… full font families, colors, sizes, styles, paddings, alignments, etc. Almost as powerful as spans and divs in html.
SOME… might make a “panel” (a gui 2d mesh-tracking label)… which is a great way to put a “label” on a mesh… without needing to texture-merge the mesh default texture… with the label texture. Gui 2d labels (textblock) MESH-TRACKING works pretty nice… and has “billboardMode” feature… label always faces camera, no matter where camera is placed.
Putting a gui 2d textBlock (inside an adt container) onto a simple plane, and then parenting the plane to a mesh (like a license plate on a car)… that works good, too.
Anyway, that playground up there… is part of a Gui 2d button-DRAGGING test scene, so, ignore all the button dragging functions in there… that playground is a mess. heh. As you can see, it’s an all-sided thing. Enable line 19, disable 22… for a flatter box. Just a testing scene… goofing around.
I wonder what this adt would look/act-like… if we mapped it onto a torus knot? hehe.
Crazy labeling experiments 201… good stuff. Extra credit if you crash a browser!
